web/src/views/partials/nav.php

<?php
$currentUri = $_SERVER['REQUEST_URI'] ?? '/';
$currentPath = parse_url($currentUri, PHP_URL_PATH);

$navLinks = [
    ['href' => '/',         'label' => 'Home'],
    ['href' => '/browse',   'label' => 'Browse'],
    ['href' => '/search',   'label' => 'Search'],
    ['href' => '/timeline', 'label' => 'Timeline'],
    ['href' => '/network',  'label' => 'Network'],
    ['href' => '/dashboard', 'label' => 'Dashboard'],
];

function isNavActive(string $href, string $currentPath): bool {
    if ($href === '/') {
        return $currentPath === '/';
    }
    return str_starts_with($currentPath, $href);
}
?>

<nav class="bg-gray-900 shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-12">

            <!-- Logo / Site Name -->
            <div class="flex-shrink-0">
                <a href="/" class="flex items-center space-x-2 group">
                    <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-300 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                    </svg>
                    <span class="text-white font-medium text-sm tracking-tight hidden sm:block">Research Document Archive</span>
                    <span class="text-white font-medium text-sm tracking-tight sm:hidden">RDA</span>
                </a>
            </div>

            <!-- Desktop Navigation Links -->
            <div class="hidden md:flex items-center space-x-1">
                <?php foreach ($navLinks as $link): ?>
                    <?php $active = isNavActive($link['href'], $currentPath); ?>
                    <a href="<?= $link['href'] ?>"
                       class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors
                              <?= $active
                                  ? 'bg-gray-800 text-white'
                                  : 'text-gray-300 hover:bg-gray-800 hover:text-white' ?>">
                        <?= $link['label'] ?>
                    </a>
                <?php endforeach; ?>
            </div>

            <!-- Mobile Hamburger Button -->
            <div class="md:hidden">
                <button type="button" id="mobile-menu-btn"
                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400
                               hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2
                               focus:ring-inset focus:ring-blue-400 transition-colors"
                        aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!-- Hamburger icon -->
                    <svg id="menu-icon-open" class="h-6 w-6 block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!-- Close icon -->
                    <svg id="menu-icon-close" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="md:hidden hidden border-t border-gray-800">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <?php foreach ($navLinks as $link): ?>
                <?php $active = isNavActive($link['href'], $currentPath); ?>
                <a href="<?= $link['href'] ?>"
                   class="block px-3 py-2 rounded-md text-base font-medium transition-colors
                          <?= $active
                              ? 'bg-gray-800 text-white'
                              : 'text-gray-300 hover:bg-gray-800 hover:text-white' ?>">
                    <?= $link['label'] ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</nav>

<script>
(function() {
    const btn = document.getElementById('mobile-menu-btn');
    const menu = document.getElementById('mobile-menu');
    const iconOpen = document.getElementById('menu-icon-open');
    const iconClose = document.getElementById('menu-icon-close');

    btn.addEventListener('click', function() {
        const expanded = btn.getAttribute('aria-expanded') === 'true';
        btn.setAttribute('aria-expanded', !expanded);
        menu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconOpen.classList.toggle('block');
        iconClose.classList.toggle('hidden');
        iconClose.classList.toggle('block');
    });
})();
</script>