Convert top menu to Bootstrap's navbar component

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Jan 17, 2020 · ac8ecb7 · ac8ecb7
1 parent 1155c29
commit ac8ecb7
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 17 deletions.
diff --git a/templates/top_menu.twig b/templates/top_menu.twig
@@ -1,16 +1,22 @@
 <div id="topmenucontainer" class="menucontainer">
-  <i class="scrollindicator scrollindicator--left"><a href="#" class="tab"></a></i>
-  <div class="navigationbar">
-    <ul id="topmenu" class="resizable-menu">
-      {% for tab in tabs %}
-        <li{{ tab.active ? ' class="active"' }}>
-          <a href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}" class="tab{{ tab.active ? 'active' }}">
-            {{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
-          </a>
-        </li>
-      {% endfor %}
-      <div class="clearfloat"></div>
-    </ul>
-  </div>
-  <i class="scrollindicator scrollindicator--right"><a href="#" class="tab"></a></i>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-label="
+      {%- trans 'Toggle navigation' %}" aria-controls="navbarNav" aria-expanded="false">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        {% for tab in tabs %}
+          <li class="nav-item{{ tab.active ? ' active' }}">
+            <a class="nav-link text-nowrap" href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}">
+              {{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
+              {% if tab.active %}
+                <span class="sr-only">{% trans %}(current){% notes %}Current page{% endtrans %}</span>
+              {% endif %}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </nav>
 </div>
diff --git a/themes/bootstrap/scss/_bootstrap.scss b/themes/bootstrap/scss/_bootstrap.scss
@@ -10,13 +10,13 @@
 @import "../../../node_modules/bootstrap/scss/tables";
 @import "../../../node_modules/bootstrap/scss/forms";
 @import "../../../node_modules/bootstrap/scss/buttons";
-//@import "../../../node_modules/bootstrap/scss/transitions";
+@import "../../../node_modules/bootstrap/scss/transitions";
 //@import "../../../node_modules/bootstrap/scss/dropdown";
 //@import "../../../node_modules/bootstrap/scss/button-group";
 //@import "../../../node_modules/bootstrap/scss/input-group";
 //@import "../../../node_modules/bootstrap/scss/custom-forms";
-//@import "../../../node_modules/bootstrap/scss/nav";
-//@import "../../../node_modules/bootstrap/scss/navbar";
+@import "../../../node_modules/bootstrap/scss/nav";
+@import "../../../node_modules/bootstrap/scss/navbar";
 @import "../../../node_modules/bootstrap/scss/card";
 @import "../../../node_modules/bootstrap/scss/breadcrumb";
 //@import "../../../node_modules/bootstrap/scss/pagination";

diff --git a/themes/metro/scss/_navbar.scss b/themes/metro/scss/_navbar.scss
@@ -0,0 +1,24 @@
+.navbar {
+  background-color: $th-background;
+  padding-#{$left}: 20px;
+  padding-#{$right}: 20px;
+}
+
+.navbar-nav .icon {
+  margin-#{$right}: 0.5em;
+  vertical-align: -3px;
+}
+
+.navbar-nav .nav-item {
+  padding: 8px 10px;
+
+  &.active {
+    background: #fff;
+  }
+}
+
+.navbar-nav .nav-link {
+  text-transform: uppercase;
+  font-family: $font-family-extra-bold;
+  font-weight: normal;
+}
diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
@@ -175,6 +175,17 @@ $btn-border-radius: 0;
 $btn-line-height: 1;
 $btn-padding-x: 0.5rem;
 
+// Navbar
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+$navbar-nav-link-padding-x: 0;
+$navbar-nav-link-padding-y: 0;
+$navbar-light-color: #666;
+$navbar-light-hover-color: #333;
+$navbar-light-active-color: #666;
+$navbar-light-disabled-color: #666;
+
 // Card
 
 $card-border-width: 0;

diff --git a/themes/metro/scss/theme.scss b/themes/metro/scss/theme.scss
@@ -13,6 +13,7 @@
 @import "resizable-menu";
 @import "icons";
 @import "reboot";
+@import "navbar";
 @import "card";
 @import "breadcrumbs";
 @import "alert";
diff --git a/themes/original/scss/_navbar.scss b/themes/original/scss/_navbar.scss
@@ -0,0 +1,34 @@
+.navbar-nav {
+  font-weight: bold;
+}
+
+.navbar-nav .icon {
+  vertical-align: middle;
+  margin-#{$right}: 0.1em;
+}
+
+.navbar-nav .nav-item {
+  border-bottom: 1pt solid black;
+
+  &.active .nav-link {
+    margin: 0;
+    background-color: $body-bg;
+    padding: 2px 4px;
+  }
+}
+
+.navbar-nav .nav-link {
+  margin: 2px 2px 0;
+  padding: 2px 2px 0;
+  background-color: $bg-one;
+  border-color: $bg-two;
+  border-style: solid;
+  border-width: 1pt 1pt 0 1pt;
+  border-radius: 0.4em 0.4em 0 0;
+
+  &:hover {
+    margin: 0;
+    background-color: $body-bg;
+    padding: 2px 4px;
+  }
+}
diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
@@ -63,6 +63,17 @@ $font-family-monospace: monospace;
 
 $font-size-base: 0.82rem;
 
+// Navbar
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+$navbar-nav-link-padding-x: 2px;
+$navbar-nav-link-padding-y: 2px;
+$navbar-light-color: #00f;
+$navbar-light-hover-color: #f00;
+$navbar-light-active-color: #00f;
+$navbar-light-disabled-color: #00f;
+
 // Card
 
 $card-border-radius: 0;

diff --git a/themes/original/scss/theme.scss b/themes/original/scss/theme.scss
@@ -12,6 +12,7 @@
 @import "../../pmahomme/scss/resizable-menu";
 @import "icons";
 @import "reboot";
+@import "navbar";
 @import "card";
 @import "breadcrumbs";
 @import "alert";
diff --git a/themes/pmahomme/scss/_navbar.scss b/themes/pmahomme/scss/_navbar.scss
@@ -0,0 +1,32 @@
+.navbar.bg-light {
+  background: linear-gradient(#fff, #dcdcdc);
+}
+
+.navbar-nav {
+  font-weight: bold;
+}
+
+.navbar-nav .icon {
+  margin-#{$right}: 0.5em;
+  vertical-align: -3px;
+}
+
+.navbar-nav .nav-item {
+  background: linear-gradient(#fff, #dcdcdc);
+  border-#{$right}: 1px solid #fff;
+  border-#{$left}: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+
+  &:first-child {
+    border-#{$left}: 0;
+  }
+
+  &:hover {
+    background: linear-gradient(#fff, #e5e5e5);
+  }
+
+  &.active {
+    background: #fff;
+    border-bottom: 0;
+  }
+}
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
@@ -74,6 +74,15 @@ $secondary: #ddd;
 $btn-border-radius: 0.85rem;
 $btn-line-height: 1.15;
 
+// Navbar
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+$navbar-light-color: #235a81;
+$navbar-light-hover-color: #235a81;
+$navbar-light-active-color: #235a81;
+$navbar-light-disabled-color: #235a81;
+
 // Card
 
 $card-border-color: #999;

diff --git a/themes/pmahomme/scss/theme.scss b/themes/pmahomme/scss/theme.scss
@@ -13,6 +13,7 @@
 @import "icons";
 @import "reboot";
 @import "buttons";
+@import "navbar";
 @import "card";
 @import "breadcrumb";
 @import "alert";