Mobile navigation, merchandise content

src/style/_customgrid.scss

@@ -0,0 +1,38 @@
+$gridPrefix: "tg-";
+
+.#{$gridPrefix}container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+
+
+    .#{$gridPrefix}row {
+        display: flex;
+        margin: 0;
+        padding: 0;
+    }
+
+    .#{$gridPrefix}auto {
+        flex: 0 0 auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    .#{$gridPrefix}fill {
+        flex: 1;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+    }
+
+    @for $i from 1 through 6 {
+        .#{$gridPrefix}fill-#{$i} {
+            flex: #{$i};
+            margin: 0;
+            padding: 0;
+            overflow-y: auto;
+        }
+    }
+}

src/style/_layout_shorthand.scss

@@ -0,0 +1,22 @@
+@for $i from 0 through 20 {
+    .m-#{$i*5} {margin: #{$i*5}px;}
+    .m-#{$i*5}-i {margin: #{$i*5}px !important;}
+    .mt-#{$i*5} {margin-top: #{$i*5}px;}
+    .mt-#{$i*5}-i {margin-top: #{$i*5}px !important;}
+    .mb-#{$i*5} {margin-bottom: #{$i*5}px;}
+    .mb-#{$i*5}-i {margin-bottom: #{$i*5}px !important;}
+    .ml-#{$i*5} {margin-left: #{$i*5}px;}
+    .ml-#{$i*5}-i {margin-left: #{$i*5}px !important;}
+    .mr-#{$i*5} {margin-right: #{$i*5}px;}
+    .mr-#{$i*5}-i {margin-right: #{$i*5}px !important;}
+    .p-#{$i*5} {padding: #{$i*5}px;}
+    .p-#{$i*5}-i {padding: #{$i*5}px !important;}
+    .pt-#{$i*5} {padding-top: #{$i*5}px;}
+    .pt-#{$i*5}-i {padding-top: #{$i*5}px !important;}
+    .pb-#{$i*5} {padding-bottom: #{$i*5}px;}
+    .pb-#{$i*5}-i {padding-bottom: #{$i*5}px !important;}
+    .pl-#{$i*5} {padding-left: #{$i*5}px;}
+    .pl-#{$i*5}-i {padding-left: #{$i*5}px !important;}
+    .pr-#{$i*5} {padding-right: #{$i*5}px;}
+    .pr-#{$i*5}-i {padding-right: #{$i*5}px !important;}
+}

src/style/_navigation.scss

@@ -27,6 +27,10 @@
       display: flex;
       align-items: center;
 
+      @media screen and (max-width: $breakpoint-sm) {
+        display: none;
+      }
+
       a {
         display: inline-block;
         text-decoration: none;

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);
+        }
+    }
+}

src/style/_variables.scss

@@ -5,6 +5,8 @@ $breakpoint-sm: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
 
+$navigation-height: 80px;
+
 $primary-color: #09003d;
 $primary-color: rgb(128, 0, 0);
 $hero-color: #fff;

src/style/combined.scss

@@ -7,6 +7,9 @@
 @import "_footer.scss";
 @import "_cards.scss";
 @import "_form.scss";
+@import "_sidebar.scss";
+@import "_customgrid.scss";
+@import "_layout_shorthand.scss";
 
 @font-face {
   font-family: "SFMoviePoster";