From 4f8584bd362b24b0eb1429059f7d7455c85035c6 Mon Sep 17 00:00:00 2001
From: Kattni <kattni@kattni.com>
Date: Wed, 7 Aug 2024 15:30:08 -0400
Subject: [PATCH] Demo of shifting More menu to existing headers.

---
 assets/static/beeware.css | 62 +++++++++++++++++++++++++++++++--------
 templates/layout.html     | 32 ++++++++++++--------
 2 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/assets/static/beeware.css b/assets/static/beeware.css
index 270fa1a51f..6a3b08d13b 100644
--- 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
index 03f3e9913a..a2a7d2a49f 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -83,8 +83,26 @@
   <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">
@@ -92,16 +110,6 @@
           {{ 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 '' -%}