From 01e7d9de6fb2312720245643e311ec96ae26dc83 Mon Sep 17 00:00:00 2001
From: Benjamin Renard <brenard@easter-eggs.com>
Date: Wed, 8 Mar 2023 13:04:33 +0100
Subject: [PATCH] empty.tpl: improve navbar

---
 templates/empty.tpl | 62 ++++++++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/templates/empty.tpl b/templates/empty.tpl
index 6b425a7..4d9c489 100644
--- a/templates/empty.tpl
+++ b/templates/empty.tpl
@@ -31,44 +31,54 @@
 {block name="body"}
 
   {block name="navbar"}
-  <header class="p-3 mb-3 border-bottom">
-    <div class="container">
-      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+  <header>
+    <nav class="{block name="navbar-class"}navbar navbar-expand-lg{/block}" {block name="navbar-extra-args"}{/block}>
+      <div class="{block name="navbar-container-class"}container{/block}">
         {block name="navbar-brand"}
-        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
+        <a class="navbar-brand me-3" href="#">
           <img id="logo" src="{static_url path="images/logo.svg"}" alt="Logo" title="Logo"/>
         </a>
         {/block}
 
-        <ul class="pr-2 nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-          {block name="navbar-menu"}
-          {/block}
-        </ul>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-        {block name="navbar-extra-content"}{/block}
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            {block name="navbar-menu"}
+            {/block}
+          </ul>
 
-        {block name="navbar-user"}
-        {if isset($auth_user) && $auth_user}
-        <div class="dropdown text-end">
-          {block name="navbar-user-name"}
-          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fa fa-user-circle" aria-hidden="true"></i>
-            {$auth_user->name|escape:"htmlall"}
-          </a>
-          {/block}
-          {block name="navbar-user-menu"}
-          <ul class="dropdown-menu text-small">
-            {block name="navbar-user-menu-content"}{/block}
-            <li>
-              <a class="dropdown-item" href="logout">
-                <i class="fas fa-sign-out-alt"></i> {t domain=$CORE_TEXT_DOMAIN}Sign out{/t}
+          {block name="navbar-extra-content"}{/block}
+
+          {block name="navbar-user"}
+          {if isset($auth_user) && $auth_user}
+          <ul class="navbar-nav text-end">
+            <li class="nav-item dropdown">
+              {block name="navbar-user-name"}
+              <a class="nav-link active dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="fa fa-user-circle" aria-hidden="true"></i>
+                {$auth_user->name|escape:"htmlall"}
               </a>
+              {/block}
+              {block name="navbar-user-menu"}
+              <ul class="dropdown-menu text-small">
+                {block name="navbar-user-menu-content"}{/block}
+                <li>
+                  <a class="dropdown-item" href="logout">
+                    <i class="fa fa-sign-out"></i> {t domain=$CORE_TEXT_DOMAIN}Sign out{/t}
+                  </a>
+                </li>
+              </ul>
+              {/block}
             </li>
           </ul>
+          {/if}
           {/block}
         </div>
-        {/if}
-        {/block}
       </div>
     </div>
   </header>