timetracking/httpdocs/templates/_sections/nav.html.twig

{# templates/_sections/nav.html.twig #}
{% set currentRoute = app.request.attributes.get('_route') %}

<nav class="main-nav">
    <div class="main-nav__left">
        <a href="{{ path('timetracking_week') }}"
           class="main-nav__item{% if currentRoute starts with 'timetracking' %} main-nav__item--active{% endif %}">
            {{ 'app.nav.time_tracking'|trans }}
        </a>
        {% if app.user %}
        <div class="main-nav__stopwatch-wrap">
            <button class="main-nav__stopwatch" id="stopwatch-toggle"
                    title="{{ 'app.stopwatch.title'|trans }}"
                    aria-expanded="false">
                <span class="main-nav__stopwatch-icon">{% include '_atoms/icon-stopwatch.html.twig' %}</span>
                <span class="main-nav__stopwatch-time" id="stopwatch-header-time" hidden></span>
            </button>
            <div class="stopwatch-popover" id="stopwatch-popover" hidden>
                <div class="stopwatch-popover__timer" id="stopwatch-display">0:00</div>
                <div class="stopwatch-popover__form">
                    <div id="stopwatch-project" class="searchable-select" data-placeholder="{{ 'app.stopwatch.select_project'|trans }}"></div>
                    <div id="stopwatch-service" class="searchable-select" data-placeholder="{{ 'app.stopwatch.select_service'|trans }}"></div>
                    <input type="text" id="stopwatch-label" class="input input--sm"
                           placeholder="{{ 'app.entry.placeholder_label'|trans }}" autocomplete="off" />
                    <textarea id="stopwatch-note" class="textarea" rows="2"
                              placeholder="{{ 'app.entry.placeholder_note'|trans }}"></textarea>
                    <div class="stopwatch-popover__actions">
                        <button type="button" class="btn btn-primary" id="stopwatch-start">
                            {{ 'app.stopwatch.btn_start'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <a href="{{ path('report_times') }}"
           class="main-nav__item{% if currentRoute starts with 'report' %} main-nav__item--active{% endif %}">
            {{ 'app.nav.reports'|trans }}
        </a>
    </div>
    <div class="main-nav__right">
        {% if isCurrentUserMemberOrAdmin() %}
            <a href="{{ path('client_index') }}"
               class="main-nav__item{% if currentRoute starts with 'client' %} main-nav__item--active{% endif %}">
                {{ 'app.nav.clients'|trans }}
            </a>
            <a href="{{ path('project_index') }}"
               class="main-nav__item{% if currentRoute starts with 'project' %} main-nav__item--active{% endif %}">
                {{ 'app.nav.projects'|trans }}
            </a>
            <a href="{{ path('service_index') }}"
               class="main-nav__item{% if currentRoute starts with 'service' %} main-nav__item--active{% endif %}">
                {{ 'app.nav.services'|trans }}
            </a>
        {% endif %}
        <span class="main-nav__separator"></span>
        {% if isCurrentUserAdmin() %}
            <a href="{{ path('team_index') }}"
               class="main-nav__item main-nav__item--icon{% if currentRoute starts with 'team' %} main-nav__item--active{% endif %}">
                {% include '_atoms/icon-team.html.twig' %}
                {{ 'app.nav.team'|trans }}
            </a>
        {% endif %}
        <a href="{{ path('account_index') }}"
           class="main-nav__item main-nav__item--icon{% if currentRoute starts with 'account' %} main-nav__item--active{% endif %}">
            {% include '_atoms/icon-user.html.twig' %}
            {{ 'app.nav.account'|trans }}
        </a>
        <a href="{{ path('app_logout') }}" class="main-nav__logout" title="{{ 'app.nav.logout'|trans }}">
            {% include '_atoms/icon-logout.html.twig' %}
        </a>
    </div>
</nav>

{# Hamburger-Navigation — nur im Minimal-Theme sichtbar (via CSS) #}
<div class="hamburger-nav" id="hamburger-nav">
    {% if app.user %}
    <div class="hamburger-nav__stopwatch-wrap">
        <button class="hamburger-nav__stopwatch" id="hamburger-stopwatch"
                title="{{ 'app.stopwatch.title'|trans }}">
            <span class="hamburger-nav__stopwatch-icon">{% include '_atoms/icon-stopwatch.html.twig' %}</span>
            <span class="hamburger-nav__stopwatch-time" id="hamburger-stopwatch-time" hidden></span>
        </button>
        <div class="stopwatch-popover stopwatch-popover--hamburger" id="hamburger-stopwatch-popover" hidden>
            <div class="stopwatch-popover__timer" id="hamburger-stopwatch-display">0:00</div>
            <div class="stopwatch-popover__form">
                <div id="hamburger-sw-project" class="searchable-select" data-placeholder="{{ 'app.stopwatch.select_project'|trans }}"></div>
                <div id="hamburger-sw-service" class="searchable-select" data-placeholder="{{ 'app.stopwatch.select_service'|trans }}"></div>
                <input type="text" id="hamburger-sw-label" class="input input--sm"
                       placeholder="{{ 'app.entry.placeholder_label'|trans }}" autocomplete="off" />
                <textarea id="hamburger-sw-note" class="textarea" rows="2"
                          placeholder="{{ 'app.entry.placeholder_note'|trans }}"></textarea>
                <div class="stopwatch-popover__actions">
                    <button type="button" class="btn btn-primary" id="hamburger-sw-start">
                        {{ 'app.stopwatch.btn_start'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    <button class="hamburger-nav__toggle" id="hamburger-toggle" aria-label="{{ 'app.nav.menu_open'|trans }}" aria-expanded="false">
        <span class="hamburger-nav__icon"></span>
    </button>
    <div class="hamburger-nav__panel" id="hamburger-panel" hidden>
        <a href="{{ path('timetracking_week') }}"
           class="hamburger-nav__item{% if currentRoute starts with 'timetracking' %} hamburger-nav__item--active{% endif %}">
            {{ 'app.nav.time_tracking'|trans }}
        </a>
        <a href="{{ path('report_times') }}"
           class="hamburger-nav__item{% if currentRoute starts with 'report' %} hamburger-nav__item--active{% endif %}">
            {{ 'app.nav.reports'|trans }}
        </a>
        {% if isCurrentUserMemberOrAdmin() %}
            <a href="{{ path('client_index') }}"
               class="hamburger-nav__item{% if currentRoute starts with 'client' %} hamburger-nav__item--active{% endif %}">
                {{ 'app.nav.clients'|trans }}
            </a>
            <a href="{{ path('project_index') }}"
               class="hamburger-nav__item{% if currentRoute starts with 'project' %} hamburger-nav__item--active{% endif %}">
                {{ 'app.nav.projects'|trans }}
            </a>
            <a href="{{ path('service_index') }}"
               class="hamburger-nav__item{% if currentRoute starts with 'service' %} hamburger-nav__item--active{% endif %}">
                {{ 'app.nav.services'|trans }}
            </a>
        {% endif %}
        {% if isCurrentUserAdmin() %}
            <a href="{{ path('team_index') }}"
               class="hamburger-nav__item{% if currentRoute starts with 'team' %} hamburger-nav__item--active{% endif %}">
                {{ 'app.nav.team'|trans }}
            </a>
        {% endif %}
        <div class="hamburger-nav__divider"></div>
        <a href="{{ path('account_index', {tab: 'user'}) }}"
           class="hamburger-nav__item{% if currentRoute starts with 'account' %} hamburger-nav__item--active{% endif %}">
            {{ 'app.nav.account'|trans }}
        </a>
        <a href="{{ path('app_logout') }}" class="hamburger-nav__item">
            {{ 'app.nav.logout'|trans }}
        </a>
    </div>
</div>

{% if app.user %}
<script>
window.STOPWATCH = {
    trackingInterval: {{ trackingInterval() }},
    i18n: {
        title:          {{ 'app.stopwatch.title'|trans|json_encode|raw }},
        btnStart:       {{ 'app.stopwatch.btn_start'|trans|json_encode|raw }},
        btnStop:        {{ 'app.stopwatch.btn_stop'|trans|json_encode|raw }},
        resume:         {{ 'app.stopwatch.resume'|trans|json_encode|raw }},
        confirmReplace: {{ 'app.stopwatch.confirm_replace'|trans|json_encode|raw }},
        confirmStop:    {{ 'app.stopwatch.confirm_stop'|trans|json_encode|raw }},
        errorStart:     {{ 'app.stopwatch.error_start'|trans|json_encode|raw }},
        errorStop:      {{ 'app.stopwatch.error_stop'|trans|json_encode|raw }},
        selectPh:       {{ 'app.entry.select_placeholder'|trans|json_encode|raw }},
        billable:       {{ 'app.service.billable'|trans|json_encode|raw }},
        notBillable:    {{ 'app.service.not_billable'|trans|json_encode|raw }},
        placeholderNote:{{ 'app.entry.placeholder_note'|trans|json_encode|raw }},
        selectProject:  {{ 'app.stopwatch.select_project'|trans|json_encode|raw }},
        selectService:  {{ 'app.stopwatch.select_service'|trans|json_encode|raw }},
        search:         {{ 'app.stopwatch.search'|trans|json_encode|raw }},
    },
};
</script>
{% endif %}