design wip

resources/views/layouts/app.blade.php

@@ -8,24 +8,43 @@
     <title>@yield('title')</title>
     @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'])
     @filamentStyles
+    <script>
+        const loadDarkMode = () => {
+            window.theme = localStorage.getItem('theme') ?? 'system'
+            if (
+                window.theme === 'dark' ||
+                (window.theme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)')
+                    .matches)
+            ) {
+                document.documentElement.classList.add('dark')
+            }
+        }
+
+        loadDarkMode()
+
+        document.addEventListener('livewire:navigated', loadDarkMode)
+    </script>
 </head>
 
 <body class="fi-body fi-panel-admin bg-cover" style="background-image: url('images/backgrounds/bg1.jpg')">
+    <div>
+        @livewire('notifications')
+    </div>
+
     <div class="fi-simple-layout">
-        <div class="fi-simple-main-ctn">
-            <main class="fi-simple-main fi-width-2xl shadow-2xl border bg-white/90">
-                <div class="bg-cover bg-position-[center_top_3.8rem]">
+        <main class="fi-simple-main fi-width-5xl shadow-2xl bg-white/80 dark:bg-gray-900/90">
+            <div class="bg-cover bg-position-[center_top_3.8rem]">
 
-                    @include('layouts.logo')
+                @include('layouts.nav')
 
-                    @include('layouts.nav')
+                @yield('content')
 
-                    @yield('content')
+            </div>
+        </main>
+
+        @include('layouts.footer');
 
-                </div>
-            </main>
-            @include('layouts.footer');
-        </div>
     </div>
     @filamentScripts
 </body>

resources/views/layouts/nav-simple.blade.php

@@ -0,0 +1,12 @@
+<nav>
+    <div class="flex text-xs justify-center bg-gray-900 dark:bg-300-900 rounded mb-10">
+        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/">Home</a>
+        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/nutzwerte">Über
+            Nutzwerte</a>
+        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
+            href="/dieses-programm">Über dieses
+            Programm</a>
+        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
+            href="/impressum">Impressum</a>
+    </div>
+</nav>

resources/views/layouts/nav.blade.php

@@ -1,12 +1,38 @@
-<nav>
-    <div class="flex text-xs justify-between bg-gray-900 dark:bg-300-900 rounded">
-        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/">Home</a>
-        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded" href="/nutzwerte">Über
-            Nutzwerte</a>
-        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
-            href="/dieses-programm">Über dieses
-            Programm</a>
-        <a class="px-5 py-1.5 text-gray-200 hover:bg-primary-500 dark:hover:text-gray-300 rounded"
-            href="/impressum">Impressum</a>
+<nav class="fi-topbar mb-10">
+    <div class="fi-topbar-start">
+
+        <a href="http://nutzwerte_fi4.test/app">
+        </a>
+        <div style="height: 2.6rem;" class="fi-logo"><a href="http://nutzwerte_fi4.test/app">
+            </a><a class="flex gap-1 justify-center" href="/">
+                <div class="w-9 pt-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m12.99 6.74 1.93 3.44"></path>
+                        <path d="M19.136 12a10 10 0 0 1-14.271 0"></path>
+                        <path d="m21 21-2.16-3.84"></path>
+                        <path d="m3 21 8.02-14.26"></path>
+                        <circle cx="12" cy="5" r="2"></circle>
+                    </svg>
+                </div>
+                <div class="text-2xl leading-none font-black tracking-tighter text-shadow-md dark:text-shadow-none">
+                    nutzwerte.at
+                    <div class="text-xs font-light">Software für Architekten</div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+
+    <div x-persist="topbar.end.panel-admin" class="fi-topbar-end">
+        <x-filament::button href="/nutzwerte" tag="a" color="gray">
+            Über Nutzwerte
+        </x-filament::button>
+        <x-filament::button href="/dieses-programm" tag="a" color="gray">
+            Dieses Programm
+        </x-filament::button>
+        <x-filament::button href="/impressum" tag="a" color="gray">
+            Impressum
+        </x-filament::button>
     </div>
 </nav>