RackPeek/RackPeek.Web/Components/Layout/MainLayout.razor

@inherits LayoutComponentBase

<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono">

    <!-- Header / Branding -->
    <header class="flex items-center justify-between p-4 border-b border-zinc-800 bg-zinc-900">
        <NavLink href="/" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
            <div class="text-xl font-bold text-emerald-400 tracking-wider">
                rackpeek
            </div>
        </NavLink>


        <!-- Navigation -->
        <nav class="space-x-6 text-sm">
            <NavLink href="/"
                     Match="NavLinkMatch.All"
                     class="hover:text-emerald-400"
                     activeClass="text-emerald-400 font-semibold">
                Home
            </NavLink>
            <NavLink href="/hardware/tree" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
                Hardware
            </NavLink>
            <NavLink href="/systems/list" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
                Systems
            </NavLink>
            <NavLink href="/services/list" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
                Services
            </NavLink>
        </nav>
    </header>

    <!-- Page content -->
    <main class="p-6">
        @Body
    </main>

</div>