Optimized navbar and sidebar for better performance and usability

components/Navbar.vue

@@ -1,8 +1,8 @@
 <template>
   <header class="w-full py-4 border-b border-ink-200 bg-ink-400">
     <nav class="flex items-center justify-center flex-wrap">
-      <NuxtLink to="/" class="flex items-center text-gray-700 font-bold">
-        <img src="~/assets/gfi-logo-white.svg" alt="Good First Issue" class="h-12" />
+      <NuxtLink to="/" class="flex items-center text-gray-700 font-bold" aria-label="Go to homepage">
+        <img src="~/assets/gfi-logo-white.svg" alt="Good First Issue Logo" class="h-12" />
       </NuxtLink>
       <span v-if="activeTag" class="text-2xl cursor-pointer">
         <span class="font-normal ml-2 mr-1 text-slate">/</span>
@@ -14,10 +14,25 @@
 
 <script setup>
 import Tags from '~/data/tags.json'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
+// Use computed to get the active tag based on the route params
 const activeTag = computed(() => {
   return Tags.find(tag => tag.slug === route.params.slug)
 })
 </script>
+
+<style scoped>
+/* Adjust logo size and text size for small screens */
+@media (max-width: 768px) {
+  .h-12 {
+    height: 8rem; /* Adjust logo size */
+  }
+  .text-2xl {
+    font-size: 1.5rem; /* Adjust text size */
+  }
+}
+</style>

components/Sidebar.vue

@@ -63,17 +63,34 @@
 <script setup>
 import Tags from '~/data/tags.json'
 import { PlusCircleIcon } from '@heroicons/vue/24/outline'
-import {HeartIcon} from '@heroicons/vue/24/solid'
+import { HeartIcon } from '@heroicons/vue/24/solid'
 </script>
-<style>
+
+<style scoped>
 .section-heading {
   @apply text-sm font-bold uppercase tracking-wider mb-2 text-slate;
 }
+
 .active-pill {
   @apply text-juniper font-semibold border-juniper;
 }
 
 .active-pill > span {
   @apply text-juniper;
 }
+
+/* Adjust sidebar padding and text size for small screens */
+@media (max-width: 768px) {
+  .masthead {
+    padding-left: 4rem; /* Adjust left padding on smaller screens */
+  }
+
+  .section-heading {
+    font-size: 1rem; /* Adjust heading size */
+  }
+
+  .text-sm {
+    font-size: 0.875rem; /* Adjust paragraph text size */
+  }
+}
 </style>

nuxt.config.ts

@@ -2,12 +2,16 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxtjs/tailwindcss', 'nuxt-gtag', 'nuxt-simple-sitemap'],
+
   nitro: {
     prerender: {
       crawlLinks: true
     }
   },
+
   site: {
     url: 'https://goodfirstissue.dev'
-  }
-})
+  },
+
+  compatibilityDate: '2025-02-03'
+})

package.json

@@ -8,12 +8,14 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "sync": "bun sync.js"
+    "sync": "bun sync.js",
+    "test": "your-test-command",
+    "lint": "your-lint-command"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxtjs/tailwindcss": "latest",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.15.4",
     "nuxt-gtag": "^0.5.9",
     "nuxt-simple-sitemap": "^3.4.0",
     "prettier": "^3.1.1"
@@ -22,5 +24,11 @@
     "@heroicons/vue": "^2.0.18",
     "@vercel/blob": "^0.16.1",
     "dayjs": "^1.11.10"
-  }
+  },
+  "version": "1.0.0",
+  "description": "<p align=\"center\">\r   <a href=\"https://goodfirstissue.dev\" target=\"_blank\">\r     <img src=\"public/readme-logo.svg\">\r   </a>\r </p>\r <hr>",
+  "main": "sync.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }