[change] Updated header navigation

_static/custom.css

@@ -449,3 +449,23 @@ main > div .flex.justify-between.items-center.pt-6 {
 .offline-docs .urls a:first-child {
   padding-left: 0px !important;
 }
+
+.navigation-dropdown {
+  border-radius: 0.75rem;
+  transform: translateX(-15px) translateY(10px);
+  transition-duration: 0.3s;
+  transition-property: opacity, transform;
+  color: var(--background-color);
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+  border: 1px solid hsl(var(--border));
+}
+.navigation-dropdown a {
+  padding: .375rem 1rem;
+  white-space: nowrap;
+  width: 100%;
+}
+.navigation-link a svg {
+  display: inline;
+  rotate: 90deg;
+}

_templates/header.html

@@ -0,0 +1,41 @@
+{% extends "!header.html" %}
+
+{%- block header_main_nav %}
+{%- if main_nav_links|tobool -%}
+<nav class="flex items-center space-x-6 text-sm font-medium">
+    {%- for text, item in main_nav_links.items() %}
+    {%- if item is string %}
+    {# Single link #}
+    {%- set _active = "text-foreground" if pagename in item else "text-foreground/60" -%}
+    <a href="{{ item }}" class="py-2 transition-colors hover:text-foreground/80 {{ _active }}"
+        rel="noopener nofollow">{{ text }}</a>
+    {%- elif item is mapping %}
+    {# Nested links with focus and hover accessibility #}
+    <div x-data="{ open: false }" @focusin="open = true" @focusout="open = false" @mouseenter="open = true"
+        @mouseleave="open = false" class="relative navigation-link">
+        <a href="#" class="py-2 transition-colors hover:text-foreground/80 focus:outline-none" tabindex="0"
+            aria-haspopup="true" :aria-expanded="open.toString()">
+            {{ text }}
+            <svg fill="currentColor" height="24px" stroke="none" viewBox="0 0 24 24" width="24px"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+            </svg>
+        </a>
+        <div x-show="open" x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            class="absolute bg-background mt-2 z-10 transition navigation-dropdown">
+            {%- for subtext, suburl in item.items() %}
+            {%- set _active = "text-foreground" if pagename in suburl else "text-foreground/60" -%}
+            <a href="{{ pathto(suburl) }}" class="block px-4 py-2 text-sm transition-colors {{ _active }}" tabindex="0">
+                {{ subtext }}
+            </a>
+            {%- endfor %}
+        </div>
+    </div>
+    {%- endif %}
+    {%- endfor %}
+</nav>
+{%- endif %}
+{%- endblock header_main_nav %}

conf.py

@@ -470,6 +470,22 @@
     'docs_root': docs_root,
     'stable_version': os.environ.get('STABLE_VERSION'),
     'html_baseurl': os.environ.get('HTML_BASE_URL', ''),
+    'main_nav_links': {
+        'Features': 'https://openwisp.org/features/',
+        'About': {
+            'FAQ': 'https://openwisp.org/faq/',
+            'Source Code': 'https://openwisp.org/code/',
+            'History': 'https://openwisp.org/history/',
+            'Team': 'https://openwisp.org/team/',
+            'Partners': 'https://openwisp.org/partners/',
+            'Sponsorship': 'https://openwisp.org/sponsorship/',
+        },
+        'Support': {
+            'Community Support': 'https://openwisp.org/support/',
+            'Commercial Support': 'https://openwisp.org/commercial-support/',
+        },
+        'Blog': 'https://openwisp.org/blog/',
+    },
 }
 
 for ow_version in ow_docs_config['versions']: