Skip to content

Commit 9a5cbff

Browse files
devandapaigedevandapaige
committed
header fixed on mobile
resources now an additional dropdown if user want to see them all.
1 parent 83d382a commit 9a5cbff

2 files changed

Lines changed: 88 additions & 67 deletions

File tree

‎public/feed.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link>https://pythonessprogrammer.com</link>
66
<description>Thoughts on technology, accessibility, and the human experience.</description>
77
<language>en</language>
8-
<lastBuildDate>Fri, 14 Nov 2025 19:49:31 GMT</lastBuildDate>
8+
<lastBuildDate>Fri, 14 Nov 2025 20:28:46 GMT</lastBuildDate>
99
<atom:link href="https://pythonessprogrammer.com/feed.xml" rel="self" type="application/rss+xml" />
1010

1111
<item>

‎src/components/Header.tsx‎

Lines changed: 87 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ export default function Header() {
99

1010
const toggleMenu = () => {
1111
setIsMenuOpen(!isMenuOpen)
12+
// Reset resources to collapsed when menu closes
13+
if (isMenuOpen) {
14+
setIsResourcesOpen(false)
15+
}
1216
}
1317

1418
const toggleResources = () => {
@@ -205,7 +209,7 @@ export default function Header() {
205209
role="navigation"
206210
aria-label="Mobile navigation"
207211
>
208-
<div className="flex flex-col space-y-4 p-6">
212+
<div className="flex flex-col space-y-4 px-6 pt-2 pb-6">
209213
<Link
210214
href="/about"
211215
className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
@@ -221,72 +225,89 @@ export default function Header() {
221225
Services
222226
</Link>
223227
<div className="space-y-2">
224-
<div className="text-white font-medium px-2 py-1">Resources</div>
225-
<div className="ml-4 space-y-2">
226-
<Link
227-
href="/resources"
228-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
229-
onClick={() => setIsMenuOpen(false)}
230-
>
231-
All Resources
232-
</Link>
233-
<Link
234-
href="/digital-spring-cleaning"
235-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
236-
onClick={() => setIsMenuOpen(false)}
237-
>
238-
Digital Spring Cleaning
239-
</Link>
240-
<Link
241-
href="/mindful-automation"
242-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
243-
onClick={() => setIsMenuOpen(false)}
244-
>
245-
Mindful Automation
246-
</Link>
247-
<Link
248-
href="/accessibility"
249-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
250-
onClick={() => setIsMenuOpen(false)}
251-
>
252-
Accessibility Legal Guide
253-
</Link>
254-
<Link
255-
href="/back-to-basics"
256-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
257-
onClick={() => setIsMenuOpen(false)}
258-
>
259-
Back to Basics
260-
</Link>
261-
<Link
262-
href="/ai-mythbusting"
263-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
264-
onClick={() => setIsMenuOpen(false)}
265-
>
266-
AI Myth-Busting
267-
</Link>
268-
<Link
269-
href="/vibe-coding-cheatsheet"
270-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
271-
onClick={() => setIsMenuOpen(false)}
272-
>
273-
Vibe Coding Cheatsheet
274-
</Link>
275-
<Link
276-
href="/passwords"
277-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
278-
onClick={() => setIsMenuOpen(false)}
279-
>
280-
Password Security Guide
281-
</Link>
282-
<Link
283-
href="/privacy-pleasure"
284-
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
285-
onClick={() => setIsMenuOpen(false)}
228+
<button
229+
onClick={toggleResources}
230+
className="w-full text-left text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1 flex items-center justify-between"
231+
aria-expanded={isResourcesOpen}
232+
aria-haspopup="true"
233+
>
234+
<span>Resources</span>
235+
<svg
236+
className={`h-4 w-4 transition-transform ${isResourcesOpen ? 'rotate-180' : ''}`}
237+
fill="none"
238+
stroke="currentColor"
239+
viewBox="0 0 24 24"
286240
>
287-
Privacy Pleasure
288-
</Link>
289-
</div>
241+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
242+
</svg>
243+
</button>
244+
{isResourcesOpen && (
245+
<div className="ml-4 space-y-2">
246+
<Link
247+
href="/resources"
248+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
249+
onClick={() => setIsMenuOpen(false)}
250+
>
251+
All Resources
252+
</Link>
253+
<Link
254+
href="/digital-spring-cleaning"
255+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
256+
onClick={() => setIsMenuOpen(false)}
257+
>
258+
Digital Spring Cleaning
259+
</Link>
260+
<Link
261+
href="/mindful-automation"
262+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
263+
onClick={() => setIsMenuOpen(false)}
264+
>
265+
Mindful Automation
266+
</Link>
267+
<Link
268+
href="/accessibility"
269+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
270+
onClick={() => setIsMenuOpen(false)}
271+
>
272+
Accessibility Legal Guide
273+
</Link>
274+
<Link
275+
href="/back-to-basics"
276+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
277+
onClick={() => setIsMenuOpen(false)}
278+
>
279+
Back to Basics
280+
</Link>
281+
<Link
282+
href="/ai-mythbusting"
283+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
284+
onClick={() => setIsMenuOpen(false)}
285+
>
286+
AI Myth-Busting
287+
</Link>
288+
<Link
289+
href="/vibe-coding-cheatsheet"
290+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
291+
onClick={() => setIsMenuOpen(false)}
292+
>
293+
Vibe Coding Cheatsheet
294+
</Link>
295+
<Link
296+
href="/passwords"
297+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
298+
onClick={() => setIsMenuOpen(false)}
299+
>
300+
Password Security Guide
301+
</Link>
302+
<Link
303+
href="/privacy-pleasure"
304+
className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
305+
onClick={() => setIsMenuOpen(false)}
306+
>
307+
Privacy Pleasure
308+
</Link>
309+
</div>
310+
)}
290311
</div>
291312
<Link
292313
href="/blog"

0 commit comments

Comments
 (0)