<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="{{ asset('images/Logo Sen Lunettes 1-01.png') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
<style>
.avatar-initials{
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
/* rendu propre sur navbar sombre */
background: rgba(255,255,255,.12);
color: #fff;
border: 1px solid rgba(255,255,255,.35);
font-weight: 600;
letter-spacing: .3px;
line-height: 1;
box-shadow: 0 2px 8px rgba(0,0,0,.25) inset;
}
/* optionnel : un peu d’espace à droite du cercle */
.avatar-initials + span{
margin-left: .35rem;
}
</style>
</head>
<body>
{% if app.request.attributes.get('_route') != 'app_login' %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-elevated sticky-top">
<div class="container">
{# Marque / logo #}
<a class="navbar-brand d-flex align-items-center gap-2" href="{{ path('app_commande') }}">
<img src="{{ asset('images/Logo Sen Lunettes 1-01.png') }}" alt="Logo" height="50" class="rounded-2 shadow-sm">
{# <span class="fw-semibold d-none d-sm-inline">GES-COMMANDES</span> #}
</a>
{# Toggler mobile #}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Menu">
<span class="navbar-toggler-icon"></span>
</button>
{# Contenu #}
<div class="collapse navbar-collapse" id="mainNavbar">
{# Récupération de la route courante pour les états "active" #}
{% set current = app.request.attributes.get('_route') %}
{# ----- Côté gauche ----- #}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link {{ current == 'app_commande' ? 'active' : '' }}"
href="{{ path('app_commande_all') }}">
<i class="bi bi-bag-check me-1"></i> Commandes
</a>
</li>
{# <li class="nav-item">
<a class="nav-link {{ current == 'app_client' ? 'active' : '' }}"
href="{{ path('app_client') }}">
<i class="bi bi-people me-1"></i> Clients
</a>
</li> #}
{% if is_granted('ROLE_ADMIN') %}
{# Groupement "Catalogue" en dropdown (#Types, #Catégories, #Lentilles) #}
<li class="nav-item dropdown">
{% set catalogActive = current in ['app_type_lentille', 'app_categorie', 'app_produit'] %}
<a class="nav-link dropdown-toggle {{ catalogActive ? 'active' : '' }}"
href="#" id="navCatalogue" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-boxes me-1"></i> Catalogue
</a>
<ul class="dropdown-menu dropdown-menu-dark shadow-sm" aria-labelledby="navCatalogue">
<li>
<a class="dropdown-item {{ current == 'app_type_lentille' ? 'active' : '' }}"
href="{{ path('app_type_lentille') }}">
<i class="bi bi-layers me-2"></i> Types de lentilles
</a>
</li>
<li>
<a class="dropdown-item {{ current == 'app_categorie' ? 'active' : '' }}"
href="{{ path('app_categorie') }}">
<i class="bi bi-tags me-2"></i> Catégories
</a>
</li>
<li>
<a class="dropdown-item {{ current == 'app_produit' ? 'active' : '' }}"
href="{{ path('app_produit') }}">
<i class="bi bi-eyeglasses me-2"></i> Lentilles
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link {{ current == 'app_agence' ? 'active' : '' }}"
href="{{ path('app_agence') }}">
<i class="bi bi-building me-1"></i> Agences
</a>
</li>
{% endif %}
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item">
<a class="nav-link {{ current == 'app_register' ? 'active' : '' }}"
href="{{ path('app_register') }}">
<i class="bi bi-person-gear me-1"></i> Admins
</a>
</li>
{% endif %}
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item">
<a class="nav-link {{ current == 'app_admin_dashboard' ? 'active' : '' }}"
href="{{ path('app_admin_dashboard') }}">
<i class="bi bi-speedometer2 me-1"></i> Dashboard
</a>
</li>
{% endif %}
</ul>
{# ----- Côté droit : menu utilisateur / auth ----- #}
{% if app.user %}
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#" id="userMenu"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
{% set initials = (app.user.prenom|default('')|first ~ app.user.nom|default('')|first)|upper %}
<span class="avatar-initials">{{ initials ?: 'US' }}</span>
<span class="d-none d-sm-inline">
{{ (app.user.prenom ?? '') ~ ' ' ~ (app.user.nom ?? '') ?: app.user.userIdentifier }}
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark shadow-sm" aria-labelledby="userMenu">
{% if is_granted('ROLE_ADMIN') %}
<li>
<a class="dropdown-item" href="{{ path('app_admin_dashboard') }}">
<i class="bi bi-speedometer2 me-2"></i> Tableau de bord (Admin)
</a>
</li>
<li><hr class="dropdown-divider"></li>
{% endif %}
<li>
<a class="dropdown-item" href="{{ path('app_logout') }}">
<i class="bi bi-box-arrow-right me-2"></i> Déconnexion
</a>
</li>
</ul>
</li>
</ul>
{% else %}
<div class="d-flex">
<a class="btn btn-outline-light btn-sm" href="{{ path('app_login') }}">
<i class="bi bi-box-arrow-in-right me-1"></i> Connexion
</a>
</div>
{% endif %}
</div>
</div>
</nav>
{% endif %}
{% block body %}
{# templates/_navbar.html.twig #}
{% endblock %}
</body>
</html>