Mobile navigation, merchandise content

2020-02-29 18:15:12 +01:00
parent 5f9ae37008
commit 801ac69a01
19 changed files with 2150 additions and 17 deletions
--- a/src/style/_sidebar.scss
+++ b/src/style/_sidebar.scss
@@ -0,0 +1,100 @@
+#sidebar {
+    position: fixed;
+    right: 0;
+    top: 0;
+    background-color: #FFF;
+    border-left: 0px solid $primary-color;
+    height: calc(100vh - #{$navigation-height});
+    height: 100vh;
+    width: 0;
+    z-index: 2000;
+    transition: width .4s;
+    display: none;
+
+    ul {
+        list-style: none;
+        padding: 0;
+        
+        a {
+            color: #000;
+            text-decoration: none;
+            display: block;
+            padding-left: 10px;
+            padding-top: 5px;
+            padding-bottom: 5px;
+
+            li {
+                padding-left: 10px;
+                padding-top: 5px;
+                padding-bottom: 5px;
+                border-left: 2px solid transparent;
+            }
+
+            &:hover,
+            &.active {
+                li {
+                    border-left-color: black;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+        display: inherit;
+    }
+}
+
+div.hamburger {
+    height: $navigation-height;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: end;
+
+    > div {
+        padding: 25px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    span {
+        display: block;
+        width: 33px;
+        height: 4px;
+        margin-bottom: 5px;
+        position: relative;
+
+        background: #FFF;
+        border-radius: 3px;
+
+        transition: transform .2s;
+    }
+}
+
+body.sidebar {
+    #sidebar {
+        width: 265px;
+        border-left-width: 4px;
+    }
+
+    div.hamburger {
+        span {
+            transform-origin: center;
+            background-color: #000;
+        }
+
+        span:nth-child(1) {
+            transform: translateY(9px) rotate(45deg);
+        }
+
+        span:nth-child(2) {
+            opacity: 0;
+        }
+
+        span:nth-child(3) {
+            transform: translateY(-9px) rotate(-45deg);
+        }
+    }
+}