feat: ADD dropdown field for the menu #28

config.py

@@ -11,10 +11,17 @@ THEME = "default"
 # Exclude specific sections from the main page (they'll still have their own /section/name/ pages)
 EXCLUDE_SECTIONS_FROM_MAIN = ['draft','private']  # e.g., ['python', 'drafts']
 
-# Navigation bar items - list of dictionaries with 'text' and 'url' keys
+# Navigation bar items - list of dictionaries with 'text' and 'url' keys.
+# Add a 'children' list to turn an item into a one-level dropdown menu.
+# A dropdown parent is a clickable link if it has a 'url'; omit 'url' to make
+# it a label that only opens the menu.
 NAVBAR_ITEMS = [
     {'text': 'Home', 'url': '/'},
     {'text': 'Sections', 'url': '/section/'},
+    {'text': 'Projects', 'url': '/projects/', 'children': [
+        {'text': 'All Projects', 'url': '/projects/'},
+        {'text': 'Another Project', 'url': '/projects/another-project/'},
+    ]},
     {'text': 'About', 'url': '/about/'},
     {'text': 'RSS', 'url': '/rss.xml'}
 ]

theme/default/assets/style.css

@@ -61,6 +61,58 @@ h1 {
     color: #0066cc;
 }
 
+/* Dropdown (one level, CSS-only, opens on hover / keyboard focus) */
+.nav-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.nav-dropdown-toggle {
+    cursor: pointer;
+}
+
+.nav-caret {
+    font-size: 0.75em;
+}
+
+.nav-submenu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 6px;
+    min-width: 160px;
+    padding: 6px;
+    background: #fff;
+    border: 1px solid #efefef;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    z-index: 100;
+}
+
+/* Invisible bridge across the gap so hover isn't lost between toggle and menu */
+.nav-submenu::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: 0;
+    right: 0;
+    height: 6px;
+}
+
+.nav-dropdown:hover > .nav-submenu,
+.nav-dropdown:focus-within > .nav-submenu {
+    display: block;
+}
+
+.nav-submenu .nav-item {
+    display: block;
+    border: none;
+    border-radius: 6px;
+    text-align: left;
+    white-space: nowrap;
+}
+
 a {
     color: #0066cc;
     text-decoration: none;

theme/default/templates/header.tmpl

@@ -12,7 +12,22 @@
     <p class="blog-description">{{ blog_description }}</p>
     <nav class="main-nav">
         {% for item in navbar_items %}
+        {% if item.children %}
+        <div class="nav-dropdown">
+            {% if item.url %}
+            <a href="{{ item.url }}" class="nav-item nav-dropdown-toggle">{{ item.text }} <span class="nav-caret">▾</span></a>
+            {% else %}
+            <span class="nav-item nav-dropdown-toggle" tabindex="0" role="button" aria-haspopup="true">{{ item.text }} <span class="nav-caret">▾</span></span>
+            {% endif %}
+            <div class="nav-submenu">
+                {% for child in item.children %}
+                <a href="{{ child.url }}" class="nav-item">{{ child.text }}</a>
+                {% endfor %}
+            </div>
+        </div>
+        {% else %}
         <a href="{{ item.url }}" class="nav-item">{{ item.text }}</a>
+        {% endif %}
         {% endfor %}
     </nav>
 </header>