slim hamburger menu

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) {

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

src/components/icon/SlimHamburgerMenu.tsx

+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;

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} />,

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';