Fixing dropdown unique id

Author: choldgraf

src/sphinx_book_theme/_components.py

@@ -8,6 +8,7 @@
 The remaining values in the user configuration are passed as kwargs to the func.
 """
 from sphinx.util import logging
+import hashlib
 
 SPHINX_LOGGER = logging.getLogger(__name__)
 
@@ -63,12 +64,14 @@ def component_dropdown(app, context, content="", items=[]):
         """
         dropdown_items.append(link)
     dropdown_items = "\n".join(dropdown_items)
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
     html = f"""
     <div class="dropdown">
-        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button class="btn dropdown-toggle" type="button" id="{dropdown_id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {content}
         </button>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <div class="dropdown-menu" aria-labelledby="{dropdown_id}">
             {dropdown_items}
         </div>
     </div>

src/sphinx_book_theme/assets/styles/sections/_header-primary.scss

@@ -72,17 +72,20 @@ $header-default-height-narrow: 3rem;
   }
 }
 
+.header__brand {
+  padding: 0 1.5rem;
+}
+
 // Ensure the header items don't touch the screen edge
 .header__start {
   padding-left: 1rem;
 }
 
 @media (max-width: $breakpoint-md) {
-  // Only apply on narrow screens since we want it centered on sidebar on wide
   .header__brand,
+  .header__start,
   .header__end {
-    padding-left: 1rem;
-    padding-right: 0;
+    padding-left: 0.5rem;
   }
 }