diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.scss b/src/components/hy-menu-main-group/hy-menu-main-group.scss index b48d58b88e8f1efa0f30a7995c5a5b38a6fe4858..0704a154bfcf7dcc1dd550d4c01069f59ea8a8e3 100644 --- a/src/components/hy-menu-main-group/hy-menu-main-group.scss +++ b/src/components/hy-menu-main-group/hy-menu-main-group.scss @@ -35,6 +35,14 @@ } svg { + @include breakpoint($wide) { + height: 15.27px; + width: 3px; + } + @include breakpoint($extrawide) { + height: 14px; + width: 3px; + } } span { @include breakpoint($wide) { diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/hy-menu-main-group/hy-menu-main-group.tsx index b33399acd1ba39c2621d9758f8328fc62ae31fb3..0147243d0389d15228e7c017900489d72fb5e7e5 100644 --- a/src/components/hy-menu-main-group/hy-menu-main-group.tsx +++ b/src/components/hy-menu-main-group/hy-menu-main-group.tsx @@ -69,7 +69,12 @@ export class HyMenuMainGroup { }} //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']} > - <hy-icon class={'menu--main-group__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={white} /> + <hy-icon + class={'menu--main-group__toggle__caret'} + icon={'hy-icon-slim-hamburger-menu'} + size={8} + fill={white} + /> <span>University main menu</span> </button> <div diff --git a/src/components/icon/SlimHamburgerMenu.tsx b/src/components/icon/SlimHamburgerMenu.tsx new file mode 100644 index 0000000000000000000000000000000000000000..ef88a442fa04054df470cf86f7a48e171d52cfa8 --- /dev/null +++ b/src/components/icon/SlimHamburgerMenu.tsx @@ -0,0 +1,11 @@ +import {h} from '@stencil/core'; + +function SvgSlimHamburgerMenu(props) { + return ( + <svg viewBox="0 0 13 64" {...props}> + <path d="M12.8,38.4 L12.8,25.6 L0,25.6 L0,38.4 L12.32608,38.4 L12.8,38.4 Z M0,64 L12.8,64 L12.8,51.2 L0,51.2 L0,61.44 L0,64 Z M12.8,12.8 L12.8,0 L0,0 L0,12.8 L12.32608,12.8 L12.8,12.8 Z"></path> + </svg> + ); +} + +export default SvgSlimHamburgerMenu; diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 7923a25d264b38a63ff35af1d9b14cf2c28a7a46..604de46cf75db3082e80084eb018f3c181a120f5 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -34,6 +34,7 @@ const iconNames: IconName = { 'hy-icon-quote': (p) => <icons.IconQuote {...p} />, 'hy-icon-remove': (p) => <icons.Remove {...p} />, 'hy-icon-search': (p) => <icons.Search {...p} />, + 'hy-icon-slim-hamburger-menu': (p) => <icons.SlimHamburgerMenu {...p} />, 'hy-icon-some-facebook': (p) => <icons.SomeFacebook {...p} />, 'hy-icon-some-instagram': (p) => <icons.SomeInstagram {...p} />, 'hy-icon-some-linkedin': (p) => <icons.SomeLinkedin {...p} />, diff --git a/src/components/icon/icons.tsx b/src/components/icon/icons.tsx index 3e7fbf85bf2e309480f9140182d034fb42bf0855..98a28fbf00782edb199f3dacb617234071b3ab27 100644 --- a/src/components/icon/icons.tsx +++ b/src/components/icon/icons.tsx @@ -158,6 +158,7 @@ export {default as RotateLeft} from './RotateLeft'; export {default as RotateRight} from './RotateRight'; export {default as Search} from './Search'; export {default as Share} from './Share'; +export {default as SlimHamburgerMenu} from './SlimHamburgerMenu'; export {default as SocialMedia} from './SocialMedia'; export {default as SomeFacebook} from './SomeFacebook'; export {default as SomeInstagram} from './SomeInstagram';