RackPeek/Shared.Rcl/Layout/MainLayout.razor

@inherits LayoutComponentBase
<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono"
     data-testid="app-root">

    <header class="flex items-center justify-between p-4 border-b border-zinc-800 bg-zinc-900"
            data-testid="app-header">

        <NavLink href=""
                 data-testid="brand-link"
                 class="hover:text-emerald-400"
                 activeClass="text-emerald-400 font-semibold">
            <div class="text-xl font-bold text-emerald-400 tracking-wider"
                 data-testid="brand-text">
                rackpeek
            </div>
        </NavLink>

        <nav class="space-x-6 text-sm" data-testid="main-nav">

            <NavLink href=""
                     Match="NavLinkMatch.All"
                     data-testid="nav-home"
                     class="hover:text-emerald-400"
                     activeClass="text-emerald-400 font-semibold">
                Home
            </NavLink>

            <NavLink href="cli" data-testid="nav-cli">CLI</NavLink>
            <NavLink href="yaml" data-testid="nav-yaml">Yaml</NavLink>
            <NavLink href="hardware/tree" data-testid="nav-hardware">Hardware</NavLink>
            <NavLink href="systems/list" data-testid="nav-systems">Systems</NavLink>
            <NavLink href="services/list" data-testid="nav-services">Services</NavLink>
            <NavLink href="docs/CommandIndex" data-testid="nav-docs">Docs</NavLink>

        </nav>
    </header>

    <main class="p-6" data-testid="page-content">
        @Body
    </main>

</div>