first fixes

inertia/pages/layout/header.vue

@@ -3,15 +3,9 @@ import { computed, ref } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
 import { Link, usePage } from '@inertiajs/vue3'
 import { userProfileIcon } from '~/assets/icons'
-import { useAdminMode } from '~/composables/isAdminMode'
 
 const dropdownOpen = ref(false)
 const { isOpen } = useSidebar()
-const { isAdminActive } = useAdminMode()
-
-function toggleActive() {
-  isAdminActive.value = !isAdminActive.value
-}
 
 const page = usePage()
 
@@ -22,78 +16,73 @@ const user = computed(() => {
 </script>
 
 <template>
-  <header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
-    <div class="flex items-center">
-      <button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
-        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4 6H20M4 12H20M4 18H11"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </button>
+  <header
+    class="flex justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
+  >
+    <div
+      class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
+    >
+      <span class="material-symbols-outlined text-on-surface-variant">search</span>
+      <input
+        class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
+        placeholder="Search builds..."
+        type="text"
+      />
     </div>
 
-    <div class="flex items-center">
-      <div class="relative">
-        <button
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
-          @click="dropdownOpen = !dropdownOpen"
-        >
-          <img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
-        </button>
+    <div class="flex items-center gap-6">
+      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+        <span class="material-symbols-outlined">notifications</span>
+      </button>
+      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+        <span class="material-symbols-outlined">settings</span>
+      </button>
 
+      <div class="h-8 w-px bg-outline-variant mx-2"></div>
+
+      <div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
+        <div class="text-right hidden sm:block">
+          <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
+        </div>
+        <img
+          class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
+          :src="userProfileIcon"
+          alt="Avatar"
+        />
+      </div>
+
+      <transition
+        enter-active-class="transition duration-150 ease-out transform"
+        enter-from-class="scale-95 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="transition duration-150 ease-in transform"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-95 opacity-0"
+      >
         <div
           v-show="dropdownOpen"
-          class="fixed inset-0 z-10 w-full h-full"
-          @click="dropdownOpen = false"
-        />
-
-        <transition
-          enter-active-class="transition duration-150 ease-out transform"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in transform"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
+          class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
         >
-          <div
-            v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
-          >
-            <div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
-              <strong>{{ user.name }}</strong>
-            </div>
-            <hr />
-
-            <div
-              class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
-              @click="toggleActive"
-            >
-              <span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
-              <button
-                :class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
-                class="w-10 h-5 rounded-full focus:outline-none relative"
-              >
-                <span
-                  :class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
-                  class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
-                ></span>
-              </button>
-            </div>
-
-            <Link
-              href="/auth/logout"
-              class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
-            >
-              Logout
-            </Link>
+          <div class="px-4 py-3 border-b border-outline-variant">
+            <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
+            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
           </div>
-        </transition>
-      </div>
+
+          <Link
+            href="/auth/logout"
+            class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
+          >
+            <span class="material-symbols-outlined text-[20px]">logout</span>
+            Sign Out
+          </Link>
+        </div>
+      </transition>
     </div>
   </header>
+
+  <div
+    v-show="dropdownOpen"
+    class="fixed inset-0 z-30"
+    @click="dropdownOpen = false"
+  />
 </template>