style and outside click improvements for header

wri · Oct 27, 2020 · 724127b · 724127b
1 parent 6304d95
commit 724127b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/src/components/header/components/submenu-panel/index.js b/src/components/header/components/submenu-panel/index.js
@@ -90,7 +90,9 @@ class Header extends PureComponent {
         <div className="submenu-wrapper">
           <OutsideClickHandler
             onOutsideClick={() => {
-              hideMenu();
+              if (!fullScreen) {
+                hideMenu();
+              }
             }}
           >
             <Search
@@ -100,7 +102,7 @@ class Header extends PureComponent {
               onSubmit={this.handleSubmit}
             />
             <Media lessThan="medium">
-              <ul className="menu-section">
+              <ul className="menu-section -first">
                 {navMain &&
                   navMain.map((item) => (
                     <li key={item.label} className="nav-item">

diff --git a/src/components/header/components/submenu-panel/styles.js b/src/components/header/components/submenu-panel/styles.js
@@ -95,11 +95,11 @@ export const SubmenuWrapper = styled.div`
     z-index: 4;
     position: sticky;
     top: 0;
-    padding: 30px 20px 10px 20px;
+    padding: 30px ${theme.grid.mobileGutter} 10px ${theme.grid.mobileGutter};
     background: #fff;
 
     ${theme.mediaQueries.small} {
-      padding-top: 20px;
+      padding: 30px ${theme.grid.desktopGutter} 10px ${theme.grid.desktopGutter};
     }
   }
 
@@ -126,16 +126,29 @@ export const SubmenuWrapper = styled.div`
       margin-bottom: 0;
     }
 
+    &.-first {
+      margin-top: 10px;
+    }
+
     h4 {
-      padding: 0 20px;
+      padding: 0 ${theme.grid.desktopGutter};
+
+      ${theme.mediaQueries.small} {
+        padding: 0 ${theme.grid.desktopGutter};
+      }
     }
 
     li {
       > a,
       > button {
         height: 42px;
-        padding: 0 20px;
         width: 100%;
+        padding: 0 ${theme.grid.desktopGutter};
+
+        ${theme.mediaQueries.small} {
+          padding: 0 ${theme.grid.desktopGutter};
+        }
+
         &:hover {
           color: ${darken(0.2, theme.colors.darkGrey)};
           background-color: ${theme.colors.lightestGrey};
@@ -156,7 +169,11 @@ export const SubmenuWrapper = styled.div`
       -webkit-overflow-scrolling: touch;
       display: flex;
       width: 100%;
-      padding: 0 20px;
+      padding: 0 ${theme.grid.desktopGutter};
+
+      ${theme.mediaQueries.small} {
+        padding: 0 ${theme.grid.desktopGutter};
+      }
     }
 
     .app-card {
@@ -211,6 +228,10 @@ export const SubmenuWrapper = styled.div`
           text-transform: uppercase;
           cursor: pointer;
 
+          > button {
+            padding: 0;
+          }
+
           svg {
             margin-right: 15px;
             width: 20px;