feat(layout): allow setting a different height for header in mobile r…

…esoltuion (#392) affects: @medly-components/layout, @medly-components/theme Co-authored-by: Mukul Bansal <[email protected]>
medly · Aug 23, 2021 · 94e0e28 · 94e0e28
1 parent a980048
commit 94e0e28
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/packages/layout/src/components/Header/Header.stories.mdx b/packages/layout/src/components/Header/Header.stories.mdx
@@ -3,7 +3,7 @@ import * as stories from './Header.stories';
 import { useMediaQuery, breakpoints } from '@medly-components/utils';
 import Header from './Header';
 import Logo from '@medly-components/core/src/components/Logo';
-import { PillIcon } from '@medly-components/icons';
+import { HomeIcon, PillIcon, LockIcon } from '@medly-components/icons';
 import { defaultTheme } from '@medly-components/theme';
 
 <Meta title="Layout" component={Header} parameters={{ jest: [] }} />

diff --git a/packages/layout/src/components/Header/Header.styled.tsx b/packages/layout/src/components/Header/Header.styled.tsx
@@ -5,8 +5,12 @@ export const Container = styled.header`
     display: flex;
     align-items: center;
     background: ${({ theme }) => theme.header.backgroundColor};
-    height: ${({ theme }) => theme.header.height};
+    height: ${({ theme }) => theme.header.height.mobile};
     position: relative;
+
+    ${({ theme }) => media(breakpoints(theme.breakpoints).up('M'))`
+        height: ${theme.header.height.desktop};
+    `}
 `;
 
 export const Content = styled.div`
@@ -20,12 +24,12 @@ export const Content = styled.div`
     padding: 0 1.6rem;
 
     ${({ theme }) => media(breakpoints(theme.breakpoints).up('M'))`
-            padding: 0 3.2rem;
-        `}
+        padding: 0 3.2rem;
+    `}
 `;
 
 export const HamburgerIcon = styled(MenuIcon)`
     ${({ theme }) => media(breakpoints(theme.breakpoints).up('L'))`
-            display: none;
-        `}
+        display: none;
+    `}
 `;
diff --git a/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx b/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx
@@ -33,7 +33,7 @@ export const NavItem = styled.button<NavItemProps>`
             content: '';
             position: absolute;
             width: calc(100% - 1.6rem * 2);
-            top: calc((${theme.header.navItem.height.desktop} - ${theme.header.height}) / 2);
+            top: calc((${theme.header.navItem.height.desktop} - ${theme.header.height.desktop}) / 2);
             left: 1.6rem;
             background: ${theme.header.navItem.activeIndicatorColor};
             height: 4px;

diff --git a/packages/theme/src/layout/header/index.ts b/packages/theme/src/layout/header/index.ts
@@ -4,7 +4,10 @@ import { HeaderTheme } from './types';
 const header: HeaderTheme = {
     backgroundColor: colors.professionalNavy,
     maxContentWidth: '1240px',
-    height: '72px',
+    height: {
+        mobile: '64px',
+        desktop: '72px'
+    },
     fontColor: colors.white,
     nav: {
         gutterSpace: '0.8rem'

diff --git a/packages/theme/src/layout/header/types.ts b/packages/theme/src/layout/header/types.ts
@@ -1,7 +1,10 @@
 export interface HeaderTheme {
     backgroundColor: string;
     maxContentWidth: string;
-    height: string;
+    height: {
+        mobile: string;
+        desktop: string;
+    };
     fontColor: string;
     nav: {
         gutterSpace: string;