bootstrap 4 update and bugfixes

app/views/nav/admin.html

@@ -1,5 +1,6 @@
-<div class="collapse navbar-collapse navbar-ex1-collapse">
-    <ul class="nav navbar-nav side-nav">
+
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <ul class="navbar-nav navbar-dark bg-dark flex-column">
         {ADMIN_LINKS}
-    </ul>
-</div>
+</ul>
+</nav>

app/views/nav/main.html

@@ -1,3 +1,3 @@
-<ul class="nav navbar-nav">
+<ul class="navbar-nav">
     {MENU_LINKS}
 </ul>

app/views/nav/statusLoggedIn.html

@@ -1,10 +1,19 @@
-<li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{USERNAME} <i class="fa fa-user"></i></a>
-    <ul class="dropdown-menu">
+<li class="dropdown nav-link">
+    <a
+        href="#"
+        class="nav-link dropdown-toggle"
+        id="userDropdown"
+        role="button"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
+        {USERNAME}<i class="fa fa-user pl-2"></i>
+    </a>
+    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
         <li><a href="{ROOT_URL}usercp"><i class="fa fa-fw fa-user"></i> Profile</a></li>
         {topNavRightDropdown}
         <li><a href="{ROOT_URL}usercp/settings"><i class="fa fa-fw fa-gear"></i> Settings</a></li>
-        <li class="divider"></li>
+        <div class="dropdown-divider"></div>
         <li>
             <a href="{ROOT_URL}home/logout"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
         </li>

app/views/nav/statusLoggedOut.html

@@ -1,22 +1,59 @@
-<li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i></a>
-    <ul class="dropdown-menu">
-        <form method="post" action="{ROOT_URL}home/login" id="signin" class="navbar-form navbar-right" role="form">
+<li class="dropdown nav-link">
+    <a
+        href="#"
+        class="nav-link dropdown-toggle"
+        id="userDropdown"
+        role="button"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
+      <i class="fa fa-user"></i>
+    </a>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
+        <form method="post" action="{ROOT_URL}home/login" id="signin" class="px-4 py-3">
             <input type="hidden" name="rurl" id="rurl" value="{CURRENT_URL}">
             <input type="hidden" name="token" value="{TOKEN}">
-            <li style="margin-left: 10px;margin-right: 10px;">
-                <div class="input-group">
-                    <input id="username" type="text" class="form-control" name="username" value="" placeholder="Username">
-                    <input id="password" type="password" class="form-control" name="password" value="" placeholder="Password">
-                    <span class="input-group-addon">
-                        <input type="checkbox" name="remember" id="remember">
-                    </span>
-                </div>
-            </li>
-            <li class="divider"></li>
-            <li style="margin-left: 10px;">
-                <button type="submit" class="btn btn-primary" name="submit" value="submit">Sign in</button>
-            </li>
+
+            <!-- Username -->
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input
+                id="username"
+                type="text"
+                class="form-control"
+                name="username"
+                placeholder="Username">
+            </div>
+
+            <!-- Password -->
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input
+                id="password"
+                type="password"
+                class="form-control"
+                name="password"
+                placeholder="Password">
+            </div>
+
+          <!-- Remember Me -->
+            <div class="form-check">
+                <input
+                type="checkbox"
+                class="form-check-input"
+                id="remember"
+                name="remember">
+                <label class="form-check-label" for="remember">Remember me</label>
+            </div>
+
+            <!-- Submit Button -->
+            <button
+                type="submit"
+                class="btn btn-primary btn-block mt-3"
+                name="submit"
+                value="submit">
+                Sign in
+            </button>
         </form>
-    </ul>
+    </div>
 </li>

app/views/nav/usercp.html

@@ -1,5 +1,5 @@
 <ul class="nav nav-tabs" role="tablist">
     {LOOP}
-    <li><a href="{url}">{name}</a></li>
+    <li><a href="{url}" class="nav-link">{name}</a></li>
     {/LOOP}
 </ul>