irdb/ui/resources/views/partials/sidebar.twig

<aside class="hidden w-56 border-r border-slate-200 bg-white px-3 py-6 text-sm dark:border-slate-800 dark:bg-slate-950 md:block">
    <nav class="flex flex-col gap-1">
        {% set links = [
            { href: '/app/me', label: 'My identity' },
            { href: '#', label: 'Dashboard',  upcoming: 'M09' },
            { href: '#', label: 'IPs',        upcoming: 'M09' },
            { href: '#', label: 'Subnets',    upcoming: 'M10' },
            { href: '#', label: 'Allowlist',  upcoming: 'M10' },
            { href: '#', label: 'Policies',   upcoming: 'M10' },
            { href: '#', label: 'Reporters',  upcoming: 'M10' },
            { href: '#', label: 'Consumers',  upcoming: 'M10' },
            { href: '#', label: 'Tokens',     upcoming: 'M10' },
            { href: '#', label: 'Categories', upcoming: 'M10' },
            { href: '#', label: 'Audit',      upcoming: 'M12' },
            { href: '#', label: 'Settings',   upcoming: 'M12' },
        ] %}
        {% for link in links %}
            {% if link.upcoming is defined %}
                <span class="flex items-center justify-between rounded-md px-3 py-1.5 text-slate-400 dark:text-slate-600">
                    <span>{{ link.label }}</span>
                    <span class="font-mono text-[0.6rem] uppercase tracking-wider">{{ link.upcoming }}</span>
                </span>
            {% else %}
                <a href="{{ link.href }}"
                   class="rounded-md px-3 py-1.5 text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">
                    {{ link.label }}
                </a>
            {% endif %}
        {% endfor %}
    </nav>
</aside>