better hamburger menuHEADmaster

1 files changed, 67 insertions, 26 deletions

diff --git a/static/sass/main.scss b/static/sass/main.scss
index e2b4c23..db7ecef 100644
--- a/static/sass/main.scss
+++ b/static/sass/main.scss
@@ -328,6 +328,9 @@ img.social-icon {
 
 /* Main layout for big screens */
 @media (min-width: $breakpoint) {
+  #sideMenuToggle {
+    display: none;
+  }
   #openSideBanner {
     display: none;
   }
@@ -349,39 +352,77 @@ img.social-icon {
 
 /* Style for small screens */
 @media (max-width: $breakpoint) {
-  #mainLogo {
+  #sideMenuToggle {
     display: none;
-  }
-  #openSideBanner {
-    position: absolute;
-    top: 0;
-    width: 95%;
-    margin: 0 auto;
-    img {
-      position: absolute;
-      top: calc($spacing / 2);
-      right: calc($spacing / 2);
+
+    &:checked + .sideMenuBtn > span {
+      transform: translateY(12px) rotate(45deg);
+    }
+    &:checked + .sideMenuBtn > span::before {
+      top: 0px;
+      transform: rotate(0deg);
+    }
+    &:checked + .sideMenuBtn > span::after {
+      top: 0px;
+      transform: rotate(90deg);
     }
   }
-  #sideBanner {
-    position: absolute;
-    text-align: center;
-    background-color: white;
-    width: 95%;
-    margin: 0 auto;
-    z-index: 100;
-    transform: translateY(-100%);
-    transition: transform 0.2s ease;
-    top: 0;
-    &:target {
-      transform: translateY(0);
+
+  .sideMenuBtn {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+    z-index: 1;
+
+    & > span {
+      transform: translateY(12px);
     }
-    #hideMenu {
+
+    & > span, & > span::before, & > span::after {
+      display: block;
       position: absolute;
-      top: calc($spacing / 2);
-      right: calc($spacing /2);
+      width: 100%;
+      height: 2px;
+      background-color: #616161;
+      transition-duration: .25s;
     }
   }
+
+  .sideMenuBtn > span::before {
+    content: '';
+    top: -8px;
+  }
+
+  .sideMenuBtn > span::after {
+    content: '';
+    top: 8px;
+  }
+
+  #sideMenuToggle:checked ~ header {
+    left: 0 !important;
+  }
+
+  #sideBanner header {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: calc(-1 * (442px + 2 * $spacing));
+    width: 442px;
+    height: 100%;
+    margin: 0;
+    padding: $spacing $spacing;
+    background-color: #ECEFF1;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
+    transition-duration: .25s;
+  }
+
+  #mainLogo {
+    display: none;
+  }
+
   #mainArea {
     max-width: 35em;
   }