Artciles and Uses page

src/components/header/Header.vue

@@ -1,15 +1,17 @@
 <template>
-  <header class="w-container z-30 flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-    <Logo />
-    <NavBar />
-    <div class="flex gap-2">
-      <ClientOnly>
-        <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-          <ColorPicker />
-          <ColorModeButton />
-        </div>
-        <MobileNavBar />
-      </ClientOnly>
+  <header class="z-30 sticky top-0 left-0 w-container bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4 flex justify-between">
+      <Logo />
+      <NavBar />
+      <div class="flex gap-2">
+        <ClientOnly>
+          <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
+            <ColorPicker />
+            <ColorModeButton />
+          </div>
+          <MobileNavBar />
+        </ClientOnly>
+      </div>
     </div>
   </header>
 </template>

src/components/header/Logo.vue

@@ -3,11 +3,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="flex items-center">
     LOGO
   </div>
 </template>
-
-<style>
-
-</style>

src/components/header/MobileNavBar.vue

@@ -105,7 +105,3 @@ function isRoute(path: string) {
     </USlideover>
   </div>
 </template>
-
-<style>
-
-</style>

src/components/header/NavBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const route = useRoute()
 const items = [
   [{
     label: 'Talents',
@@ -27,7 +28,7 @@ const items = [
       <UButton to="/about" size="sm" variant="ghost" color="white">
         About
       </UButton>
-      <UButton to="/writing" size="sm" variant="ghost" color="white">
+      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
         Articles
       </UButton>
       <UButton to="/work" size="sm" variant="ghost" color="white">