Migrate menu

composer.json

@@ -1,12 +1,15 @@
 {
     "require": {
         "ltb-project/ldap": "v0.1.0",
-        "twbs/bootstrap": "v5.3.2"
+        "twbs/bootstrap": "v5.3.2",
+        "components/jquery": "v3.7.1"
     },
     "scripts": {
         "post-update-cmd": [
             "rm -rf htdocs/vendor/bootstrap",
-            "cp -R vendor/twbs/bootstrap/dist htdocs/vendor/bootstrap"
+            "cp -R vendor/twbs/bootstrap/dist htdocs/vendor/bootstrap",
+            "rm -f htdocs/vendor/jquery/js/*",
+            "cp vendor/components/jquery/jquery.min.* htdocs/vendor/jquery/js/"
         ]
     }
 }

templates/footer.tpl

@@ -4,8 +4,8 @@
 <div id="footer">LDAP Tool Box Service Desk - version {$version}</div>
 {/if}
 
-<script src="vendor/jquery/js/jquery-1.10.2.min.js"></script>
-<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
+<script src="vendor/jquery/js/jquery.min.js"></script>
+<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="vendor/datatables/datatables.min.js"></script>
 
 {literal}

templates/menu.tpl

@@ -1,50 +1,45 @@
-    <div class="navbar-wrapper">
+    <div class="mb-3">
 
-        <div class="navbar navbar-default navbar-static-top" role="navigation">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary" role="navigation">
           <div class="container-fluid">
-            <div class="navbar-header">
-              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-              </button>
               <a class="navbar-brand" href="index.php?page=welcome">
                 {if $logo}
                 <img src="{$logo}" alt="Logo" class="menu-logo img-responsive" />
                 {/if}
                 {$msg_title}
               </a>
-            </div>
-            <div class="navbar-collapse collapse">
-              <ul class="nav navbar-nav">
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+
+            <div class="navbar-collapse collapse" id="navbarSupportedContent">
+              <ul class="nav navbar-nav me-auto mb-2 mb-lg-0">
                 {if $use_searchlocked or $use_searchwillexpire or $use_searchexpired or $use_searchidle}
-                <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-dashboard"></i> {$msg_dashboards}<span class="caret"></span></a>
-                    <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-dashboard"></i> {$msg_dashboards}<span class="caret"></span></a>
+                  <ul class="dropdown-menu">
                       {if $use_searchlocked}
-                      <li><a href="index.php?page=searchlocked"><i class="fa fa-fw fa-lock"></i> {$msg_lockedaccounts}</a></li>
+                      <li><a href="index.php?page=searchlocked" class="dropdown-item"><i class="fa fa-fw fa-lock"></i> {$msg_lockedaccounts}</a></li>
                       {/if}
                       {if $use_searchwillexpire}
-                      <li><a href="index.php?page=searchwillexpire"><i class="fa fa-fw fa-hourglass-half"></i> {$msg_willexpireaccounts}</a></li>
+                      <li><a href="index.php?page=searchwillexpire" class="dropdown-item"><i class="fa fa-fw fa-hourglass-half"></i> {$msg_willexpireaccounts}</a></li>
                       {/if}
                       {if $use_searchexpired}
-                      <li><a href="index.php?page=searchexpired"><i class="fa fa-fw fa-hourglass-end"></i> {$msg_expiredaccounts}</a></li>
+                      <li><a href="index.php?page=searchexpired" class="dropdown-item"><i class="fa fa-fw fa-hourglass-end"></i> {$msg_expiredaccounts}</a></li>
                       {/if}
                       {if $use_searchidle}
-                      <li><a href="index.php?page=searchidle"><i class="fa fa-fw fa-hourglass-o"></i> {$msg_idleaccounts}</a></li>
+                      <li><a href="index.php?page=searchidle" class="dropdown-item"><i class="fa fa-fw fa-hourglass-o"></i> {$msg_idleaccounts}</a></li>
                       {/if}
-                    </ul>
-                  </a>
+                  </ul>
                 </li>
                 {/if}
                 {if $logout_link}
-                <li>
-                  <a href="{$logout_link}"><i class="fa fa-fw fa-sign-out"></i> {$msg_logout}</a>
+                <li class="nav_item">
+                  <a href="{$logout_link}" class="nav-link"><i class="fa fa-fw fa-sign-out"></i> {$msg_logout}</a>
                 </li>
                 {/if}
               </ul>
-              <form class="navbar-form navbar-right" role="search" action="index.php?page=search" method="post">
+              <form class="d-flex" role="search" action="index.php?page=search" method="post">
                 <div class="input-group">
                   <input type="text" class="form-control" placeholder="{$msg_search}" name="search" value="{$search}" />
                   <span class="input-group-btn">
@@ -54,6 +49,6 @@
               </form>
             </div>
           </div>
-        </div>
+        </nav>
 
     </div>

templates/welcome.tpl

@@ -1,5 +1,7 @@
-<a href="index.php">
-    <img src="{$logo}" alt="{$msg_title}" class="logo img-responsive center-block" />
-</a>
+<div class="text-center">
+  <a href="index.php">
+    <img src="{$logo}" alt="{$msg_title}" class="logo img-responsive" />
+  </a>
+</div>
 
 <div class="alert alert-success">{$msg_welcome|unescape: "html" nofilter}</div>