Implement Fluid Emerald app redesign

resources/js/components/AppHeader.vue

@@ -5,7 +5,6 @@ import {
     LayoutGrid,
     Layers3,
     Menu,
-    Search,
     Shield,
     Users,
 } from 'lucide-vue-next';
@@ -33,16 +32,11 @@ import { index as adminUsers } from '@/routes/admin/users';
 import { index as projectTemplatesIndex } from '@/routes/project-templates';
 import { index as projectsIndex } from '@/routes/projects';
 import { index as teamsIndex } from '@/routes/teams';
-import type { BreadcrumbItem, NavItem } from '@/types';
+import type { AppHeaderProps, NavItem } from '@/types';
 
-const props = withDefaults(
-    defineProps<{
-        breadcrumbs?: BreadcrumbItem[];
-    }>(),
-    {
-        breadcrumbs: () => [],
-    },
-);
+const props = withDefaults(defineProps<AppHeaderProps>(), {
+    breadcrumbs: () => [],
+});
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
@@ -131,19 +125,6 @@ const navItemClasses = (item: NavItem): string =>
                     </SheetHeader>
 
                     <div class="flex flex-col gap-5 p-4">
-                        <div class="relative">
-                            <Search
-                                class="text-on-surface-variant pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                            />
-                            <input
-                                disabled
-                                aria-label="Search"
-                                placeholder="Coming soon"
-                                class="border-outline-variant bg-surface-container-low text-on-surface placeholder:text-on-surface-variant h-10 w-full rounded-lg border py-2 pl-9 pr-3 text-sm disabled:cursor-not-allowed disabled:opacity-100"
-                                type="text"
-                            />
-                        </div>
-
                         <nav class="flex flex-col gap-1" aria-label="Main">
                             <Link
                                 v-for="item in mainNavItems"
@@ -191,19 +172,6 @@ const navItemClasses = (item: NavItem): string =>
             </nav>
 
             <div class="ml-auto flex items-center gap-3">
-                <div class="relative hidden sm:block">
-                    <Search
-                        class="text-on-surface-variant pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                    />
-                    <input
-                        disabled
-                        aria-label="Search"
-                        placeholder="Coming soon"
-                        class="border-outline-variant bg-surface-container-low text-on-surface placeholder:text-on-surface-variant h-10 w-48 rounded-lg border py-2 pl-9 pr-3 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-100 md:w-64"
-                        type="text"
-                    />
-                </div>
-
                 <DropdownMenu>
                     <DropdownMenuTrigger :as-child="true">
                         <Button