Demo of shifting More menu to existing headers.

beeware · Aug 7, 2024 · 4f8584b · 4f8584b
1 parent f4ed371
commit 4f8584b
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 25 deletions.
diff --git a/assets/static/beeware.css b/assets/static/beeware.css
@@ -345,6 +345,53 @@ blockquote {
   left: auto;
 }
 
+.dropdown-menu {
+  background-color: #343a40;
+  border: 1px solid #777777;
+}
+
+.dropdown-item.active {
+  background-color: #afafaf;
+}
+
+.dropdown-item {
+  color: #BBBBBB;
+}
+
+.dropdown-item:hover {
+  background-color: #afafaf;
+}
+
+.header-button .btn {
+  padding: 0;
+  color: rgba(255,255,255,.5);
+}
+
+/* Fix for separators in header menu when display is 760px-and-smaller wide */
+@media (max-width: 760px) {
+  .navbar-collapse li {
+    border-bottom: 1px solid #666;
+  }
+  .navbar-collapse .header-button li.nav-item {
+    border-bottom: 0
+  }
+  .navbar-collapse .header-button {
+    border-bottom: 1px solid #666;
+  }
+}
+
+.beeware-button {
+  background-color: #343a40;
+}
+
+.btn + .dropdown-toggle-split {
+  padding-right: 0.5rem;
+}
+
+.header-button .btn:focus {
+  box-shadow: 0 0 0 0;
+}
+
 .navbar {
   padding-top: 1em;
 }
@@ -353,20 +400,9 @@ blockquote {
 	position: relative;
 }
 
-ul.dark-menu {
-  background-color: #343a40 !important;
-  padding: 7px 12px 2px 12px !important;
+.header-menu {
+  padding: 5px 7px 0 7px;
   min-width: max-content;
-  border-radius: 10px;
-  border: 2px solid #777777;
-}
-
-ul.dark-menu .nav-link {
-  padding: 0 !important;
-}
-
-ul.dark-menu .nav-item {
-  padding: 5px 0 5px 0 !important;
 }
 
 /*----------------------------------------------------

diff --git a/templates/layout.html b/templates/layout.html
@@ -83,25 +83,33 @@
   <div class="collapse navbar-collapse" id="navbarsDefault">
     <ul class="navbar-nav mr-auto">
       {{ menu_item('project') }}
-      {{ menu_item('about') }}
-      {{ menu_item('community') }}
+      <div class="btn-group header-button">
+          <button type="button" class="btn beeware-button">
+              {{ menu_item('about') }}
+          </button>
+          <button type="button" class="btn beeware-button dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          </button>
+          <div class="dropdown-menu header-menu">
+              {{ menu_item('contact') }}
+          </div>
+      </div>
+      <div class="btn-group header-button">
+          <button type="button" class="btn beeware-button">
+              {{ menu_item('community') }}
+          </button>
+          <button type="button" class="btn beeware-button dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          </button>
+          <div class="dropdown-menu header-menu">
+            {{ menu_item('code-of-conduct') }}
+          </div>
+      </div>
       {{ menu_item('contributing') }}
       {{ menu_item('news') }}
       <li class="nav-item">
         <a class="nav-link" href="/membership/">
           {{ transbag('menu', this.alt, 'donate') }}
         </a>
       </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown"
-           data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-            More
-        </a>
-        <ul class="dropdown-menu dark-menu" aria-labelledby="moreDropdown">
-            {{ menu_item('contact') }}
-            {{ menu_item('code-of-conduct') }}
-        </ul>
-       </li>
     </ul>
     <ul class="nav navbar-nav navbar-right">
         {%- set extra_slash = '/' if this.path[-1] != '/' else '' -%}