Initial commit: PC Builder AdonisJS project

2026-06-28 10:41:51 +02:00
commit 648d0af538
144 changed files with 18570 additions and 0 deletions
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+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()
+
+const user = computed(() => {
+  const userData = (page.props as any).auth?.user || (page.props as any).user
+  return userData || { name: 'Guest', email: 'guest@example.com' }
+})
+</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>
+    </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
+          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"
+        >
+          <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>
+        </transition>
+      </div>
+    </div>
+  </header>
+</template>