FrankandClaude Sonnet 5
cc4fbf425d
Navbar (collapsible) with active-state highlighting driven by a nav list in base.html.twig. Three routed, auth-gated controllers each rendering a shared placeholder partial - data models still to be designed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
71 lines
3.5 KiB
Twig
71 lines
3.5 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}dmtools{% endblock %}</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.1em%22 font-size=%22104%22>🎲</text></svg>">
|
|
|
|
{% block stylesheets %}{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
|
{% endblock %}
|
|
</head>
|
|
<body class="d-flex flex-column">
|
|
{% block navbar %}
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="{{ path('app_home') }}">🎲 dmtools</a>
|
|
{% if app.user %}
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#mainnav" aria-controls="mainnav" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="mainnav">
|
|
{% set route = app.request.attributes.get('_route') %}
|
|
{% set nav = [
|
|
{ route: 'app_home', label: 'Overview' },
|
|
{ route: 'app_characters', label: 'Characters' },
|
|
{ route: 'app_npcs', label: "NPC's" },
|
|
{ route: 'app_storyline', label: 'Storyline' },
|
|
] %}
|
|
<ul class="navbar-nav me-auto">
|
|
{% for item in nav %}
|
|
{% set active = route is not null and route starts with item.route %}
|
|
<li class="nav-item">
|
|
<a class="nav-link{{ active ? ' active' }}"{{ active ? ' aria-current="page"' }}
|
|
href="{{ path(item.route) }}">{{ item.label }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="navbar-text small">{{ app.user.userIdentifier }}</span>
|
|
<a class="btn btn-outline-secondary btn-sm" href="{{ path('app_logout') }}">Log out</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
<main class="app-main flex-grow-1">
|
|
<div class="container">
|
|
{% block flashes %}
|
|
{% for label, messages in app.flashes %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|