update to Template

assets/app.js

@@ -8,7 +8,11 @@ import './bootstrap.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/app.css';
 import './styles/navbar.css';
+import './styles/sidebar.css';
 
 import 'bootstrap';
+import './js/template.js';
+import './js/off_canvas.js';
+import './js/hoverable-collapse.js';
+import './js/cookies.js';
 
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/icons/bi/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>

assets/icons/bi/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708"/></svg>

assets/icons/ix/project-arrow-diagonal-top-right.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" fill-rule="evenodd" d="m243.07 65.728l34.263 14.684v46.42l-41.306-17.703l-107.695 61.54l116.919 66.811L256 243.623v146.285l106.667-60.952v-94.288h42.666v119.048l-10.749 6.143l-149.333 85.333l-10.584 6.048l-10.585-6.048l-149.333-85.333L64 353.716V158.289l10.749-6.142l149.333-85.333l9.224-5.271zm-29.737 324.18V268.383l-106.666-60.952v121.525zm106.666-283.24h55.163l-91.581 91.582l30.17 30.17l91.581-91.582v55.163h42.667v-128h-128z" clip-rule="evenodd"/></svg>

assets/icons/material-symbols-light/play-arrow-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 17.192V6.808L17.154 12zm1-1.842L15.289 12L10 8.65z"/></svg>

assets/icons/material-symbols/copyright-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 16h4q.425 0 .713-.288T15 15v-2h-2v1h-2v-4h2v1h2V9q0-.425-.288-.712T14 8h-4q-.425 0-.712.288T9 9v6q0 .425.288.713T10 16m2 6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>

assets/icons/material-symbols/dashboard-outline-rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9h-6q-.425 0-.712-.288T13 8M3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13H4q-.425 0-.712-.288T3 12m10 8v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21h-6q-.425 0-.712-.288T13 20M3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20m2-9h4V5H5zm10 8h4v-6h-4zm0-12h4V5h-4zM5 19h4v-2H5zm4-2"/></svg>

assets/js/cookies.js

@@ -0,0 +1,39 @@
+var application
+function getApplication(){
+    const body = document.getElementsByTagName('body')[0];
+    application = body.getAttribute('data-application');
+}
+
+getApplication();
+
+// Support pour différents systèmes de navigation
+if (typeof Turbo !== 'undefined') {
+  document.addEventListener('turbo:load', getApplication);
+  document.addEventListener('turbo:render', getApplication);
+}
+
+// Support pour les applications SPA qui utilisent l'historique de navigation
+window.addEventListener('popstate', getApplication);
+
+
+window.setCookie = function (cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + d.toUTCString();
+    document.cookie = application + "-" + cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=Strict";
+}
+window.getCookie = function (cname) {
+    let name = application + "-" + cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}

assets/js/hoverable-collapse.js

@@ -0,0 +1,39 @@
+//Open submenu on hover in compact sidebar mode and horizontal menu mode
+
+
+function initSubMenu(){
+    var sidebar = document.querySelectorAll('.sidebar .nav-item')
+    sidebar.forEach(element => {
+        element.addEventListener('mouseenter', eventMenu)
+        element.addEventListener('mouseleave', eventMenu)
+    })
+}
+
+
+function eventMenu(e){
+    var body = document.querySelector('body');
+    var sidebarIconOnly = body.classList.contains("sidebar-icon-only");
+    var sidebarFixed = body.classList.contains("sidebar-fixed");
+    if (!('ontouchstart' in document.documentElement)) {
+        if (sidebarIconOnly) {          
+            var menuItem = this;
+            if (e.type === 'mouseenter') {
+                menuItem.classList.add('hover-open')
+            } else {
+                menuItem.classList.remove('hover-open')
+            }
+        }
+    }
+}
+
+// Exécuter l'initialisation au chargement de la page
+document.addEventListener('DOMContentLoaded', initSubMenu);
+
+// Support pour différents systèmes de navigation
+if (typeof Turbo !== 'undefined') {
+  document.addEventListener('turbo:load', initSubMenu);
+  document.addEventListener('turbo:render', initSubMenu);
+}
+
+// Support pour les applications SPA qui utilisent l'historique de navigation
+window.addEventListener('popstate', initSubMenu);

assets/js/template.js

@@ -0,0 +1,65 @@
+// Utilisation des fonctions de cookies globales définies dans app.js
+
+// Fonction d'initialisation du template
+function initTemplate() {
+  // Appliquer l'état du menu depuis le cookie
+  applyMenuState();
+  
+  // Initialiser le bouton de minimisation du menu
+  initMinimizeButton();
+}
+
+// Fonction pour appliquer l'état du menu depuis le cookie
+function applyMenuState() {
+  var body = document.querySelector('body');
+  var menuState = getCookie('sidebar_state');
+  
+  // Si le cookie existe, appliquer l'état enregistré
+  if (menuState === 'collapsed') {
+      if (!body.classList.contains('sidebar-icon-only')) {
+          body.classList.add('sidebar-icon-only');
+      }
+  } else if (menuState === 'expanded') {
+      if (body.classList.contains('sidebar-icon-only')) {
+          body.classList.remove('sidebar-icon-only');
+      }
+  }
+}
+
+// Fonction pour initialiser le bouton de minimisation du menu
+function initMinimizeButton() {
+  // Supprimer l'ancien gestionnaire d'événements s'il existe
+  document.querySelectorAll('[data-toggle="minimize"]').forEach(function(button) {
+      // Créer une copie du bouton pour supprimer tous les écouteurs d'événements
+      var newButton = button.cloneNode(true);
+      button.parentNode.replaceChild(newButton, button);
+      
+      // Ajouter le nouvel écouteur d'événements
+      newButton.addEventListener("click", function() {
+          var body = document.querySelector('body');
+          if ((body.classList.contains('sidebar-toggle-display')) || (body.classList.contains('sidebar-absolute'))) {
+              body.classList.toggle('sidebar-hidden');
+              // Enregistrer l'état dans un cookie
+              var newState = body.classList.contains('sidebar-hidden') ? 'collapsed' : 'expanded';
+              setCookie('sidebar_state', newState, 365); // Valable 1 an
+          } else {
+              body.classList.toggle('sidebar-icon-only');
+              // Enregistrer l'état dans un cookie
+              var newState = body.classList.contains('sidebar-icon-only') ? 'collapsed' : 'expanded';
+              setCookie('sidebar_state', newState, 365); // Valable 1 an
+          }
+      });
+  });
+}
+
+// Exécuter l'initialisation au chargement de la page
+document.addEventListener('DOMContentLoaded', initTemplate);
+
+// Support pour différents systèmes de navigation
+if (typeof Turbo !== 'undefined') {
+  document.addEventListener('turbo:load', initTemplate);
+  document.addEventListener('turbo:render', initTemplate);
+}
+
+// Support pour les applications SPA qui utilisent l'historique de navigation
+window.addEventListener('popstate', initTemplate);

assets/styles/app.css

@@ -31,3 +31,50 @@ body {
     overflow: hidden;
 }
 
+.page-body-wrapper {
+    min-height: calc(100vh - 60px);
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 60px;
+
+    &.full-page-wrapper {
+        width: 100%;
+        min-height: 100vh;
+        padding-top: 0;
+    }
+}
+
+.main-panel {
+    transition: width 0.25s ease, margin 0.25s ease;
+    width: calc(100% - 235px);
+    min-height: calc(100vh - 60px);
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.content-wrapper {
+    background: #F5F7FF;
+    width: 100%;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    display: flex;
+}
+
+.footer {
+    background: #fff;
+    padding: 10px 2.45rem;
+    transition: all 0.25s ease;
+    -moz-transition: all 0.25s ease;
+    -webkit-transition: all 0.25s ease;
+    -ms-transition: all 0.25s ease;
+    font-size: calc(0.875rem - 0.05rem);
+    font-family: "Nunito", sans-serif;
+    font-weight: 400;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+}

assets/styles/navbar.css

@@ -69,8 +69,11 @@
     border-radius: 0;
 }
 
-.navbar-nav-right{
-    flex-direction: row;
+.navbar .navbar-menu-wrapper .navbar-toggler:active,
+.navbar .navbar-menu-wrapper .navbar-toggler:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    outline: 0;
 }
 
 .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
@@ -82,12 +85,24 @@
     transition: transform 0.3s linear;
 }
 
+.sidebar-icon-only .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
+    transform: rotate(180deg);
+}
+
+.navbar-nav-right{
+    flex-direction: row;
+}
+
+.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group{
+    align-items: center;
+}
+
 .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control{
     margin-left: 0.7rem;
 }
 
 #navbar-search-icon > #search{
-        vertical-align: middle;
+        vertical-align: baseline;
 }
 
 .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
@@ -244,4 +259,16 @@
 #logo_orga{
     width:auto;
     max-height:40px;
+}
+
+.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control{
+    background: transparent;
+    border: 0;
+    color: #000;
+    padding: 0;
+}
+
+#change-project{
+    padding: 2px 5px;
+    font-size: 16px;
 }

assets/styles/sidebar.css

@@ -0,0 +1,290 @@
+.sidebar {
+    min-height: calc(100vh - 60px);
+    background: #fff;
+    font-weight: 500;
+    padding: 0;
+    width: 235px;
+    z-index: 11;
+    transition: width 0.25s ease, background 0.25s ease;
+    -webkit-transition: width 0.25s ease, background 0.25s ease;
+    -moz-transition: width 0.25s ease, background 0.25s ease;
+    -ms-transition: width 0.25s ease, background 0.25s ease;
+}
+
+.sidebar .nav {
+    overflow: hidden;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    margin-bottom: 60px;
+}
+
+.sidebar .nav:not(.sub-menu) {
+    padding-top: 1.45rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.5rem;
+}
+
+.sidebar .nav .nav-item {
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    transition-property: background;
+    -webkit-transition-property: background;
+}
+
+.sidebar .nav .nav-item .collapse {
+    z-index: 999;
+}
+
+.sidebar .nav .nav-item.active {
+    border-radius: 8px;
+    box-shadow: 0px 0px 5px 0px rgba(197, 197, 197, 0.75);
+}
+
+.sidebar .nav:not(.sub-menu) > .nav-item {
+    border-radius: 8px;
+    margin-top: 0.2rem;
+}
+
+.sidebar > .nav:not(.sub-menu) > .nav-item:hover {
+    border-radius: 8px;
+    color: #494949;
+}
+
+.sidebar .nav .nav-item .nav-link {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0.8125rem 1.937rem 0.8125rem 1rem;
+    color: #848484;
+    border-radius: 8px;
+    -webkit-transition-duration: 0.45s;
+    -moz-transition-duration: 0.45s;
+    -o-transition-duration: 0.45s;
+    transition-duration: 0.45s;
+    transition-property: color;
+    -webkit-transition-property: color;
+    height: 50px;
+}
+
+.sidebar .nav .nav-item.active > .nav-link {
+    color:lightgrey;
+    position: relative;
+}
+
+.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
+    margin: 0;
+}
+
+.sidebar .nav .nav-item .nav-link i.menu-icon {
+    font-size: 1rem;
+    line-height: 1;
+    margin-right: 1rem;
+    color: #838383;
+}
+
+.sidebar .nav .nav-item .nav-link i.menu-arrow {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-left: auto;
+    margin-right: 0;
+    color: #686868;
+    transform: rotate(0deg);
+    -webkit-transition: transform 0.3s linear;
+    -moz-transition: transform 0.3s linear;
+    -ms-transition: transform 0.3s linear;
+    -o-transition: transform 0.3s linear;
+    transition: transform 0.3s linear;
+}
+
+.sidebar .nav .nav-item .nav-link .menu-title {
+    display: inline-block;
+    font-size: 0.875rem;
+    line-height: 1;
+    vertical-align: middle;
+}
+
+.sidebar .nav .nav-item.active > .nav-link i, .sidebar .nav .nav-item.active > .nav-link .menu-title, .sidebar .nav .nav-item.active > .nav-link .menu-arrow {
+    color: #494949;
+}
+
+.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded=true] {
+    border-radius: 8px 8px 0 0;
+    color: #494949;
+}
+
+.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded=true] i.menu-arrow {
+    transform: rotate(90deg);
+}
+
+
+.sidebar .nav.sub-menu {
+    margin-bottom: 0;
+    margin-top: 0;
+    list-style: none;
+    padding: 0.25rem 1.5rem 0 2rem;
+    padding-bottom: 12px;
+}
+
+.sidebar .nav.sub-menu .nav-item {
+    position: relative;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    color: #969696;
+    justify-content: space-between;
+    list-style: none;
+}
+
+.sidebar .nav.sub-menu .nav-item svg {
+    position: absolute;
+    color: #b2b2b2;
+}
+
+.sidebar .nav.sub-menu .nav-item .nav-link {
+    padding: 0.7rem 1rem;
+    position: relative;
+    font-size: 0.875rem;
+    line-height: 1;
+    height: auto;
+    border-top: 0;
+    font-weight: 400;
+}
+
+.sidebar .nav:not(.sub-menu) .nav-link:hover{
+    color: #494949;
+}
+
+@media (min-width: 992px) {
+    .sidebar-icon-only .sidebar {
+        width: 70px;
+    }
+
+    .sidebar-icon-only .sidebar .nav {
+        overflow: visible;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .sidebar-icon-only .navbar .navbar-brand-wrapper {
+        width: 70px;
+    }
+
+    .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo {
+        display: none;
+    }
+
+    .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini {
+        display: inline-block;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
+        display: block;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        text-align: center;
+        position: static;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item {
+        border-radius: 0px;
+        position: relative;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .collapse {
+        display: none;
+    }
+
+    .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.active {
+        border-radius: 0;
+        box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
+        margin-right: 0;
+        margin-left: 0;
+        margin-bottom: 0;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-arrow {
+        display: none;
+    }
+
+    .sidebar-icon-only .sidebar .nav.sub-menu {
+        padding: 0 0 0 1.5rem;
+    }
+
+    .sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link {
+        text-align: left;
+        padding-left: 20px;
+    }
+
+    .sidebar-icon-only .main-panel {
+        width: calc(100% - 70px);
+    }
+
+    .sidebar-icon-only .navbar .navbar-menu-wrapper {
+        width: calc(100% - 70px);
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-sub-title {
+        display: none;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
+        border-radius: 0 5px 5px 0px;
+    }
+
+    .sidebar .nav:not(.sub-menu) > .nav-item:hover {
+        border-radius: 8px;
+        box-shadow: 0px 0px 5px 0px rgba(197, 197, 197, 0.75);
+    }
+    
+    .sidebar-icon-only .nav:not(.sub-menu) > .nav-item:hover,
+    .sidebar-icon-only .nav:not(.sub-menu) > .nav-item:hover .nav-link{
+        border-radius: 0;
+    }
+
+    .sidebar-icon-only .sidebar .nav .nav-item:hover .nav-link[aria-expanded] .menu-title {
+        border-radius: 0 5px 0 0;
+    }
+}
+
+.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    background: #ffffff;
+    padding: 0.5rem 1.4rem;
+    left: 70px;
+    position: absolute;
+    text-align: left;
+    top: 0;
+    bottom: 0;
+    width: 190px;
+    z-index: 10000;
+    line-height: 1.8;
+    -webkit-box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
+    box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
+  }
+
+  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title:after {
+    display: none;
+  }
+
+  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
+  .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
+    display: block;
+    background: #fff;
+    border-radius: 0 0 5px 0;
+    position: absolute;
+    left: 70px;
+    width: 190px;
+    -webkit-box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
+    box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
+  }

config/packages/twig.yaml

@@ -2,6 +2,10 @@ twig:
     file_name_pattern: '*.twig'
     form_themes: ['bootstrap_5_layout.html.twig']
 
+    globals:
+        application: '%env(APPLICATION)%'
+        version: '0.4'
+
 when@test:
     twig:
         strict_variables: true

templates/base.html.twig

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>
             {% block title %}
+                {{application}}
             {% endblock %}
         </title>
         <link rel="icon" href="{{ asset('favicon.ico') }}">
@@ -18,14 +19,29 @@
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
-    <body>
-        <div class="container-scroller container-fluid">
+    <body data-application="{{application}}">
+        <div class="container-scroller">
             {{ include('elements/navbar.html.twig')}}
-
-                {% block body %}
-
-                {% endblock %}
-
+            <div class="container-fluid page-body-wrapper">
+                {{ include('elements/menu.html.twig')}}
+                <div class="main-panel">
+                    <div class="content-wrapper">
+                    {% block body %}
+                    
+                    {% endblock %}
+                    </div>
+                    <footer class="footer">
+                        <div class="d-sm-flex justify-content-center justify-content-sm-between">
+                            <span>
+                               <img src="{{asset('img/sudalys_icone.png')}}" alt="logo sudalys" style="vertical-align:bottom"> Sudalys <i style="vertical-align:text-bottom">{{ ux_icon('material-symbols:copyright-outline', {height: '20px', width: '20px'}) }}</i> {{ "now"|date("Y") }}
+                            </span>
+                            <span>
+                                Version {{version}}
+                            </span>
+                        </div>
+                    </footer>
+                </div>
+            </div>
         <div>
     </body>
 </html>

templates/elements/menu.html.twig

@@ -0,0 +1,32 @@
+<nav class="sidebar sidebar-offcanvas" id="sidebar">
+  <ul class="nav">
+    <li class="nav-item active">
+      <a class="nav-link" href="#">
+        <i class="icon-grid menu-icon">{{ ux_icon('material-symbols:dashboard-outline-rounded', {height: '16px', width: '16px'}) }}</i>
+        <span class="menu-title">Dashboard</span>
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
+        <i class="icon-layout menu-icon">{{ ux_icon('bi:menu-up', {height: '16px', width: '16px'}) }}</i>
+        <span class="menu-title">Menu</span>
+        <i class="menu-arrow">{{ ux_icon('bi:chevron-right', {height: '16px', width: '16px'}) }}</i>
+      </a>
+      <div class="collapse" id="ui-basic">
+        <ul class="nav sub-menu flex-column">
+          <li class="nav-item">{{ ux_icon('material-symbols-light:play-arrow-outline', {height: '16px', width: '16px'}) }} <a class="nav-link" href="#">Accordions</a></li>
+          <li class="nav-item">{{ ux_icon('material-symbols-light:play-arrow-outline', {height: '16px', width: '16px'}) }} <a class="nav-link" href="#">Buttons</a></li>
+          <li class="nav-item">{{ ux_icon('material-symbols-light:play-arrow-outline', {height: '16px', width: '16px'}) }} <a class="nav-link" href="#">Badges</a></li>
+          <li class="nav-item">{{ ux_icon('material-symbols-light:play-arrow-outline', {height: '16px', width: '16px'}) }} <a class="nav-link" href="#">Breadcrumbs</a></li>
+          <li class="nav-item">{{ ux_icon('material-symbols-light:play-arrow-outline', {height: '16px', width: '16px'}) }} <a class="nav-link" href="#">Dropdowns</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">
+        <i class="icon-grid menu-icon">{{ ux_icon('bi:menu-up', {height: '15px', width: '15px'}) }}</i>
+        <span class="menu-title">Menu 2</span>
+      </a>
+    </li>
+  </ul>
+</nav>

templates/elements/navbar.html.twig

@@ -1,13 +1,13 @@
 <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
     <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
-        <a class="navbar-brand brand-logo" href="#"><img class="me-2" src="{{ asset('img/logo.png')}}" alt="logo application"/></a>
-        <a class="navbar-brand brand-logo-mini" href="#"><img src="{{ asset('img/logo-mini.png')}}" alt="logo apllication"/></a>
+        <a class="navbar-brand brand-logo" href="/"><img class="me-2" src="{{ asset('img/logo-'~application~'.png')}}" alt="logo application"/></a>
+        <a class="navbar-brand brand-logo-mini" href="/"><img src="{{ asset('img/logo-'~application~'-mini.png')}}" alt="logo apllication"/></a>
     </div>
     <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
-        <button class="navbar-toggler navbar-toggler align-self-center">
-            <span>
+        <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
+            <i>
                 {{ ux_icon('bi:list', {height: '20px', width: '20px'}) }}
-            </span>
+            </i>
         </button>
         <ul class="navbar-nav ms-lg-3">
             <li class="nav-item nav-search d-none d-lg-block">
@@ -21,6 +21,21 @@
                 </div>
             </li>
         </ul>
+        <ul class="navbar-nav w-auto m-auto">
+            <li class="nav-item nav-search d-none d-lg-block">
+                <div class="input-group">
+                    <div id="navbar-search-icon" class="input-group-prepend hover-cursor">
+                        <span id="search">
+                            <i style="width:22px; height:22px">{{ ux_icon('ix:project-arrow-diagonal-top-right', {height: '22px', width: '22px'}) }}</i>
+                        </span>
+                    </div>
+                    <select id="change-project" class="form-control">
+                        <option>Projet 1</option>
+                        <option>Projet 2</option>
+                    </select>
+                </div>
+            </li>
+        </ul>
         <ul class="navbar-nav navbar-nav-right">
             <li class="nav-item d-flex">
                 <img id="logo_orga" class="m-auto" src="{{asset('logo_org/logo-sudalys.png')}}" alt="logo organisation">
@@ -79,5 +94,10 @@
                 </div>
             </li>
         </ul>
+        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
+            <i>
+                {{ ux_icon('bi:list', {height: '20px', width: '20px'}) }}
+            </i>
+        </button>
     </div>
 </nav>

templates/index/index.html.twig

@@ -1,12 +1,13 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Test - index{% endblock %}
+{% block title %}{{application}} - accueil{% endblock %}
 
 {% block body %}
 
     {% if app.user %}
-        <div class="mb-3">
+        <div class="w-100 h-100 p-5 m-auto">
             You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('sso_logout') }}">Logout</a>
         </div>
     {% endif %}
+    
 {% endblock %}

templates/publicBase.html.twig

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>
             {% block title %}
+                {{application}}
             {% endblock %}
         </title>
         <link rel="icon" href="{{ asset('favicon.ico') }}">

templates/security/login.html.twig

@@ -1,10 +1,10 @@
 {% extends 'publicBase.html.twig' %}
 
-{% block title %}Test - index{% endblock %}
+{% block title %}{{application}} - login{% endblock %}
     {% block body %}
             <div class="col col-sm-10 col-md-7 col-lg-4 col-xl-3 col-xxl-3 shadow rounded px-4 py-3">
                 <form method="post" class='d-flex flex-column'>
-                    <img src="{{ asset('img/logo.png') }}" class="img-fluid rounded-top m-auto" alt="Logo-application" />
+                    <img src="{{ asset('img/logo-'~application~'.png') }}" class="img-fluid rounded-top m-auto" alt="Logo-application" />
                     {% if error %}
                         <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                     {% endif %}