Skip to content

Commit 92a5914

Browse files
mirkobrombinmirkobrombin
committed
fix: menu color
1 parent 6718182 commit 92a5914

File tree

1 file changed

+183
-81
lines changed

1 file changed

+183
-81
lines changed

‎src/components/Header.astro‎

Lines changed: 183 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,199 @@
22
import { Icon } from "astro-icon/components";
33
---
44

5-
<header class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--md-sys-color-surface)]/80 shadow-sm">
6-
<div class="container mx-auto h-16 flex items-center justify-between px-4">
7-
<a href="/" class="flex items-center gap-2">
8-
<img src="/assets/logo.svg" alt="Bottles Logo" class="h-8 on-light" />
9-
<img src="/assets/logo-dark.svg" alt="Bottles Logo" class="h-8 on-dark" />
10-
</a>
5+
<header
6+
class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--md-sys-color-surface)]/80 shadow-sm"
7+
>
8+
<div class="container mx-auto h-16 flex items-center justify-between px-4">
9+
<a href="/" class="flex items-center gap-2">
10+
<img
11+
src="/assets/logo.svg"
12+
alt="Bottles Logo"
13+
class="h-8 on-light"
14+
/>
15+
<img
16+
src="/assets/logo-dark.svg"
17+
alt="Bottles Logo"
18+
class="h-8 on-dark"
19+
/>
20+
</a>
1121

12-
<nav class="hidden md:flex items-center gap-1 ml-6">
13-
<a href="/appstore" class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Apps</a>
14-
<a href="/database" class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Database</a>
15-
<a href="/blog" class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Blog</a>
16-
<a href="https://github.com/orgs/bottlesdevs/discussions" class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Forums</a>
17-
<a href="/funding" class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Funding</a>
18-
</nav>
22+
<nav class="hidden md:flex items-center gap-1 ml-6">
23+
<a
24+
href="/appstore"
25+
class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
26+
>Apps</a
27+
>
28+
<a
29+
href="/database"
30+
class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
31+
>Database</a
32+
>
33+
<a
34+
href="/blog"
35+
class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
36+
>Blog</a
37+
>
38+
<a
39+
href="https://github.com/orgs/bottlesdevs/discussions"
40+
class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
41+
>Forums</a
42+
>
43+
<a
44+
href="/funding"
45+
class="px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
46+
>Funding</a
47+
>
48+
</nav>
1949

20-
<div class="hidden md:flex items-center gap-3">
21-
<a href="https://docs.usebottles.com/" class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg">
22-
<Icon name="material-symbols:book-2-outline" class="w-5 h-5 mr-1" />
23-
<span class="hidden lg:inline">Docs</span>
24-
</a>
25-
<a href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3ABug" class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg">
26-
<Icon name="material-symbols:bug-report-outline" class="w-5 h-5 mr-1" />
27-
<span class="hidden lg:inline">Bug report</span>
28-
</a>
29-
<a href="https://hosted.weblate.org/engage/bottles/" class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg">
30-
<Icon name="material-symbols:translate" class="w-5 h-5 mr-1" />
31-
<span class="hidden lg:inline">Help translating</span>
32-
</a>
33-
<a href="/download" class="md-filled-button flex items-center gap-1 text-lg">
34-
<Icon name="material-symbols:cloud-download" class="w-5 h-5" />
35-
<span class="hidden lg:inline">Get Bottles</span>
36-
</a>
37-
</div>
50+
<div class="hidden md:flex items-center gap-3">
51+
<a
52+
href="https://docs.usebottles.com/"
53+
class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg"
54+
>
55+
<Icon
56+
name="material-symbols:book-2-outline"
57+
class="w-5 h-5 mr-1"
58+
/>
59+
<span class="hidden lg:inline">Docs</span>
60+
</a>
61+
<a
62+
href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3ABug"
63+
class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg"
64+
>
65+
<Icon
66+
name="material-symbols:bug-report-outline"
67+
class="w-5 h-5 mr-1"
68+
/>
69+
<span class="hidden lg:inline">Bug report</span>
70+
</a>
71+
<a
72+
href="https://hosted.weblate.org/engage/bottles/"
73+
class="flex items-center px-4 py-2 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors text-lg"
74+
>
75+
<Icon name="material-symbols:translate" class="w-5 h-5 mr-1" />
76+
<span class="hidden lg:inline">Help translating</span>
77+
</a>
78+
<a
79+
href="/download"
80+
class="md-filled-button flex items-center gap-1 text-lg"
81+
>
82+
<Icon name="material-symbols:cloud-download" class="w-5 h-5" />
83+
<span class="hidden lg:inline">Get Bottles</span>
84+
</a>
85+
</div>
3886

39-
<!-- Mobile Hamburger Menu -->
40-
<div class="md:hidden flex items-center">
41-
<button id="hamburger" aria-label="Toggle menu" class="z-50 focus:outline-hidden">
42-
<div class="w-8 h-8 flex flex-col justify-center items-center space-y-1 relative">
43-
<span class="block w-6 h-0.5 bg-[var(--md-sys-color-on-surface)] transition-all duration-300 ease-in-out" id="line1"></span>
44-
<span class="block w-6 h-0.5 bg-[var(--md-sys-color-on-surface)] transition-all duration-300 ease-in-out" id="line2"></span>
87+
<!-- Mobile Hamburger Menu -->
88+
<div class="md:hidden flex items-center">
89+
<button
90+
id="hamburger"
91+
aria-label="Toggle menu"
92+
class="z-50 focus:outline-hidden"
93+
>
94+
<div
95+
class="w-8 h-8 flex flex-col justify-center items-center space-y-1 relative"
96+
>
97+
<span
98+
class="block w-6 h-0.5 bg-[var(--md-sys-color-on-surface)] transition-all duration-300 ease-in-out"
99+
id="line1"></span>
100+
<span
101+
class="block w-6 h-0.5 bg-[var(--md-sys-color-on-surface)] transition-all duration-300 ease-in-out"
102+
id="line2"></span>
103+
</div>
104+
</button>
45105
</div>
46-
</button>
47106
</div>
48-
</div>
49107

50-
<!-- Mobile Menu Overlay -->
51-
<div id="mobileMenu" class="md:hidden bg-[var(--md-sys-color-surface)] fixed inset-0 z-40 transform translate-x-full transition-transform">
52-
<div class="flex flex-col items-center justify-center min-h-screen space-y-6">
53-
<a href="/appstore" class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Apps</a>
54-
<a href="/database" class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Database</a>
55-
<a href="/blog" class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Blog</a>
56-
<a href="https://forum.usebottles.com/" class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Forums</a>
57-
<a href="/funding" class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">Funding</a>
58-
<a href="https://docs.usebottles.com/" class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">
59-
<Icon name="material-symbols:book-2-outline" class="w-6 h-6 mr-1" /> Docs
60-
</a>
61-
<a href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3ABug" class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">
62-
<Icon name="material-symbols:bug-report-outline" class="w-6 h-6 mr-1" />
63-
Bug report
64-
</a>
65-
<a href="https://hosted.weblate.org/engage/bottles/" class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors">
66-
<Icon name="material-symbols:translate" class="w-6 h-6 mr-1" /> Help translating
67-
</a>
68-
<a href="/download" class="md-filled-button flex items-center gap-1">
69-
<Icon name="material-symbols:cloud-download" class="w-6 h-6" /> Get Bottles
70-
</a>
108+
<!-- Mobile Menu Overlay -->
109+
<div
110+
id="mobileMenu"
111+
class="md:hidden bg-[var(--md-sys-color-surface)] fixed inset-0 z-40 transform translate-x-full transition-transform"
112+
>
113+
<div
114+
class="bg-black flex flex-col items-center justify-center min-h-screen space-y-6"
115+
>
116+
<a
117+
href="/appstore"
118+
class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
119+
>Apps</a
120+
>
121+
<a
122+
href="/database"
123+
class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
124+
>Database</a
125+
>
126+
<a
127+
href="/blog"
128+
class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
129+
>Blog</a
130+
>
131+
<a
132+
href="https://forum.usebottles.com/"
133+
class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
134+
>Forums</a
135+
>
136+
<a
137+
href="/funding"
138+
class="text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
139+
>Funding</a
140+
>
141+
<a
142+
href="https://docs.usebottles.com/"
143+
class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
144+
>
145+
<Icon
146+
name="material-symbols:book-2-outline"
147+
class="w-6 h-6 mr-1"
148+
/> Docs
149+
</a>
150+
<a
151+
href="https://github.com/bottlesdevs/Bottles/issues?q=is%3Aissue+label%3ABug"
152+
class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
153+
>
154+
<Icon
155+
name="material-symbols:bug-report-outline"
156+
class="w-6 h-6 mr-1"
157+
/>
158+
Bug report
159+
</a>
160+
<a
161+
href="https://hosted.weblate.org/engage/bottles/"
162+
class="flex items-center text-xl px-6 py-3 rounded-full hover:bg-[var(--md-sys-color-primary)]/10 transition-colors"
163+
>
164+
<Icon name="material-symbols:translate" class="w-6 h-6 mr-1" /> Help
165+
translating
166+
</a>
167+
<a
168+
href="/download"
169+
class="md-filled-button flex items-center gap-1"
170+
>
171+
<Icon name="material-symbols:cloud-download" class="w-6 h-6" /> Get
172+
Bottles
173+
</a>
174+
</div>
71175
</div>
72-
</div>
73176
</header>
74177

75178
<script>
76-
const hamburger = document.getElementById("hamburger");
77-
const mobileMenu = document.getElementById("mobileMenu");
78-
const line1 = document.getElementById("line1");
79-
const line2 = document.getElementById("line2");
179+
const hamburger = document.getElementById("hamburger");
180+
const mobileMenu = document.getElementById("mobileMenu");
181+
const line1 = document.getElementById("line1");
182+
const line2 = document.getElementById("line2");
80183

81-
let menuOpen = false;
184+
let menuOpen = false;
82185

83-
hamburger!.addEventListener("click", () => {
84-
menuOpen = !menuOpen;
85-
if (menuOpen) {
86-
mobileMenu!.classList.remove("translate-x-full");
87-
mobileMenu!.classList.add("translate-x-0");
88-
line1!.classList.add("rotate-45");
89-
line2!.classList.add("-rotate-45", "-translate-y-1.5");
90-
} else {
91-
mobileMenu!.classList.remove("translate-x-0");
92-
mobileMenu!.classList.add("translate-x-full");
93-
line1!.classList.remove("rotate-45");
94-
line2!.classList.remove("-rotate-45", "-translate-y-1.5");
95-
}
96-
});
186+
hamburger!.addEventListener("click", () => {
187+
menuOpen = !menuOpen;
188+
if (menuOpen) {
189+
mobileMenu!.classList.remove("translate-x-full");
190+
mobileMenu!.classList.add("translate-x-0");
191+
line1!.classList.add("rotate-45");
192+
line2!.classList.add("-rotate-45", "-translate-y-1.5");
193+
} else {
194+
mobileMenu!.classList.remove("translate-x-0");
195+
mobileMenu!.classList.add("translate-x-full");
196+
line1!.classList.remove("rotate-45");
197+
line2!.classList.remove("-rotate-45", "-translate-y-1.5");
198+
}
199+
});
97200
</script>
98-

0 commit comments

Comments
 (0)