From 66e38c49895495385ad3a384c6d7c8fdfb8bb7e4 Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Thu, 4 Mar 2021 15:26:56 +0200
Subject: [PATCH] slim hamburger menu
---
.../hy-menu-main-group/hy-menu-main-group.scss | 8 ++++++++
.../hy-menu-main-group/hy-menu-main-group.tsx | 7 ++++++-
src/components/icon/SlimHamburgerMenu.tsx | 11 +++++++++++
src/components/icon/icon.tsx | 1 +
src/components/icon/icons.tsx | 1 +
5 files changed, 27 insertions(+), 1 deletion(-)
create mode 100644 src/components/icon/SlimHamburgerMenu.tsx
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 b48d58b8..0704a154 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 b33399ac..0147243d 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 00000000..ef88a442
--- /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 7923a25d..604de46c 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 3e7fbf85..98a28fbf 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';
--
GitLab