templates/includes/navbar.html.twig line 1

Open in your IDE?
  1. <style>
  2.   .navbar {
  3.     position: relative;
  4.   }
  6.   .white-bg {
  7.     position: absolute;
  8.     top: 0;
  9.     left: -1rem;
  10.     width: 140%; /* Adjust the width here (e.g., 120% or any other value you like) */
  11.     height: 100%;
  12.     background-color: white;
  13.     z-index: -1; /* Set the z-index to -1 to place it behind the navbar content */
  14.   }
  16.   .bg-white {
  17.     background-color: white;
  18.     padding: 20px; /* Add padding to the div if needed */
  19.   }
  21.   .navbar-title {
  22.     display: flex;
  23.     align-items: center;
  24.     justify-content: center;
  25.     font-size: 24px;
  26.     font-weight: bold;
  27.     text-transform: uppercase;
  28.     color: #333;
  29.     margin: 0;
  30.     padding: 10px;
  31.   }
  32.   .navbar-logo {
  33.   font-size: 24px;
  34.   font-weight: bold;
  35. }
  36. .inline-elements {
  37.     display: inline;
  38. }
  40. </style>
  42. <nav class="navbar navbar-top navbar-expand navbar-dashboard navbar-dark ps-0 pe-2 pb-0">
  43.     <input type="hidden" id="user-username" value="{{ app.user.username }}"/>
  44.     <input type="hidden" value="{{ app.user.id }}" id="user_id">
  45.  <div class="white-bg"></div>
  46.   <div class="container-fluid px-0">
  47.     <div class="d-flex justify-content-between w-100" id="navbarSupportedContent">
  48.       <div class="d-flex align-items-center navbar-title">
  49.           <button id="sidebar-toggle" class="sidebar-toggle me-3 btn btn-icon-only d-none d-lg-inline-block align-items-center justify-content-center"><svg class="toggle-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button>
  50.       {# <H2 class="mb-3">Salarie</H2> #}
  51.             <div class="navbar-logo block_page"></div>
  53.         <!-- Search form -->
  54.           {# <input type="hidden" id="dossierId" value="{{app.session.get('dossier').abreviation}}" /> #}
  55.          
  56.         <!-- / Search form -->
  57.       </div>
  58.       <!-- Navbar links -->
  59.       <ul class="navbar-nav align-items-center">
  60.       
  61.             {# <div class="navbar-logo"><h2>{{app.session.get('dossier').abreviation}}</H2></div> #}
  62.           {% set notifications = get_notifications() %}
  64.           {% set unreadClass = '' %}
  65.           {% for notification in notifications %}
  66.               {% if notification.seen == false %}
  67.                     {% set unreadClass = 'unread' %}
  68.               {% endif %}
  70.           {% endfor %}
  72.           <li class="nav-item dropdown " style="margin-right: 2rem" >
  73.               <a class=" nav-link text-dark notification-bell {{ unreadClass}} dropdown-toggle" data-unread-notifications="true" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
  74.                   <svg class="icon text-gray-900" fill="currentColor" viewBox="0 0 20 20"
  75.                        xmlns="http://www.w3.org/2000/svg">
  76.                       <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
  77.                   </svg>
  78.               </a>
  79.               <div style="min-width: 300px" class="dropdown-menu dropdown-menu-lg dropdown-menu-center mt-2 py-0" data-bs-popper="none">
  80.                   <div class="list-group list-group-flush">
  81.                       <a href="#" class="text-center text-primary fw-bold border-bottom border-light py-3">Notifications</a>
  82.                       <div id="notification-block">
  83.                           {% for notification in notifications %}
  84.                               <a href="#" class="list-group-item list-group-item-action border-bottom">
  85.                                   <div class="row align-items-center">
  86.                                       <div class="col ps-0 ms-2">
  87.                                           <div class="d-flex justify-content-between align-items-center">
  88.                                               <div class="text-end"><small class="text-danger">{{ notification.created|date('d/m/Y H:i:s') }}</small></div>
  89.                                           </div>
  90.                                           <p class="font-small mt-1 mb-0">{{ notification.message }}.</p>
  91.                                       </div>
  92.                                   </div>
  93.                               </a>
  94.                           {% endfor %}
  95.                           <a href="#" class="dropdown-item text-center fw-bold rounded-bottom py-3" id="view-all">
  96.                               <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
  97.                               View all
  98.                           </a>
  99.                       </div>
  100.                   </div>
  101.               </div>
  102.           </li>
  103.           <li>
  104.                <a href="{{ path('app_site') }}" class="navbar-logo" style="font-size: 16px;">
  105.                     <div class="inline-elements">
  106.                        <span>
  107.                             <span class="sidebar-icon">
  108.                             <i class="icon icon-xs me-2 fas fa-exchange-alt"></i>
  109.                                           </span>
  110.                             <span class="sidebar-text">{{ app.session.get('dossier').abreviation }}</span>
  111.                           </span>
  113.                     </div>
  114.                 </a>
  115.           </li>
  120.         <li class="nav-item dropdown ms-lg-3">
  121.           <a class="nav-link dropdown-toggle pt-1 px-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  122.             <div class="media d-flex align-items-center">
  123.               <img class="avatar rounded-circle" alt="Image placeholder" src="{{asset('assets/images/avatar-1.png')}}">
  124.               <div class="media-body ms-2 text-dark align-items-center d-none d-lg-block">
  125.                 <span class="mb-0 font-small fw-bold text-gray-900">{{app.user.username}}</span>
  126.               </div>
  127.             </div>
  128.           </a>
  129.           <div class="dropdown-menu dashboard-dropdown dropdown-menu-end mt-2 py-1">
  130.             <a class="dropdown-item d-flex align-items-center" href="#" id="changement_password">
  131.               <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
  132.               Changement mot de passe
  133.             </a>
  134.             
  135.             <div role="separator" class="dropdown-divider my-1"></div>
  136.             <a class="dropdown-item d-flex align-items-center" href="{{path('app_logout')}}">
  137.               <svg class="dropdown-icon text-danger me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>                
  138.               Logout
  139.             </a>
  140.           </div>
  141.         </li>
  142.       </ul>
  143.     </div>
  144.   </div>
  145.   {# </div> #}
  146. </nav>
  147. </br>
  149. <style>
  150.         
  152. #modal_changement_password p {
  153.     font-size: 12px !important;
  154. }
  155.     
  156. </style>
  157. <div class="modal right come-from-modal fade" id="modal_changement_password" aria-labelledby="modal-default" style="display: none;" aria-hidden="true">
  158.     <div class="modal-dialog modal-dialog-top" style="width:30%;max-width:1000px !important"  role="document">
  159.         <div class="modal-content">
  160.             <div class="modal-header">
  161.                 <h2 class="modal-title">Modifier mot de passe</h2>
  162.                 <a role="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></a>
  163.             </div>
  164.             <div class="modal-body">
  165.               <form id="form_changement_password"> 
  166.                  <div class="col-md-12  ">
  167.                       <label class="text-size-12">Mot de passe actuel:</label>
  168.                       <input type="password" class="form-control" name="mdp_current" />
  169.                   </div>
  170.                  <div class="col-md-12  ">
  171.                       <label class="text-size-12">Mot de passe:</label>
  172.                       <input type="password" class="form-control" name="mdp" />
  173.                   </div>
  174.                  <div class="col-md-12  ">
  175.                       <label class="text-size-12">Confirmation mot de passe:</label>
  176.                       <input type="password" class="form-control" name="mdp_confirmation" />
  177.                   </div>
  178.               </form>
  179.             </div>
  181.             <div class="modal-footer justify-content-start" >
  182.                 <button type="submit" class="btn btn-secondary" form="form_changement_password">Enregistre</button>
  183.                 <a type="button" class="btn btn-link" data-bs-dismiss="modal">Fermer</a>
  184.             </div>
  185.         </div>
  186.     </div>
  187. </div>