layout redesign

frontend/src/layouts/Layout.astro

@@ -5,6 +5,8 @@ import 'highlight.js/styles/atom-one-dark.css';
 import '@fontsource-variable/inter';
 import '@fontsource-variable/jetbrains-mono';
 import ThemeSwitcher from '../components/react/ThemeSwitcher';
+import Search from '../components/react/Search';
+import LogoutButton from '../components/react/LogoutButton';
 
 interface Props {
 	title: string;
@@ -17,6 +19,7 @@ interface Props {
 const { title, wide = false, description, image, type = 'website' } = Astro.props;
 
 const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
+const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
 
 let siteConfig = {
     title: "Narlblog",
@@ -82,8 +85,22 @@ const fullTitle = `${title} | ${siteConfig.title}`;
                     </a>
                     <p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
                 </div>
-                <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
-                    <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
+                <div class="flex gap-2 md:gap-3 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
+                    <a href="/" class="text-subtext0 hover:text-text transition-colors px-2 py-1">Home</a>
+                    <Search client:load />
+                    {isAdmin && (
+                        <div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60">
+                            <a
+                                href="/admin"
+                                class="inline-flex items-center gap-1.5 text-xs uppercase tracking-wider px-2.5 py-1 rounded-full bg-mauve/15 text-mauve border border-mauve/30 hover:bg-mauve/25 transition-colors"
+                                title="Admin dashboard"
+                            >
+                                <span class="w-1.5 h-1.5 rounded-full bg-mauve animate-pulse"></span>
+                                Admin
+                            </a>
+                            <LogoutButton client:load />
+                        </div>
+                    )}
                     <ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
                 </div>
             </header>