KantSites/templates/admin/shell.html.twig

{# The frame around every management screen. One sidebar, always the same, so each area is one
   click away and the current one is visible. Screens fill in heading, lead, actions and content. #}
{% extends 'admin/base.html.twig' %}
{% block body_class %}admin-shell{% endblock %}
{# Solange jemand hier arbeitet, laeuft der Aufgabenplan - auch auf einer Website ohne Besucher.
   Das Skript fragt im Minutentakt an; was faellig ist, entscheidet der Server. #}
{% block worker %}
    <meta name="kant-tick" content="{{ path('admin_tasks_tick') }}">
    <meta name="kant-tick-token" content="{{ csrf_token('tasks-tick') }}">
    <script src="/assets/task-worker.js?v={{ kant_version() }}" defer></script>
{% endblock %}
{% block body %}
<header class="shell-nav">
    <a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>sites</span></a>
    {# Auf dem Telefon ein Klappmenue, am Schreibtisch die gewohnte Spalte. Ein details-Element
       kann beides, ohne eine Zeile JavaScript: die Zusammenfassung wird auf grossen Bildschirmen
       ausgeblendet und der Inhalt dauerhaft gezeigt. Zwoelf Eintraege in einer Wischleiste zu
       verstecken war die schlechtere Loesung - man sieht nie, was man nicht trifft. #}
    <details class="shell-menu">
        <summary>
            <svg class="shell-menu-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
            <span class="shell-menu-label">{{ {
                'pages': 'Seiten', 'partials': 'Bereiche', 'menus': 'Menüs', 'media': 'Mediathek',
                'forms': 'Formulare', 'statistics': 'Statistik', 'theme': 'Design',
                'settings': 'Einstellungen', 'system': 'System', 'tasks': 'Aufgaben', 'users': 'Benutzer',
                'account': 'Mein Konto'
            }[nav|default('')]|default('Verwaltung') }}</span>
        </summary>
    <nav aria-label="Verwaltung">
        <p class="nav-label" id="nav-content">INHALT</p>
        <ul class="nav-list" aria-labelledby="nav-content">
            {% set entries = [
                {id: 'pages', route: 'admin_pages', icon: 'pages', label: 'Seiten'},
                {id: 'partials', route: 'admin_partials', icon: 'partials', label: 'Bereiche'},
                {id: 'menus', route: 'admin_menus', icon: 'menus', label: 'Menüs'},
                {id: 'media', route: 'admin_media', icon: 'media', label: 'Mediathek'},
                {id: 'forms', route: 'admin_forms', icon: 'forms', label: 'Formulare'},
                {id: 'statistics', route: 'admin_statistics', icon: 'statistics', label: 'Statistik'}
            ] %}
            {% for entry in entries %}
            <li><a class="nav-item" href="{{ path(entry.route) }}"{{ nav|default('') == entry.id ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: entry.icon} only %}{{ entry.label }}</a></li>
            {% endfor %}
        </ul>
        <p class="nav-label" id="nav-site">WEBSITE</p>
        <ul class="nav-list" aria-labelledby="nav-site">
            <li><a class="nav-item" href="{{ path('admin_theme') }}"{{ nav|default('') == 'theme' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'theme'} only %}Design</a></li>
            <li><a class="nav-item" href="{{ path('admin_settings') }}"{{ nav|default('') == 'settings' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'settings'} only %}Einstellungen</a></li>
            {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_system') }}"{{ nav|default('') == 'system' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'system'} only %}System</a></li>{% endif %}
            {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_tasks') }}"{{ nav|default('') == 'tasks' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'tasks'} only %}Aufgaben</a></li>{% endif %}
            {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_users') }}"{{ nav|default('') == 'users' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'users'} only %}Benutzer</a></li>{% endif %}
            <li><a class="nav-item nav-out" href="/">{% include 'admin/icon.html.twig' with {name: 'external'} only %}Website ansehen</a></li>
            <li><a class="nav-item nav-out" href="/beitraege">{% include 'admin/icon.html.twig' with {name: 'external'} only %}Beitragsübersicht</a></li>
        </ul>
    </nav>
    </details>
    <div class="shell-foot">
        <p class="shell-version">Fassung {{ kant_version() }}</p>
        <a class="shell-user" href="{{ path('admin_account') }}"{{ nav|default('') == 'account' ? ' aria-current="page"' : '' }}><span class="shell-avatar" aria-hidden="true">{{ app.user.userIdentifier|first|upper }}</span><strong>{{ app.user.userIdentifier }}</strong></a>
        <form action="{{ path('admin_logout') }}" method="post">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
            <button class="subtle" type="submit">Abmelden</button>
        </form>
    </div>
</header>
<main id="admin-main" class="shell-main" tabindex="-1">
    <div class="shell-top">
        <div class="shell-heading">
            <h1>{% block heading %}Verwaltung{% endblock %}</h1>
            <p class="muted">{% block lead %}{% endblock %}</p>
        </div>
        <div class="shell-actions">{% block actions %}{% endblock %}</div>
    </div>
    <div class="shell-body stack">
        {% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
            <p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
        {% endfor %}{% endfor %}
        {% block content %}{% endblock %}
    </div>
</main>
{% endblock %}