Rework user dropdown, redo mobile navigation, improve 'home' page (#342)

* Merge

* Mobile Navigation + home page fixes

* Remove debug line

* Fix "More" menu text

assets/images/sidebar/home.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="currentColor"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="currentColor"/>
+</svg>

assets/styles/components.scss

@@ -509,7 +509,7 @@ label {
   -webkit-tap-highlight-color: transparent;
   cursor: pointer;
   &:focus {
-    outline: 0;
+    //outline: 0; Bad for accessibility
   }
 }
 

assets/styles/global.scss

@@ -188,6 +188,7 @@ body {
   --size-rounded-tooltip: 0.25rem;
 
   --size-navbar-height: 3.5rem;
+  --size-mobile-navbar-height: 4rem;
 
   --spacing-card-lg: 1.5rem;
   --spacing-card-bg: 1rem;
@@ -258,7 +259,7 @@ textarea {
   &:hover:not([disabled]) {
     background: var(--color-button-bg-hover);
     color: var(--color-text);
-    outline: none;
+    //outline: none; Bad for accessibility
 
     &::placeholder {
       color: var(--color-text);
@@ -296,7 +297,7 @@ textarea {
 
 button {
   padding: 0.5rem 0;
-  outline: none;
+  //outline: none; Bad for accessibility
   color: var(--color-button-text);
   background-color: var(--color-button-bg);
   border: none;

layouts/default.vue

@@ -4,16 +4,10 @@
       <section class="navbar columns">
         <section class="logo column">
           <NuxtLink to="/">
-            <ModrinthLogoSmall aria-label="modrinth" class="small-logo" />
             <ModrinthLogo aria-label="modrinth" class="text-logo" />
           </NuxtLink>
         </section>
-        <section class="menu-icon">
+        <section class="nav-group columns">
-          <button @click="toggleNavBar">
-            <HamburgerIcon />
-          </button>
-        </section>
-        <section ref="nav" class="right-group columns">
           <section class="nav">
             <div class="styled-tabs">
               <NuxtLink to="/mods" class="tab">
@@ -47,52 +41,42 @@
                   {{ $user.notifications.length }}
                 </div>
               </nuxt-link>
-              <button
+              <div v-if="$auth.user" ref="mobileMenu" class="dropdown">
-                v-if="!$auth.user"
+                <button class="control">
-                class="theme-mobile-button iconified-button"
+                  <img :src="$auth.user.avatar_url" class="user-icon" />
-                @click="changeTheme"
+                  <span class="caret"></span>
-              >
-                <MoonIcon v-if="$colorMode.value === 'light'" />
-                <SunIcon v-else />
-                Change theme
                 </button>
-              <div
+                <ul class="content card" @click="removeFocus">
-                v-if="$auth.user"
+                  <li>
-                v-click-outside="hideDropdown"
+                    <NuxtLink
-                class="dropdown"
+                      class="item"
-                :class="{ open: isDropdownOpen }"
+                      :to="`/user/${$auth.user.username}`"
+                      @click="removeFocus"
                     >
-                <button class="control" @click="toggleDropdown">
+                      <div class="title profile-link">
-                  <div class="avatar">
+                        <div class="username">@{{ $auth.user.username }}</div>
-                    <img :src="$auth.user.avatar_url" class="icon" />
+                        <div class="prompt">Go to my profile</div>
-                    <span>{{ $auth.user.username }}</span>
                       </div>
-                  <DropdownIcon class="dropdown-icon" />
+                    </NuxtLink>
-                </button>
+                  </li>
-                <div class="content">
+                  <hr class="divider" />
-                  <ul @click="hideDropdown">
                   <li>
-                      <NuxtLink :to="`/user/${$auth.user.username}`">
+                    <NuxtLink class="item" to="/create/project">
-                        <UserIcon />
+                      <PlusIcon class="icon" />
-                        <span>Profile</span>
+                      <span class="title">Create a project</span>
+                    </NuxtLink>
+                  </li>
+                  <hr class="divider" />
+                  <li>
+                    <NuxtLink class="item" to="/notifications">
+                      <NotificationIcon class="icon" />
+                      <span class="title">Notifications</span>
                     </NuxtLink>
                   </li>
                   <li>
-                      <NuxtLink to="/settings">
+                    <NuxtLink class="item" to="/settings">
-                        <SettingsIcon />
+                      <SettingsIcon class="icon" />
-                        <span>Settings</span>
+                      <span class="title">Settings</span>
-                      </NuxtLink>
-                    </li>
-                    <li class="hide-desktop">
-                      <NuxtLink to="/notifications">
-                        <NotificationIcon />
-                        <span>Notifications</span>
-                      </NuxtLink>
-                    </li>
-                    <li class="hide-desktop">
-                      <NuxtLink to="/create/project">
-                        <PlusIcon />
-                        <span>Create project</span>
                     </NuxtLink>
                   </li>
                   <li>
@@ -101,39 +85,111 @@
                         $auth.user.role === 'moderator' ||
                         $auth.user.role === 'admin'
                       "
+                      class="item"
                       to="/moderation"
                     >
-                        <ModerationIcon />
+                      <ModerationIcon class="icon" />
-                        <span>Moderation</span>
+                      <span class="title">Moderation</span>
                     </NuxtLink>
                   </li>
-                    <hr />
-                    <li class="hide-desktop">
-                      <button @click="changeTheme">
-                        <MoonIcon v-if="$colorMode.value === 'light'" />
-                        <SunIcon v-else />
-                        <span>Change theme</span>
-                      </button>
-                    </li>
                   <li>
-                      <button @click="logout">
+                    <button class="item" @click="changeTheme">
-                        <LogOutIcon />
+                      <MoonIcon
-                        <span>Log out</span>
+                        v-if="$colorMode.value === 'light'"
+                        class="icon"
+                      />
+                      <SunIcon v-else class="icon" />
+                      <span class="dropdown-item__text">Change theme</span>
+                    </button>
+                  </li>
+                  <hr class="divider" />
+                  <li>
+                    <button class="item" @click="logout">
+                      <LogOutIcon class="icon" />
+                      <span class="dropdown-item__text">Log out</span>
                     </button>
                   </li>
-                    <hr class="hide-desktop" />
                 </ul>
               </div>
-              </div>
               <section v-else class="auth-prompt">
-                <a :href="authUrl" class="log-in-button"
+                <a :href="authUrl" class="log-in-button">
-                  ><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
+                  <GitHubIcon aria-hidden="true" />
+                  Sign in with GitHub</a
                 >
               </section>
             </section>
           </section>
         </section>
       </section>
+      <section class="mobile-navbar">
+        <NuxtLink to="/" class="tab">
+          <HomeIcon />
+          <span>Home</span>
+        </NuxtLink>
+        <NuxtLink to="/mods" class="tab">
+          <ModIcon />
+          <span>Mods</span>
+        </NuxtLink>
+        <NuxtLink to="/modpacks" class="tab">
+          <ModpackIcon />
+          <span>Modpacks</span>
+        </NuxtLink>
+        <button class="tab" @click="toggleMobileMenu()">
+          <HamburgerIcon />
+          <span>{{ isMobileMenuOpen ? 'Less' : 'More' }}</span>
+        </button>
+      </section>
+      <section ref="mobileMenu" class="mobile-menu">
+        <div class="items-container rows">
+          <NuxtLink
+            v-if="$auth.user"
+            class="item user-item"
+            :to="`/user/${$auth.user.username}`"
+          >
+            <img :src="$auth.user.avatar_url" class="user-icon" />
+            <div class="profile-link">
+              <div class="username">@{{ $auth.user.username }}</div>
+              <div class="prompt">Go to my profile</div>
+            </div>
+          </NuxtLink>
+          <button v-if="$auth.user" class="item log-out" @click="logout">
+            <LogOutIcon class="icon" />
+            <span class="dropdown-item__text">Log out</span>
+          </button>
+          <NuxtLink v-if="$auth.user" class="item" to="/create/project">
+            <PlusIcon class="icon" />
+            <span class="title">Create a project</span>
+          </NuxtLink>
+          <NuxtLink v-if="$auth.user" class="item" to="/settings">
+            <SettingsIcon class="icon" />
+            <span class="title">Settings</span>
+          </NuxtLink>
+          <NuxtLink
+            v-if="
+              $auth.user &&
+              ($auth.user.role === 'moderator' || $auth.user.role === 'admin')
+            "
+            class="item"
+            to="/moderation"
+          >
+            <ModerationIcon class="icon" />
+            <span class="title">Moderation</span>
+          </NuxtLink>
+          <NuxtLink v-if="$auth.user" class="item" to="/notifications">
+            <NotificationIcon class="icon" />
+            <span class="title">Notifications</span>
+          </NuxtLink>
+          <button class="item" @click="changeTheme">
+            <MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
+            <SunIcon v-else class="icon" />
+            <span class="dropdown-item__text">Change theme</span>
+          </button>
+          <a v-if="!$auth.user" :href="authUrl" class="item log-in">
+            <GitHubIcon aria-hidden="true" />
+            Sign in with GitHub</a
+          >
+        </div>
+      </section>
     </header>
     <main>
       <CookieConsent />
@@ -165,7 +221,7 @@
         <h4>Legal</h4>
         <nuxt-link to="/legal/terms">Terms</nuxt-link>
         <nuxt-link to="/legal/privacy">Privacy</nuxt-link>
-        <nuxt-link to="/legal/rules">Content</nuxt-link>
+        <nuxt-link to="/legal/rules">Rules</nuxt-link>
         <a
           target="_blank"
           href="https://github.com/modrinth/knossos/blob/master/LICENSE.md"
@@ -201,7 +257,6 @@
 import ClickOutside from 'vue-click-outside'
 
 import ModrinthLogo from '~/assets/images/text-logo.svg?inline'
-import ModrinthLogoSmall from '~/assets/images/logo.svg?inline'
 
 import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
 
@@ -209,29 +264,36 @@ import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import ShieldIcon from '~/assets/images/utils/shield.svg?inline'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
+import HomeIcon from '~/assets/images/sidebar/home.svg?inline'
+import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
+import ModpackIcon from '~/assets/images/sidebar/modpack.svg?inline'
 
-import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
+// import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 import MoonIcon from '~/assets/images/utils/moon.svg?inline'
 import SunIcon from '~/assets/images/utils/sun.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 
-import UserIcon from '~/assets/images/utils/user.svg?inline'
+// import UserIcon from '~/assets/images/utils/user.svg?inline'
 import LogOutIcon from '~/assets/images/utils/log-out.svg?inline'
 import GitHubIcon from '~/assets/images/utils/github.svg?inline'
 
 import CookieConsent from '~/components/ads/CookieConsent'
 
+const overflowStyle = 'overlay'
+
 export default {
   components: {
     ModrinthLogo,
-    ModrinthLogoSmall,
+    // DropdownIcon,
-    DropdownIcon,
     MoonIcon,
     SunIcon,
-    UserIcon,
+    // UserIcon,
     LogOutIcon,
     GitHubIcon,
     NotificationIcon,
+    HomeIcon,
+    ModIcon,
+    ModpackIcon,
     HamburgerIcon,
     CookieConsent,
     SettingsIcon,
@@ -246,6 +308,7 @@ export default {
     return {
       isDropdownOpen: false,
       version: process.env.version || 'unknown',
+      isMobileMenuOpen: false,
     }
   },
   async fetch() {
@@ -261,10 +324,12 @@ export default {
   },
   watch: {
     $route() {
-      this.$refs.nav.className = 'right-group'
+      this.$refs.mobileMenu.className = 'mobile-menu'
+      this.isMobileMenuOpen =
+        this.$refs.mobileMenu.className === 'mobile-menu active'
 
-      document.documentElement.style.overflow = 'auto'
+      document.documentElement.style.overflow = overflowStyle
-      document.body.style.overflow = 'auto'
+      document.body.style.overflow = overflowStyle
 
       this.$store.dispatch('user/fetchAll')
     },
@@ -275,24 +340,23 @@ export default {
     }
   },
   methods: {
-    toggleNavBar() {
+    toggleMobileMenu() {
       window.scrollTo(0, 0)
-      const currentlyActive = this.$refs.nav.className === 'right-group active'
+      const currentlyActive =
-      this.$refs.nav.className = `right-group${
+        this.$refs.mobileMenu.className === 'mobile-menu active'
+      this.$refs.mobileMenu.className = `mobile-menu${
         currentlyActive ? '' : ' active'
       }`
       document.body.scrollTop = 0
 
       document.documentElement.style.overflow =
-        document.documentElement.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+        document.documentElement.style.overflow !== 'hidden'
+          ? 'hidden'
+          : overflowStyle
       document.body.style.overflow =
-        document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+        document.body.style.overflow !== 'hidden' ? 'hidden' : overflowStyle
-    },
+
-    toggleDropdown() {
+      this.isMobileMenuOpen = !currentlyActive
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    hideDropdown() {
-      this.isDropdownOpen = false
     },
     async logout() {
       this.$cookies.set('auth-token-reset', true)
@@ -314,11 +378,20 @@ export default {
       this.$colorMode.preference =
         this.$colorMode.value === 'dark' ? 'light' : 'dark'
     },
+    removeFocus() {
+      document.activeElement.blur() // This doesn't work, sadly. Help
+    },
   },
 }
 </script>
 
 <style lang="scss">
+html {
+  overflow: auto;
+  //noinspection CssInvalidPropertyValue
+  overflow: overlay;
+}
+
 .layout {
   min-height: 100vh;
   background-color: var(--color-bg);
@@ -328,6 +401,10 @@ export default {
     min-height: calc(100vh - var(--spacing-card-bg));
   }
 
+  @media screen and (max-width: 750px) {
+    margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
+  }
+
   .site-header {
     margin-top: var(--spacing-card-md);
     margin-bottom: var(--spacing-card-md);
@@ -341,36 +418,35 @@ export default {
     }
 
     .navbar {
-      margin: 0 0.5rem;
-      padding: 0 var(--spacing-card-lg);
-      @media screen and (min-width: 450px) {
       margin: 0 var(--spacing-card-lg);
+      padding: 0 var(--spacing-card-lg);
+      max-width: 1280px;
+      margin-left: auto;
+      margin-right: auto;
+
+      @media screen and (max-width: 750px) {
+        justify-content: center;
       }
+
       section.logo {
-        align-items: center;
         display: flex;
         justify-content: space-between;
         color: var(--color-text-dark);
+
         a {
           align-items: center;
           display: flex;
         }
+
         .small-logo {
           display: block;
         }
+
         svg {
-          display: none;
           height: 1.75rem;
           width: auto;
         }
-        @media screen and (min-width: 350px) {
+
-          .small-logo {
-            display: none;
-          }
-          svg {
-            display: unset;
-          }
-        }
         .badge {
           margin-left: 0.25rem;
           display: none;
@@ -378,11 +454,13 @@ export default {
             display: unset;
           }
         }
+
         button {
           background: none;
           border: none;
           margin: 0 0 0 0.5rem;
           padding: 0;
+
           svg {
             height: 1.5rem;
             width: 1.5rem;
@@ -390,43 +468,30 @@ export default {
         }
       }
 
-      section.menu-icon {
+      section.nav-group {
-        display: flex;
-        margin-left: auto;
-        align-items: center;
-        margin-right: 1rem;
-      }
-
-      section.right-group {
         display: flex;
         flex-grow: 5;
-        flex-direction: column-reverse;
-
-        overflow-y: auto;
-        position: fixed;
-        width: 100vw;
-        top: var(--size-navbar-height);
-        height: calc(100vh - var(--size-navbar-height));
-        right: -100vw;
-        background-color: var(--color-raised-bg);
-        transition: right 150ms;
-        z-index: 100;
-
-        &.active {
-          right: 0;
-        }
 
         section.nav {
           flex-grow: 5;
 
           .styled-tabs {
             display: flex;
-            flex-direction: column;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-top: 3px;
+            margin-left: 2rem;
 
             a {
-              margin-left: auto;
+              margin-left: 0;
               margin-right: auto;
             }
+
+            a.tab {
+              padding: 0;
+              margin-right: 1rem;
+            }
           }
         }
 
@@ -437,22 +502,30 @@ export default {
         section.user-controls {
           align-items: center;
           display: flex;
-          flex-direction: column-reverse;
+          flex-direction: row;
           justify-content: space-between;
           position: relative;
           top: 50%;
           transform: translateY(-50%);
           min-width: 12rem;
 
-          margin: 0.5rem auto;
-
           .control-button {
+            display: flex;
             max-width: 2rem;
             padding: 0.5rem;
             background-color: var(--color-raised-bg);
             border-radius: var(--size-rounded-max);
             margin: 0 0.5rem 0 0;
-            display: none;
+            box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
+
+            &:hover,
+            &:active {
+              background-color: var(--color-button-bg-hover);
+
+              svg {
+                color: var(--color-button-text-hover);
+              }
+            }
 
             svg {
               height: 1rem;
@@ -476,120 +549,108 @@ export default {
             }
           }
 
-          .theme-mobile-button {
+          .hide-desktop {
-            margin-bottom: 1rem;
+            display: none;
           }
 
           .dropdown {
             position: relative;
-            display: inline-block;
-            flex-grow: 1;
 
-            &.open {
             .control {
-                //background: var(--color-button-bg);
-                //border-radius: 1.25rem 1.25rem 0 0;
-                //.dropdown-icon {
-                //  transform: rotate(180deg);
-                //}
-              }
-              .content {
-                //display: unset;
-              }
-            }
-            .control {
-              background-color: var(--color-raised-bg);
-              border-radius: var(--size-rounded-max);
               align-items: center;
+              background: none;
               display: flex;
-              padding: 0.25rem;
+              justify-content: center;
-              position: relative;
-              z-index: 11;
-              width: 100%;
-
-              .avatar {
-                align-items: center;
-                display: flex;
-                flex-grow: 1;
-
-                img {
-                  height: 1.5rem;
-                  width: 1.5rem;
-                  border-radius: 50%;
-                  margin-left: auto;
-                }
-
-                span {
-                  display: block;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                  color: var(--color-text-dark);
-                  font-size: var(--font-size-nm);
-                  font-weight: var(--font-weight-medium);
-                  margin: 0 auto 0 0.25rem;
-                }
-              }
-              .dropdown-icon {
-                display: none;
-                transition: 150ms ease transform;
-                margin-right: 0.25rem;
-              }
-            }
-            .content {
-              margin: 0 0 0 0;
-            }
-            button {
-              background-color: transparent;
-              margin: 0;
               padding: 0;
-              font-weight: var(--font-weight-medium);
+
+              .user-icon {
+                border-radius: 100%;
+                height: 2rem;
+                outline: 2px solid var(--color-raised-bg);
+                width: 2rem;
               }
-            ul {
+
-              display: flex;
+              .caret::after {
-              flex-direction: column;
+                content: '\23F7';
-              margin: 0;
+                color: inherit;
+                margin-left: 0.25rem;
+              }
+            }
+
+            .content {
+              border: 1px solid var(--color-divider-dark);
               list-style: none;
-              padding: 0.5rem 0;
+              margin: 0.5rem 0 0 0;
+              max-width: 25rem;
+              min-width: 12rem;
+              opacity: 0;
+              padding: 1rem;
+              position: absolute;
+              right: -1rem;
+              transform: scaleY(0.9);
+              transform-origin: top;
+              transition: all 0.1s ease-in-out 0.05s, color 0s ease-in-out 0s,
+                background-color 0s ease-in-out 0s,
+                border-color 0s ease-in-out 0s;
+              visibility: hidden;
+              width: max-content;
               z-index: 1;
-              hr {
+
+              .divider {
                 background-color: var(--color-divider-dark);
                 border: none;
                 color: var(--color-divider-dark);
-                height: 2px;
+                height: 1px;
                 margin: 0.5rem 0;
               }
-              li {
+
-                margin: 0;
+              .item {
-                &:hover,
-                &:focus {
-                  background-color: var(--color-button-bg-hover);
-                  color: var(--color-text-dark);
-                }
-                &:active {
-                  background-color: var(--color-button-bg-active);
-                }
-                a,
-                button {
                 align-items: center;
-                  display: flex;
+                background: none;
-                  padding: 0.75rem 1.5rem;
+                border-radius: 0.5rem;
-                  svg {
+                box-sizing: border-box;
                 color: inherit;
-                    height: 1rem;
+                display: flex;
-                    width: 1rem;
+                padding: 0.5rem;
-                    margin-left: auto;
-                  }
-                  span {
-                    margin-left: 0.5rem;
-                    margin-right: auto;
-                  }
-                }
-                button {
                 width: 100%;
+
+                .icon {
+                  margin-right: 0.5rem;
+                  height: 20px;
+                  width: 20px;
+                }
+              }
+
+              .item:hover,
+              .item:focus {
+                background-color: var(--color-bg);
+              }
+
+              .profile-link {
+                .prompt {
+                  margin-top: 0.25rem;
+                  color: var(--color-text-secondary);
                 }
               }
             }
+
+            @media screen and (max-width: 1300px) {
+              .content {
+                margin-right: 1rem;
+              }
+            }
+          }
+
+          .dropdown:hover .user-icon,
+          .dropdown:focus .user-icon,
+          .dropdown:focus-within .user-icon {
+            outline-color: var(--color-raised-bg-hover);
+          }
+
+          .dropdown:hover .content {
+            opacity: 1;
+            transform: scaleY(1);
+            visibility: visible;
           }
         }
 
@@ -597,7 +658,7 @@ export default {
           display: flex;
           align-items: center;
           height: 100%;
-          margin: 1rem 0 0.5rem;
+          margin: 0;
 
           .log-in-button {
             margin: 0 auto;
@@ -609,13 +670,15 @@ export default {
             border-radius: var(--size-rounded-max);
             background-color: var(--color-brand);
             white-space: nowrap;
-            outline: none;
+            //outline: none; Bad for accessibility
             color: var(--color-brand-inverted);
             padding: 0.5rem 0.75rem;
+
             svg {
               vertical-align: middle;
               margin-right: 0.5rem;
             }
+
             &:hover,
             &:focus {
               background-color: var(--color-brand-hover);
@@ -623,128 +686,153 @@ export default {
           }
         }
       }
-      @media screen and (min-width: 1024px) {
-        max-width: 1280px;
-        margin-left: auto;
-        margin-right: auto;
 
-        section.menu-icon {
+      @media screen and (max-width: 750px) {
+        section.nav-group {
           display: none;
-        }
-
-        section.mobile-header-mode-switch {
-          display: none;
-        }
-
-        section.right-group {
-          flex-direction: unset;
-          overflow-y: unset;
-          position: unset;
-          width: unset;
-          top: unset;
-          height: unset;
-          right: unset;
-          background-color: unset;
-          transition: unset;
-          z-index: unset;
-
-          section.nav {
-            .styled-tabs {
-              flex-direction: unset;
-              position: relative;
-              top: 50%;
-              transform: translateY(-50%);
-              margin-top: 3px;
-              margin-left: 2rem;
-
-              a {
-                margin-left: 0;
-              }
-
-              a.tab {
-                padding: 0;
-                margin-right: 1rem;
-              }
-            }
-          }
-
-          section.user-controls {
-            display: flex;
-            flex-direction: row;
-            width: unset;
-            margin: unset;
-
-            .control-button {
-              display: flex;
-            }
-
-            .theme-mobile-button {
-              display: none;
-            }
 
           .hide-desktop {
-              display: none;
-            }
-
-            .dropdown {
-              &:hover .control {
-                background: var(--color-button-bg-hover);
-              }
-              &.open {
-                .control {
-                  background: var(--color-button-bg);
-                  border-radius: 1.25rem 1.25rem 0 0;
-                  .dropdown-icon {
-                    transform: rotate(180deg);
-                  }
-                }
-                .content {
             display: unset;
           }
         }
-              ul {
+      }
-                background-color: var(--color-button-bg);
+    }
-                border-radius: 0 0 var(--size-rounded-control)
-                  var(--size-rounded-control);
-                box-shadow: var(--shadow-dropdown);
 
-                li {
+    .mobile-navbar {
-                  a,
-                  button {
-                    svg {
-                      margin-left: 0;
-                    }
-                    span {
-                      margin-right: 0;
-                    }
-                  }
-                }
-              }
-              .content {
-                width: calc(100% - 7.5rem);
-                position: fixed;
       display: none;
+      width: 100%;
+      height: var(--size-mobile-navbar-height);
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--color-raised-bg);
+      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+      z-index: 5;
+
+      .tab {
+        background: none;
+        display: flex;
+        flex-grow: 1;
+        flex-basis: 0;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-weight: bold;
+        padding: 0;
+        margin: auto;
+        transition: color ease-in-out 0.15s;
+        color: var(--color-text-inactive);
+
+        svg {
+          height: 1.75rem;
+          width: 1.75rem;
+          margin-bottom: 0.25rem;
         }
-              .control {
+
-                .avatar {
+        &:hover,
-                  img {
+        &:focus {
-                    margin-left: 0;
+          color: var(--color-text);
         }
-                  span {
+
-                    margin-right: 1.5rem;
+        &.nuxt-link-exact-active {
+          svg {
+            color: var(--color-brand);
+          }
+
+          color: var(--color-text);
         }
       }
-                .dropdown-icon {
+
-                  display: block;
+      @media screen and (max-width: 750px) {
+        display: flex;
+      }
+    }
+  }
+
+  .mobile-menu {
+    display: none;
+    position: absolute;
+    top: 0;
+    background-color: var(--color-bg);
+    height: calc(100% - var(--size-mobile-navbar-height));
+    width: 100%;
+    z-index: 5;
+
+    .items-container {
+      margin-bottom: 1rem;
+      margin-right: 2rem;
+      margin-left: 2rem;
+
+      button {
+        box-sizing: unset;
+      }
+
+      .item {
+        padding: 1rem 2rem;
+        background-color: var(--color-raised-bg);
+        border-radius: var(--size-rounded-md);
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        column-gap: 0.25rem;
+        width: calc(100% - 4rem);
+        max-width: 18rem;
+
+        &.nuxt-link-exact-active {
+          color: var(--color-button-text-active);
+          svg {
+            color: var(--color-brand);
+          }
+        }
+
+        &.log-in {
+          color: var(--color-brand-inverted);
+          background-color: var(--color-brand);
+        }
+
+        &.log-out {
+          color: white;
+          background-color: var(--color-badge-red-bg);
+        }
+
+        &.user-item {
+          flex-direction: column;
+          row-gap: 0.5rem;
+          //width: 8rem;
+          max-width: 18rem;
+          flex-grow: 0;
+
+          .profile-link {
+            text-align: center;
+
+            .prompt {
+              color: var(--color-text-secondary);
+            }
+          }
+
+          .user-icon {
+            width: 4rem;
+            height: 4rem;
+            border-radius: var(--size-rounded-max);
           }
         }
       }
     }
 
-          section.auth-prompt {
+    div {
-            margin: 0;
+      flex-grow: 1;
-          }
+      justify-content: end;
+      align-items: center;
+      row-gap: 1rem;
     }
+
+    &.active {
+      display: flex;
+
+      @media screen and (min-width: 750px) {
+        display: none;
       }
     }
   }

pages/index.vue

@@ -60,18 +60,26 @@ export default {
 
   .cover {
     img {
-      border-radius: var(--size-rounded-lg);
+      border-radius: var(--size-rounded-card);
       width: 100%;
       height: calc(75vh - var(--size-navbar-height));
       object-fit: cover;
       object-position: 10% 12.5%;
+
+      @media screen and (max-width: 1280px) {
+        border-radius: 0;
+      }
+
+      @media screen and (max-width: 750px) {
+        height: calc(75vh);
+      }
     }
 
     .text {
       position: absolute;
       top: calc(10vh + var(--size-navbar-height));
-      width: 30rem;
+      max-width: 30rem;
-      //max-width: 25%;
+      text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
       padding-left: 6rem;
 
       color: #fff;
@@ -97,12 +105,23 @@ export default {
       form {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        box-sizing: border-box;
+
+        input {
+          box-sizing: content-box;
+        }
 
         .iconified-button {
-          margin-left: 0.25rem;
           padding: 1.25rem 1rem;
         }
       }
+
+      @media screen and (max-width: 750px) {
+        padding-left: 3rem;
+        max-width: 55%;
+      }
     }
   }
 }