templates/sidebar.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  5. {% endblock %}
  6. {% block body %}
  7.     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
  8.     <div class="flex h-screen bg-white">
  9.         <!-- Sidebar -->
  10.         <div class="sidebar">
  11.             <div class="logo_content">
  12.                 <div class="logo">
  13.                     <div class="logo_name">Administration</div>
  14.                 </div>
  15.                 <i class="bx bx-menu" id="btn"></i>
  16.             </div>
  17.             <ul class="nav_list">
  18.                 {% if is_granted('ROLE_SUPER_ADMIN') %}
  19.                     <li>
  20.                         <a href="{{ path('app_dashboard') }}">
  21.                             <i class="bx bx-grid-alt"></i>
  22.                             <span class="links_name">Dashboard</span>
  23.                         </a>
  24.                         <span class="tooltip">Dashboard</span>
  25.                     </li>
  26.                 {% endif %}
  27.                 <li>
  28.                     <a href="{{ path('app_client_admin') }}">
  29.                         <i class="bx bx-user"></i>
  30.                         <span class="links_name">Clients</span>
  31.                     </a>
  32.                     <span class="tooltip">Clients</span>
  33.                 </li>
  34.                 <li>
  35.                     <a href="{{ path('app_ticket_gratter') }}">
  36.                         <i class="bx bx-gift"></i>
  37.                         <span class="links_name">Ticket à gratter</span>
  38.                     </a>
  39.                     <span class="tooltip">Ticket à gratter</span>
  40.                 </li>
  41.                 <li class="has-submenu">
  42.                     <a href="#">
  43.                         <i class="bx bx-calculator"></i>
  44.                         <span class="links_name">Recette</span>
  45.                     </a>
  46.                     <span class="tooltip">Recette</span>
  47.                     <ul class="submenu">
  48.                         <li>
  49.                             <a href="{{ path('app_recette') }}">
  50.                                 <i class="bx bx-calculator"></i>
  51.                                 <span>Recette</span>
  52.                             </a>
  53.                         </li>
  54.                         <li>
  55.                             <a href="{{ path('app_prestation_index') }}">
  56.                                 <i class="bx bx-list-ul"></i>
  57.                                 <span>Liste des prestations</span>
  58.                             </a>
  59.                         </li>
  60.                     </ul>
  61.                 </li>
  65.                 <li class="has-submenu">
  66.                     <a href="#">
  67.                         <i class="bx bxl-instagram"></i>
  68.                         <span class="links_name">Instagram</span>
  69.                     </a>
  70.                     <span class="tooltip">Instagram</span>
  71.                     <ul class="submenu">
  72.                         <li>
  73.                             <a href="{{ path('app_instagram_upload') }}">
  74.                                 <i class="bx bx-upload"></i>
  75.                                 <span>Créer une story</span>
  76.                             </a>
  77.                         </li>
  78.                         <li>
  79.                             <a href="{{ path('app_instagram_post') }}">
  80.                                 <i class="bx bx-image-add"></i>
  81.                                 <span>Importer images</span>
  82.                             </a>
  83.                         </li>
  84.                         <li>
  85.                             <a href="{{ path('image_creator') }}">
  86.                                 <i class="bx bx-palette"></i>
  87.                                 <span>Type de publication</span>
  88.                             </a>
  89.                         </li>
  90.                         <li>
  91.                             <a href="{{ path('app_instagram_bot_message') }}">
  92.                                 <i class="bx bx-message-rounded-dots"></i>
  93.                                 <span>Message Automatique</span>
  94.                             </a>
  95.                         </li>
  96.                         <li>
  97.                             <a href="{{ path('app_instagram_post') }}">
  98.                                 <i class="bx bx-cog"></i>
  99.                                 <span>Réglages</span>
  100.                             </a>
  101.                         </li>
  102.                     </ul>
  103.                 </li>
  105.                 <li class="has-submenu">
  106.                     <a href="#">
  107.                         <i class="bx bx-broadcast"></i>
  108.                         <span class="links_name">Marketing</span>
  109.                     </a>
  110.                     <span class="tooltip">Marketing</span>
  111.                     <ul class="submenu">
  112.                         <li>
  113.                             <a href="{{ path('app_notification_apple_wallet') }}">
  114.                                 <i class="bx bxl-apple"></i>
  115.                                 <span>Notifications iOS</span>
  116.                             </a>
  117.                         </li>
  118.                         <li>
  119.                             <a href="{{ path('app_review_request') }}">
  120.                                 <i class="bx bx-star"></i>
  121.                                 <span>Avis Google</span>
  122.                             </a>
  123.                         </li>
  124.                     </ul>
  125.                 </li>
  129.                 <li>
  130.                     <a href="#">
  131.                         <i class="bx bx-folder"></i>
  132.                         <span class="links_name">Document</span>
  133.                     </a>
  134.                     <span class="tooltip">Document</span>
  135.                 </li>
  136.                 <li>
  137.                     <a href="#">
  138.                         <i class="bx bx-heart"></i>
  139.                         <span class="links_name">Saved</span>
  140.                     </a>
  141.                     <span class="tooltip">Saved</span>
  142.                 </li>
  143.                 <li>
  144.                     <a href="#">
  145.                         <i class="bx bx-cog"></i>
  146.                         <span class="links_name">Settings</span>
  147.                     </a>
  148.                     <span class="tooltip">Settings</span>
  149.                 </li>
  150.             </ul>
  151.             <div class="profile_content">
  152.                 <div class="profile">
  153.                     <div class="profile_details">
  154.                         {% set initials = app.user.firstname|slice(0, 1) ~ app.user.lastname|slice(0, 1) %}
  155.                         <div class="avatar">{{ initials }}</div>
  156.                         <div class="name_job">
  157.                             <div class="name">{{ app.user.firstname }} {{ app.user.lastname }}</div>
  158.                             <div class="job">Administrateur</div>
  159.                         </div>
  160.                     </div>
  161.                     <a href="{{ path('app_logout') }}">
  162.                         <i class="bx bx-log-out" id="log_out"></i>
  163.                     </a>
  164.                 </div>
  165.             </div>
  166.         </div>
  168.         <!-- Main Content -->
  169.         <div class="home_content">
  170.             <header class="flex items-center justify-between h-16 px-4 bg-white border-b mobile-header">
  171.                 <button class="text-gray-500 focus:outline-none lg:hidden" id="menu-toggle">
  172.                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  173.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  174.                     </svg>
  175.                 </button>
  176.                 <div class="flex items-center space-x-4">
  177.                     <nav class="flex mobile-breadcrumb" aria-label="Breadcrumb">
  178.                         {% block breadcrumb %}
  179.                             {{ generate_breadcrumb(app.request.attributes.get('_route'))|raw }}
  180.                         {% endblock %}
  181.                     </nav>
  182.                 </div>
  183.             </header>
  184.             <div class="container mx-auto px-4">
  185.                 <div class="mb-6 mt-4">
  186.                     <h2 class="text-3xl font-bold flex items-center"><span class="mr-2">{% block page_emoji %}{% endblock %}</span> {% block page_titre %}{% endblock %}</h2>
  187.                     <p class="text-gray-600 mb-1">{% block page_info %} {% endblock %}</p> <!-- Réduire la marge inférieure -->
  188.                 </div>
  189.             </div>
  190.             <main class="flex-grow w-full">
  191.                 <div class="px-2">
  192.                     {% block admin_content %}
  193.                     {% endblock %}
  194.                 </div>
  195.             </main>
  197.         </div>
  198.     </div>
  200.     <style>
  202.         :root {
  203.             --navbar-height: 64px; /* Ajustez cette valeur en fonction de la hauteur de votre navbar */
  204.         }
  206.         body, html {
  207.             height: 100%;
  208.             margin: 0;
  209.             padding: 0;
  210.         }
  212.         .sidebar {
  213.             position: absolute;
  214.             top: var(--navbar-height);
  215.             left: 0;
  216.             height: calc(100% - var(--navbar-height));
  217.             width: 78px;
  218.             background: #181818;
  219.             padding: 6px 14px;
  220.             transition: all 0.5s ease;
  221.             z-index: 999; /* Assurez-vous que la sidebar est en dessous de la navbar */
  222.         }
  224.         .sidebar.active {
  225.             width: 240px;
  226.         }
  228.         .sidebar.fixed {
  229.             position: fixed;
  230.             top: 0;
  231.             height: 100%;
  232.         }
  234.         .sidebar .logo_content .logo {
  235.             color: #ffffff;
  236.             height: 50px;
  237.             width: 100%;
  238.             display: flex;
  239.             align-items: center;
  240.             opacity: 0;
  241.             pointer-events: none;
  242.             transition: all 0.5s ease;
  243.         }
  245.         .sidebar.active .logo_content .logo {
  246.             opacity: 1;
  247.         }
  249.         .logo_content .logo i {
  250.             font-size: 28px;
  251.             margin-right: 5px;
  252.         }
  254.         .logo_content .logo .logo_name {
  255.             font-size: 20px;
  256.             font-weight: 400;
  257.         }
  259.         .sidebar #btn {
  260.             position: absolute;
  261.             color: #ffffff;
  262.             left: 50%;
  263.             top: 6px;
  264.             font-size: 20px;
  265.             height: 50px;
  266.             width: 50px;
  267.             text-align: center;
  268.             line-height: 50px;
  269.             transform: translateX(-50%);
  270.         }
  272.         .sidebar.active #btn {
  273.             left: 90%;
  274.         }
  276.         .sidebar ul {
  277.             margin-top: 20px;
  278.         }
  280.         .sidebar ul li {
  281.             position: relative;
  282.             height: 50px;
  283.             width: 100%;
  284.             margin: 0 5px;
  285.             list-style: none;
  286.             line-height: 50px;
  287.         }
  289.         .sidebar ul li .tooltip {
  290.             position: absolute;
  291.             left: 122px;
  292.             top: 0;
  293.             transform: translate(-50%, -50%);
  294.             border-radius: 6px;
  295.             height: 35px;
  296.             width: 122px;
  297.             background: #ffffff;
  298.             line-height: 35px;
  299.             text-align: center;
  300.             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  301.             transition: 0s;
  302.             opacity: 0;
  303.             pointer-events: none;
  304.             display: block;
  305.         }
  307.         .sidebar.active ul li .tooltip {
  308.             display: none;
  309.         }
  311.         .sidebar ul li:hover .tooltip {
  312.             transition: all 0.5s ease;
  313.             opacity: 1;
  314.             top: 50%;
  315.         }
  317.         .sidebar ul li a {
  318.             color: #ffffff;
  319.             display: flex;
  320.             align-items: center;
  321.             text-decoration: none;
  322.             border-radius: 12px;
  323.             transition: all 0.4s ease;
  324.             white-space: nowrap;
  325.         }
  327.         .sidebar ul li a:hover {
  328.             color: #181818;
  329.             background: #333333;
  330.         }
  332.         .sidebar ul li i {
  333.             height: 50px;
  334.             min-width: 50px;
  335.             border-radius: 12px;
  336.             line-height: 50px;
  337.             text-align: center;
  338.         }
  340.         .sidebar .links_name {
  341.             opacity: 0;
  342.             pointer-events: none;
  343.             transition: all 0.5s ease;
  344.         }
  346.         .sidebar.active .links_name {
  347.             opacity: 1;
  348.             pointer-events: auto;
  349.         }
  351.         .sidebar .profile_content {
  352.             position: absolute;
  353.             color: #ffffff;
  354.             bottom: 0;
  355.             left: 0;
  356.             width: 100%;
  357.         }
  359.         .sidebar .profile_content .profile {
  360.             position: relative;
  361.             padding: 10px 6px;
  362.             height: 60px;
  363.             background: none;
  364.             transition: all 0.5s ease;
  365.         }
  367.         .sidebar.active .profile_content .profile {
  368.             background: #282828;
  369.         }
  371.         .profile_content .profile .profile_details {
  372.             display: flex;
  373.             align-items: center;
  374.             opacity: 0;
  375.             pointer-events: none;
  376.             white-space: nowrap;
  377.         }
  379.         .sidebar.active .profile .profile_details {
  380.             opacity: 1;
  381.             pointer-events: auto;
  382.         }
  384.         .profile .profile_details img {
  385.             height: 45px;
  386.             width: 45px;
  387.             object-fit: cover;
  388.         : 12px;
  389.         }
  391.         .profile .profile_details .name_job {
  392.             margin-left: 10px;
  393.         }
  395.         .profile .profile_details .name {
  396.             font-size: 15px;
  397.             font-weight: 400;
  398.         }
  400.         .profile .profile_details .job {
  401.             font-size: 12px;
  402.         }
  404.         .profile #log_out {
  405.             position: absolute;
  406.             left: 50%;
  407.             bottom: 5px;
  408.             transform: translateX(-50%);
  409.             min-width: 50px;
  410.             line-height: 50px;
  411.             font-size: 20px;
  412.             border-radius: 12px;
  413.             text-align: center;
  414.             transition: all 0.5s ease;
  415.             background: #282828;
  416.         }
  418.         .sidebar.active .profile #log_out {
  419.             left: 88%;
  420.         }
  422.         .sidebar.active .profile #log_out {
  423.             background: none;
  424.         }
  426.         .home_content {
  427.             position: absolute;
  428.             height: calc(100% - var(--navbar-height)); /* Ajustez cette valeur en fonction de la hauteur de votre navbar */
  429.             width: calc(100% - 78px);
  430.             left: 78px;
  431.             top: var(--navbar-height); /* Ajustez cette valeur en fonction de la hauteur de votre navbar */
  432.             transition: all 0.5s ease;
  433.         }
  435.         .home_content .text {
  436.             font-size: 25px;
  437.             font-weight: 500;
  438.             color: #1d1b31;
  439.             margin: 12px;
  440.         }
  442.         .sidebar.active ~ .home_content {
  443.             width: calc(100% - 240px);
  444.             left: 240px;
  445.         }
  447.         .breadcrumb {
  448.             list-style: none; /* Supprime les puces par défaut */
  449.             padding: 0; /* Supprime le padding par défaut */
  450.             margin: 0; /* Supprime la marge par défaut */
  451.             background: none; /* Supprime le fond par défaut */
  452.             display: flex; /* Utilise flexbox pour aligner les éléments en ligne */
  453.             flex-wrap: nowrap; /* Empêche le retour à la ligne */
  454.             overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
  455.         }
  457.         .breadcrumb li {
  458.             display: inline-flex; /* Assure que les éléments sont alignés horizontalement */
  459.             align-items: center; /* Centre verticalement les éléments */
  460.             margin-right: 0.5rem; /* Ajoute un espace après les éléments */
  461.         }
  463.         .breadcrumb li a {
  464.             text-decoration: none; /* Supprime la décoration de texte par défaut */
  465.             color: inherit; /* Utilise la couleur de texte héritée */
  466.             transition: color 0.3s; /* Ajoute une transition pour le hover */
  467.         }
  469.         .breadcrumb li a:hover {
  470.             color: #ae885a; /* Couleur de texte au survol */
  471.         }
  473.         .breadcrumb li svg {
  474.             margin-right: 0.5rem; /* Ajoute un espace après les icônes */
  475.         }
  477.         .avatar {
  478.             width: 45px;
  479.             height: 45px;
  480.             border-radius: 50%;
  481.             background-color: #333;
  482.             color: #fff;
  483.             display: flex;
  484.             align-items: center;
  485.             justify-content: center;
  486.             font-size: 1.2rem;
  487.             font-weight: bold;
  488.         }
  490.         .profile_details {
  491.             display: flex;
  492.             align-items: center;
  493.         }
  495.         .name_job {
  496.             margin-left: 10px;
  497.         }
  499.         .name {
  500.             font-size: 15px;
  501.             font-weight: 400;
  502.         }
  504.         .job {
  505.             font-size: 12px;
  506.         }
  508.         @media (max-width: 768px) {
  509.             .sidebar {
  510.                 width: 240px;
  511.                 left: -240px;
  512.                 top: auto !important;
  513.                 height: calc(100% - var(--navbar-height)); /* Ajustez cette valeur en fonction de la hauteur de votre navbar */
  514.                 transition: all 0.3s ease;
  515.                 position: fixed; /* Ajoutez cette ligne */
  516.             }
  518.             .sidebar.active {
  519.                 left: 0;
  520.             }
  522.             .home_content {
  523.                 width: 100%;
  524.                 left: 0;
  525.                 transition: all 0.3s ease;
  526.             }
  528.             .sidebar.active ~ .home_content {
  529.                 left: 240px;
  530.                 width: calc(100% - 240px);
  531.             }
  533.             .sidebar #btn {
  534.                 display: none;
  535.             }
  537.             .mobile-header {
  538.                 margin-top: -40px;
  539.             }
  541.             .breadcrumb {
  542.                 font-size: 0.8rem; /* Réduire la taille de la police */
  543.             }
  545.             .breadcrumb li {
  546.                 margin-right: 0.3rem; /* Réduire les marges entre les éléments */
  547.             }
  549.             .breadcrumb li svg {
  550.                 width: 0.6rem; /* Réduire la taille des icônes */
  551.                 height: 0.6rem;
  552.             }
  553.         }
  555.         /* Remplacez votre media query iPad actuelle par celle-ci */
  556.         @media (min-width: 769px) and (max-width: 1024px) {
  557.             .mobile-header #menu-toggle {
  558.                 display: none;
  559.             }
  560.             .sidebar {
  561.                 width: 78px; /* Commence fermée */
  562.                 left: 0;
  563.                 top: var(--navbar-height);
  564.                 height: calc(100% - var(--navbar-height));
  565.                 transition: all 0.3s ease;
  566.             }
  568.             .sidebar.active {
  569.                 width: 240px; /* S'ouvre au clic */
  570.             }
  572.             .sidebar .links_name {
  573.                 opacity: 0;
  574.             }
  576.             .sidebar.active .links_name {
  577.                 opacity: 1;
  578.             }
  580.             .home_content {
  581.                 width: calc(100% - 78px);
  582.                 left: 78px;
  583.                 transition: all 0.3s ease;
  584.             }
  586.             .sidebar.active ~ .home_content {
  587.                 width: calc(100% - 240px);
  588.                 left: 240px;
  589.             }
  591.             .sidebar #btn {
  592.                 display: block; /* Afficher le bouton sur iPad */
  593.             }
  595.             /* Gestion du profil */
  596.             .profile_content .profile .profile_details {
  597.                 opacity: 0;
  598.             }
  600.             .sidebar.active .profile_content .profile .profile_details {
  601.                 opacity: 1;
  602.             }
  605.         }
  608.         @media (min-width: 769px) and (max-width: 1024px) {
  609.             .sidebar:not(.active) ul li.has-submenu > a::after {
  610.                 display: none;
  611.             }
  613.             .sidebar:not(.active) ul li .submenu {
  614.                 position: absolute;
  615.                 left: 78px;
  616.                 background: #181818;
  617.                 width: 200px;
  618.                 padding: 10px;
  619.                 border-radius: 0 6px 6px 0;
  620.                 display: none;
  621.             }
  623.             .sidebar:not(.active) ul li.has-submenu.open .submenu {
  624.                 display: block;
  625.             }
  627.             .sidebar.active ul li .submenu {
  628.                 left: 240px;
  629.             }
  630.         }
  633.         .sidebar ul li.has-submenu > a::after {
  634.             content: '\25B6';
  635.             position: absolute;
  636.             right: 20px;
  637.             transition: transform 0.3s;
  638.             display: none; /* Masquer la flèche par défaut */
  639.         }
  641.         .sidebar.active ul li.has-submenu > a::after {
  642.             display: inline-block; /* Afficher la flèche lorsque la barre latérale est ouverte */
  643.         }
  645.         .sidebar ul li.has-submenu.open > a::after {
  646.             transform: rotate(90deg);
  647.         }
  649.         .sidebar ul li .submenu {
  650.             display: none;
  651.             padding-left: 20px;
  652.         }
  654.         .sidebar ul li.open .submenu {
  655.             display: block;
  656.         }
  658.         .sidebar.active ul li .submenu {
  659.             position: absolute;
  660.             left: 100%;
  661.             top: 0;
  662.             background: #181818;
  663.             width: 200px;
  664.             padding: 10px;
  665.             border-radius: 0 6px 6px 0;
  666.         }
  668.         .sidebar.active ul li .submenu li {
  669.             background: none;
  670.             padding: 6px 0;
  671.         }
  673.         .sidebar:not(.active) ul li.has-submenu.open .submenu {
  674.             position: absolute;
  675.             left: 78px;
  676.             top: 0;
  677.             background: #181818;
  678.             width: 200px;
  679.             padding: 10px;
  680.             border-radius: 0 6px 6px 0;
  681.             z-index: 1000;
  682.         }
  684.         .sidebar:not(.active) ul li.has-submenu.open .submenu li {
  685.             height: auto;
  686.             padding: 6px 0;
  687.         }
  689.         .sidebar:not(.active) ul li.has-submenu.open .submenu li a {
  690.             padding-left: 10px;
  691.         }
  693.         .sidebar ul li.has-submenu.open .tooltip {
  694.             display: none;
  695.         }
  697.         .sidebar.active ul li .submenu {
  698.             position: absolute;
  699.             left: 100%;
  700.             top: 0;
  701.             background: #181818;
  702.             width: 200px;
  703.             padding: 10px;
  704.             border-radius: 0 6px 6px 0;
  705.             margin-left: -14px; /* Ajoutez cette ligne pour coller le sous-menu à la sidebar */
  706.         }
  708.         .sidebar:not(.active) ul li.has-submenu.open .submenu {
  709.             position: absolute;
  710.             left: 64px; /* Ajustez cette valeur pour coller le sous-menu à la sidebar fermée */
  711.             top: 0;
  712.             background: #181818;
  713.             width: 200px;
  714.             padding: 10px;
  715.             border-radius: 0 6px 6px 0;
  716.             z-index: 1000;
  717.         }
  719.         .sidebar ul li .submenu li a {
  720.             white-space: nowrap;
  721.             overflow: hidden;
  722.             text-overflow: ellipsis;
  723.             display: block;
  724.             padding: 5px 10px;
  725.         }
  727.         .sidebar:not(.active) ul li.has-submenu.open .submenu li a {
  728.             padding-left: 10px;
  729.         }
  731.         .sidebar.active ul li .submenu,
  732.         .sidebar:not(.active) ul li.has-submenu.open .submenu {
  733.             width: auto;
  734.             min-width: 200px;
  735.             max-width: 250px;
  736.         }
  740.     </style>
  742.     <script>
  743.         document.addEventListener('DOMContentLoaded', function () {
  744.             let sidebar = document.querySelector('.sidebar');
  745.             let navbarHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'), 10);
  746.             let btn = document.querySelector('#btn');
  747.             let menuToggle = document.querySelector('#menu-toggle');
  749.             // Gestion du scroll
  750.             window.addEventListener('scroll', function () {
  751.                 if (window.scrollY > navbarHeight) {
  752.                     sidebar.classList.add('fixed');
  753.                     sidebar.style.top = '0';
  754.                 } else {
  755.                     sidebar.classList.remove('fixed');
  756.                     sidebar.style.top = `var(--navbar-height)`;
  757.                 }
  758.             });
  760.             // Gestion des boutons de menu
  761.             btn.addEventListener('click', () => {
  762.                 sidebar.classList.toggle('active');
  763.             });
  765.             menuToggle.addEventListener('click', () => {
  766.                 sidebar.classList.toggle('active');
  767.             });
  769.             // Gestion des sous-menus
  770.             let submenuItems = document.querySelectorAll('.has-submenu');
  772.             submenuItems.forEach(item => {
  773.                 item.addEventListener('click', function(e) {
  774.                     e.preventDefault();
  775.                     e.stopPropagation();
  777.                     // Fermer tous les autres sous-menus
  778.                     submenuItems.forEach(otherItem => {
  779.                         if (otherItem !== this && otherItem.classList.contains('open')) {
  780.                             otherItem.classList.remove('open');
  781.                             const otherTooltip = otherItem.querySelector('.tooltip');
  782.                             if (otherTooltip) {
  783.                                 otherTooltip.style.display = '';
  784.                             }
  785.                         }
  786.                     });
  788.                     // Basculer l'état du sous-menu actuel
  789.                     this.classList.toggle('open');
  791.                     // Gérer le tooltip
  792.                     const tooltip = this.querySelector('.tooltip');
  793.                     if (tooltip) {
  794.                         tooltip.style.display = this.classList.contains('open') ? 'none' : '';
  795.                     }
  796.                 });
  797.             });
  799.             // Fermer les sous-menus lors d'un clic à l'extérieur
  800.             document.addEventListener('click', function(e) {
  801.                 if (!sidebar.contains(e.target)) {
  802.                     submenuItems.forEach(item => {
  803.                         item.classList.remove('open');
  804.                         const tooltip = item.querySelector('.tooltip');
  805.                         if (tooltip) {
  806.                             tooltip.style.display = '';
  807.                         }
  808.                     });
  809.                 }
  810.             });
  812.             // Gestion des liens dans les sous-menus
  813.             let submenuLinks = document.querySelectorAll('.submenu a');
  814.             submenuLinks.forEach(link => {
  815.                 link.addEventListener('click', function(e) {
  816.                     e.stopPropagation();
  817.                 });
  818.             });
  820.             // État initial pour iPad
  821.             function setInitialState() {
  822.                 if (window.innerWidth >= 769 && window.innerWidth <= 1024) {
  823.                     sidebar.classList.remove('active');
  824.                     submenuItems.forEach(item => item.classList.remove('open'));
  825.                 }
  826.             }
  828.             setInitialState();
  829.             window.addEventListener('resize', setInitialState);
  830.         });
  833.     </script>
  834. {% endblock %}