Skip to content

Commit fba4420

Browse files
Abhishekmishra2808Abhishekmishra2808
committed
fixed navbar, changed to sans seriff, interaction removed
1 parent 3e1fd75 commit fba4420

File tree

4 files changed

+357
-202
lines changed

4 files changed

+357
-202
lines changed

‎_includes/themes/apache/_navigation.html‎

Lines changed: 79 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,64 +10,101 @@
1010

1111
<!-- Navigation Menu -->
1212
<div class="navbar-menu-wrapper">
13-
<div class="navbar-menu">
14-
<div class="menu-item dropdown">
15-
<button class="menu-link" aria-expanded="false">Community</button>
16-
<div class="dropdown-menu">
17-
<a href="{{ site.baseurl }}/community" class="dropdown-link">Get Involved</a>
18-
<a href="{{ site.baseurl }}/community-members" class="dropdown-link">Who we are</a>
19-
<a href="{{ site.data.project.community_events }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">Events</a>
20-
</div>
21-
</div>
22-
23-
<div class="menu-item dropdown">
24-
<button class="menu-link" aria-expanded="false">Read</button>
25-
<div class="dropdown-menu">
26-
<a href="https://nuttx.apache.org/docs/latest" class="dropdown-link" target="_blank" rel="noopener noreferrer">Documentation</a>
27-
<a href="{{ site.baseurl }}/articles" class="dropdown-link">Articles & Publications</a>
28-
<a href="https://nuttx.apache.org/docs/latest/security.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Security</a>
13+
<nav class="navbar-menu">
14+
<!-- Community Dropdown -->
15+
<div class="nav-item has-dropdown">
16+
<button class="nav-link" type="button">
17+
Community
18+
<svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none">
19+
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
20+
</svg>
21+
</button>
22+
<div class="dropdown-content">
23+
<a href="{{ site.baseurl }}/community" class="dropdown-item">Get Involved</a>
24+
<a href="{{ site.baseurl }}/community-members" class="dropdown-item">Who we are</a>
25+
<a href="{{ site.data.project.community_events }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">Events</a>
2926
</div>
3027
</div>
3128

32-
<div class="menu-item dropdown">
33-
<button class="menu-link" aria-expanded="false">Code</button>
34-
<div class="dropdown-menu">
35-
<a href="{{ site.baseurl }}/download" class="dropdown-link">Releases</a>
36-
<a href="{{ site.data.project.source_repository_os_mirror }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">RTOS source code</a>
37-
<a href="{{ site.data.project.source_repository_apps_mirror }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">APPS source code</a>
29+
<!-- Read Dropdown -->
30+
<div class="nav-item has-dropdown">
31+
<button class="nav-link" type="button">
32+
Read
33+
<svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none">
34+
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
35+
</svg>
36+
</button>
37+
<div class="dropdown-content">
38+
<a href="https://nuttx.apache.org/docs/latest" class="dropdown-item" target="_blank" rel="noopener noreferrer">Documentation</a>
39+
<a href="{{ site.baseurl }}/articles" class="dropdown-item">Articles & Publications</a>
40+
<a href="https://nuttx.apache.org/docs/latest/security.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Security</a>
3841
</div>
3942
</div>
4043

41-
<div class="menu-item dropdown">
42-
<button class="menu-link" aria-expanded="false">Apache</button>
43-
<div class="dropdown-menu">
44-
<a href="https://www.apache.org/foundation/how-it-works.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Apache Software Foundation</a>
45-
<a href="https://www.apache.org/licenses/" class="dropdown-link" target="_blank" rel="noopener noreferrer">License</a>
46-
<a href="https://www.apache.org/security/" class="dropdown-link" target="_blank" rel="noopener noreferrer">Security</a>
47-
<a href="https://privacy.apache.org/policies/privacy-policy-public.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Privacy</a>
48-
<a href="https://www.apache.org/events/current-event.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Events</a>
49-
<a href="https://www.apache.org/foundation/sponsorship.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Sponsorship</a>
50-
<a href="https://www.apache.org/foundation/thanks.html" class="dropdown-link" target="_blank" rel="noopener noreferrer">Thanks</a>
44+
<!-- Code Dropdown -->
45+
<div class="nav-item has-dropdown">
46+
<button class="nav-link" type="button">
47+
Code
48+
<svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none">
49+
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
50+
</svg>
51+
</button>
52+
<div class="dropdown-content">
53+
<a href="{{ site.baseurl }}/download" class="dropdown-item">Releases</a>
54+
<a href="{{ site.data.project.source_repository_os_mirror }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">RTOS source code</a>
55+
<a href="{{ site.data.project.source_repository_apps_mirror }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">APPS source code</a>
5156
</div>
5257
</div>
5358

54-
<!-- Theme Toggle in Navbar -->
55-
<div class="menu-item">
56-
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
57-
<img class="theme-icon sun-icon" src="{{ site.baseurl }}/static/icons/sun.svg" alt="Light mode" width="20" height="20">
58-
<img class="theme-icon moon-icon" src="{{ site.baseurl }}/static/icons/moon.svg" alt="Dark mode" width="20" height="20">
59+
<!-- Apache Dropdown -->
60+
<div class="nav-item has-dropdown">
61+
<button class="nav-link" type="button">
62+
Apache
63+
<svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none">
64+
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
65+
</svg>
5966
</button>
67+
<div class="dropdown-content">
68+
<a href="https://www.apache.org/foundation/how-it-works.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Apache Software Foundation</a>
69+
<a href="https://www.apache.org/licenses/" class="dropdown-item" target="_blank" rel="noopener noreferrer">License</a>
70+
<a href="https://www.apache.org/security/" class="dropdown-item" target="_blank" rel="noopener noreferrer">Security</a>
71+
<a href="https://privacy.apache.org/policies/privacy-policy-public.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Privacy</a>
72+
<a href="https://www.apache.org/events/current-event.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Events</a>
73+
<a href="https://www.apache.org/foundation/sponsorship.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Sponsorship</a>
74+
<a href="https://www.apache.org/foundation/thanks.html" class="dropdown-item" target="_blank" rel="noopener noreferrer">Thanks</a>
75+
</div>
6076
</div>
61-
</div>
77+
</nav>
78+
79+
<!-- Theme Toggle -->
80+
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode" type="button">
81+
<svg class="theme-icon sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
82+
<circle cx="12" cy="12" r="5"/>
83+
<line x1="12" y1="1" x2="12" y2="3"/>
84+
<line x1="12" y1="21" x2="12" y2="23"/>
85+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
86+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
87+
<line x1="1" y1="12" x2="3" y2="12"/>
88+
<line x1="21" y1="12" x2="23" y2="12"/>
89+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
90+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
91+
</svg>
92+
<svg class="theme-icon moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
93+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
94+
</svg>
95+
</button>
96+
97+
{% if page.title == "Home" %}
98+
<!-- Minimalistic UI Toggle -->
99+
<button class="doc-mode-toggle-navbar" id="docModeToggle" aria-label="Toggle minimalistic UI" title="Toggle minimalistic documentation view" type="button">
100+
<span class="toggle-label">Minimalistic</span>
101+
</button>
102+
{% endif %}
62103
</div>
63104
</div>
64105
</nav>
65106

66107
{% if page.title == "Home" %}
67-
<!-- Minimalistic UI Toggle - Top Right Corner -->
68-
<button class="doc-mode-toggle-corner" id="docModeToggle" aria-label="Toggle minimalistic UI" title="Toggle minimalistic documentation view">
69-
<span class="toggle-label">Minimalistic UI</span>
70-
</button>
71108

72109
<section class="hero-section">
73110
<div class="hero-grid-background"></div>

‎_includes/themes/apache/default.html‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -107,36 +107,43 @@
107107

108108
// Dropdown Toggle
109109
(function() {
110-
const dropdowns = document.querySelectorAll('.menu-item.dropdown');
110+
const navItems = document.querySelectorAll('.nav-item.has-dropdown');
111111

112-
dropdowns.forEach(function(dropdown) {
113-
const button = dropdown.querySelector('.menu-link');
112+
navItems.forEach(function(item) {
113+
const button = item.querySelector('.nav-link');
114114

115-
button.addEventListener('click', function(e) {
116-
e.stopPropagation();
117-
118-
// Close all other dropdowns
119-
dropdowns.forEach(function(other) {
120-
if (other !== dropdown) {
121-
other.classList.remove('active');
122-
const otherButton = other.querySelector('.menu-link');
123-
if (otherButton) otherButton.setAttribute('aria-expanded', 'false');
124-
}
115+
if (button) {
116+
button.addEventListener('click', function(e) {
117+
e.preventDefault();
118+
e.stopPropagation();
119+
120+
// Close all other dropdowns
121+
navItems.forEach(function(otherItem) {
122+
if (otherItem !== item) {
123+
otherItem.classList.remove('active');
124+
}
125+
});
126+
127+
// Toggle current dropdown
128+
item.classList.toggle('active');
125129
});
126-
127-
// Toggle current dropdown
128-
const isActive = dropdown.classList.toggle('active');
129-
button.setAttribute('aria-expanded', isActive ? 'true' : 'false');
130-
});
130+
}
131131
});
132132

133133
// Close dropdowns when clicking outside
134134
document.addEventListener('click', function(e) {
135-
if (!e.target.closest('.menu-item.dropdown')) {
136-
dropdowns.forEach(function(dropdown) {
137-
dropdown.classList.remove('active');
138-
const button = dropdown.querySelector('.menu-link');
139-
if (button) button.setAttribute('aria-expanded', 'false');
135+
if (!e.target.closest('.nav-item.has-dropdown')) {
136+
navItems.forEach(function(item) {
137+
item.classList.remove('active');
138+
});
139+
}
140+
});
141+
142+
// Close on escape key
143+
document.addEventListener('keydown', function(e) {
144+
if (e.key === 'Escape') {
145+
navItems.forEach(function(item) {
146+
item.classList.remove('active');
140147
});
141148
}
142149
});

0 commit comments

Comments
 (0)