fix: mobile header to lg

Author: Barbapapazes

.playground/nuxt.config.ts

@@ -9,4 +9,10 @@ export default defineNuxtConfig({
       trailingSlash: true
     },
   },
+
+  experimental: {
+    watcher: 'parcel'
+  },
+
+  devtools: true
 })

components/TheHeader.vue

@@ -31,7 +31,7 @@ const linkClass = 'py-4 px-5 flex flex-row gap-2 items-center hover:text-primary
           class="h-[40px] w-[40px] md:h-[50px] md:w-[50px] text-black hover:text-primary-base motion-safe:transition-all motion-safe:duration-300"
         />
       </NuxtLink>
-      <nav aria-labelledby="primary-nav" class="hidden md:block text-sm leading-[1.125rem]">
+      <nav aria-labelledby="primary-nav" class="hidden lg:block text-sm leading-[1.125rem]">
         <span id="primary-nav" class="sr-only">{{ srNavigationTitle }}</span>
         <ul class="flex flex-row justify-center font-medium">
           <template v-for="item in navigation" :key="item._path">
@@ -87,7 +87,7 @@ const linkClass = 'py-4 px-5 flex flex-row gap-2 items-center hover:text-primary
         </ul>
       </nav>
     </div>
-    <div class="md:hidden flex flex-row items-center">
+    <div class="lg:hidden flex flex-row items-center">
       <TheHeaderDialog :sr-navigation-title="dialog.srNavigationTitle" :sr-dialog-button-title="dialog.srDialogButtonTitle" />
     </div>
   </BaseSection>

package.json

@@ -26,20 +26,22 @@
     "ci:publish": "zx scripts/publish.mjs"
   },
   "devDependencies": {
+    "@nuxt/devtools": "^0.4.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.39.0",
     "typescript": "^4.9.5",
     "zx": "^7.2.1"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.12",
-    "@nuxt/content": "^2.5.2",
-    "@nuxtjs/fontaine": "^0.2.4",
-    "@nuxtjs/tailwindcss": "^6.6.0",
+    "@headlessui/vue": "^1.7.13",
+    "@nuxt/content": "^2.6.0",
+    "@nuxtjs/fontaine": "^0.2.5",
+    "@nuxtjs/tailwindcss": "^6.6.6",
+    "@parcel/watcher": "^2.1.0",
     "@tailwindcss/typography": "^0.5.9",
-    "nuxt": "^3.3.1",
+    "nuxt": "^3.4.2",
     "nuxt-icon": "^0.3.3",
-    "nuxt-seo-kit": "^1.3.5",
+    "nuxt-seo-kit": "^1.3.7",
     "tailwindcss-border-gradient-radius": "^3.0.1"
   },
   "packageManager": "pnpm@8.3.1"