Make responsive (#8)

* Refactor ModResult to use CSS Grid

* Mobile support for ModResult

* Mobile navbar

* Mobile fixes, get rid of x overflow

* Mobile filter support

* Fully responsive

* Collapse categories view later

* Mobile-first

* Fix version selector width

layouts/default.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="layout">
     <aside>
+      <input
+        class="hamburger-button"
+        alt="Open navigation menu"
+        type="checkbox"
+        @click="toggleNavMenu()"
+      />
+      <!-- TODO: Probably shouldn't be a Unicode symbol -->
+      <div class="hamburger-icon">☰</div>
       <div class="logo-wrapper">
         <img class="logo" src="~/assets/images/logo.svg" />
         <span class="name">modrinth</span>
@@ -223,6 +231,10 @@ export default {
       localStorage.setItem('data-theme', theme)
       document.documentElement.setAttribute('data-theme', theme)
     },
+    toggleNavMenu() {
+      document.body.style.overflow =
+        document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+    },
   },
 }
 </script>
@@ -230,30 +242,37 @@ export default {
 <style lang="scss">
 .layout {
   display: flex;
+  flex-flow: column;
   min-height: 100vh;
   width: 100%;
 
+  // Desktop
+  @media screen and (min-width: 1145px) {
+    flex-flow: row;
+  }
+
   aside {
     top: 0;
-    position: -webkit-sticky;
     position: sticky;
-    max-height: 100vh;
-    border-right: 1px solid var(--color-grey-2);
+    border-right: 0;
     display: flex; // Flex here to safely expand navigation height
     flex-direction: column;
-    max-width: 15%;
-    min-width: 15%;
+    width: 100vw;
+    max-height: 100vh;
+    background: var(--color-bg);
+    z-index: 10;
 
     .logo-wrapper {
       align-items: center;
       display: flex;
       height: 3.5rem;
-      padding: 0 1.5rem;
+      width: 100vw;
       font-family: 'Montserrat', sans-serif;
 
       .logo {
         height: 2rem;
         width: auto;
+        margin-left: 2.5rem;
       }
 
       .name {
@@ -263,14 +282,53 @@ export default {
       }
     }
 
+    .hamburger-button {
+      position: absolute;
+      display: block;
+      left: 10px;
+      opacity: 0;
+      margin: 0;
+      top: 1.2rem;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+
+    .hamburger-icon {
+      display: block;
+      position: absolute;
+      left: 15px;
+      top: 1.2rem;
+      pointer-events: none;
+    }
+
+    .hamburger-button:checked ~ nav {
+      left: 0;
+    }
+
     nav {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
       justify-content: space-between;
+      position: absolute;
+      height: calc(100vh - 3.5rem);
+      width: 100vw;
+      left: -100vw;
+      top: 3.5rem;
+      transition: left 150ms;
+      background: var(--color-bg);
+      overflow-y: auto;
+      z-index: 10;
+
+      // Larger screens that still need a collapsed menu
+      @media screen and (min-width: 900px) {
+        width: 300px;
+        left: -300px;
+      }
 
       & > * {
-        padding: 0 1.5rem;
+        padding: 0 0.75rem;
       }
 
       .links {
@@ -285,7 +343,6 @@ export default {
 
         section {
           border-left: 4px solid var(--color-grey-3);
-          margin-left: 0.5rem;
 
           a {
             align-items: center;
@@ -309,6 +366,7 @@ export default {
             svg {
               height: 1rem;
               width: 1rem;
+              flex-shrink: 0;
             }
 
             span {
@@ -350,6 +408,33 @@ export default {
         }
       }
     }
+
+    // Desktop
+    @media screen and (min-width: 1145px) {
+      border-right: 1px solid var(--color-grey-2);
+      max-width: 270px;
+
+      nav {
+        height: 100%;
+        left: 0;
+        width: 100%;
+        transition: none;
+        position: static;
+      }
+
+      .logo-wrapper {
+        padding: 0 0 0 1.5rem;
+        width: 100%;
+        .logo {
+          margin: 0;
+        }
+      }
+
+      .hamburger-button,
+      .hamburger-icon {
+        display: none;
+      }
+    }
   }
   main {
     background-color: var(--color-grey-0);
@@ -399,7 +484,18 @@ export default {
     }
 
     .content {
-      padding: 1rem 3rem 1rem 2rem;
+      // Default is for small phone sizes (like iPhone 5/SE)
+      padding: 0.5rem 0.35rem 0.5rem 0.35rem;
+
+      // Larger phones
+      @media screen and (min-width: 500px) {
+        padding: 1rem 0.5rem 1rem 0.5rem;
+      }
+
+      // Desktop
+      @media screen and (min-width: 1145px) {
+        padding: 1rem;
+      }
     }
   }
 }
@@ -413,4 +509,12 @@ export default {
     text-decoration: var(--color-grey-2) underline;
   }
 }
+
+// Hack for very small (iPhone 5/SE) sized phones
+// an x overflow existed and I was unable to figure out why
+@media screen and (max-width: 360px) {
+  body {
+    overflow-x: hidden !important;
+  }
+}
 </style>