From aaf125cfcad5c4f79e367d042f7c5c33979da4d3 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 21 Aug 2024 14:08:56 -0700
Subject: [PATCH] Temporary nav revert

---
 apps/frontend/src/layouts/default.vue | 141 +++++++++++++++-----------
 1 file changed, 83 insertions(+), 58 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 7857e8fda..7cbd765ef 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -64,81 +64,101 @@
       <div
         class="col-span-2 row-start-2 flex flex-wrap justify-center gap-1 sm:col-span-1 sm:row-start-auto"
       >
-        <ButtonStyled type="transparent">
-          <OverflowMenu
-            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-            :options="[
-              {
-                id: 'mods',
-                link: '/mods',
-              },
-              {
-                id: 'resourcepacks',
-                link: '/resourcepacks',
-              },
-              {
-                id: 'datapacks',
-                link: '/datapacks',
-              },
-              {
-                id: 'plugins',
-                link: '/plugins',
-              },
-              {
-                id: 'shaders',
-                link: '/shaders',
-              },
-              {
-                id: 'modpacks',
-                link: '/modpacks',
-              },
-            ]"
-          >
-            <CompassIcon aria-hidden="true" /> Browse
-            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-            <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
-            <template #resourcepacks>
-              <PaintBrushIcon aria-hidden="true" /> Resource Packs
-            </template>
-            <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
-            <template #plugins> <ServerIcon aria-hidden="true" /> Plugins </template>
-            <template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
-            <template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
-          </OverflowMenu>
-        </ButtonStyled>
-        <div class="contents lg:hidden">
+        <div class="hidden xl:contents">
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/mods" class="temp-nav-buttons"> Mods </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/resourcepacks" class="temp-nav-buttons"> Resource Packs </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/datapacks" class="temp-nav-buttons"> Data Packs </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/modpacks" class="temp-nav-buttons"> Modpacks </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/shaders" class="temp-nav-buttons"> Shaders </nuxt-link>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <nuxt-link to="/plugins" class="temp-nav-buttons"> Plugins </nuxt-link>
+          </ButtonStyled>
+        </div>
+        <div class="contents xl:hidden">
           <ButtonStyled type="transparent">
             <OverflowMenu
-              v-if="auth.user"
               class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
               :options="[
                 {
-                  id: 'servers',
-                  link: 'https://bisecthosting.com/modrinth',
-                  shown: false,
+                  id: 'mods',
+                  link: '/mods',
                 },
                 {
-                  id: 'app',
-                  link: '/app',
+                  id: 'resourcepacks',
+                  link: '/resourcepacks',
                 },
                 {
-                  id: 'plus',
-                  color: 'purple',
-                  link: '/plus',
+                  id: 'datapacks',
+                  link: '/datapacks',
+                },
+                {
+                  id: 'plugins',
+                  link: '/plugins',
+                },
+                {
+                  id: 'shaders',
+                  link: '/shaders',
+                },
+                {
+                  id: 'modpacks',
+                  link: '/modpacks',
                 },
               ]"
             >
-              <HamburgerIcon aria-hidden="true" /> More
+              <CompassIcon aria-hidden="true" /> Browse
               <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-              <template #servers> <ServerIcon aria-hidden="true" /> Host a server </template>
-              <template #app> <DownloadIcon aria-hidden="true" /> Get Modrinth App </template>
-              <template #plus>
-                <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+              <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
+              <template #resourcepacks>
+                <PaintBrushIcon aria-hidden="true" /> Resource Packs
               </template>
+              <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
+              <template #plugins> <ServerIcon aria-hidden="true" /> Plugins </template>
+              <template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
+              <template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
             </OverflowMenu>
           </ButtonStyled>
         </div>
-        <div class="hidden lg:contents">
+        <ButtonStyled type="transparent">
+          <OverflowMenu
+            v-if="auth.user"
+            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+            :options="[
+              {
+                id: 'servers',
+                link: 'https://bisecthosting.com/modrinth',
+                shown: false,
+              },
+              {
+                id: 'app',
+                link: '/app',
+              },
+              {
+                id: 'plus',
+                color: 'purple',
+                link: '/plus',
+              },
+            ]"
+          >
+            <HamburgerIcon aria-hidden="true" /> More
+            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+            <template #servers> <ServerIcon aria-hidden="true" /> Host a server </template>
+            <template #app> <DownloadIcon aria-hidden="true" /> Get Modrinth App </template>
+            <template #plus>
+              <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+        <div v-if="false" class="hidden lg:contents">
           <ButtonStyled v-if="false" type="transparent">
             <a href="https://bisecthosting.com/modrinth">
               <ServerIcon aria-hidden="true" /> Host a server
@@ -1297,5 +1317,10 @@ function hideStagingBanner() {
     padding-top: 0.75rem;
   }
 }
+
+.temp-nav-buttons.router-link-exact-active {
+  color: var(--color-contrast) !important;
+  background-color: var(--color-brand-highlight) !important;
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>