Skip to content

Commit 2335292

Browse files
festus-sulumetifestus-sulumeti
committed
feat(navbar): redesign navbar with responsive menu and prominent blue CTA button
1 parent 647e008 commit 2335292

1 file changed

Lines changed: 79 additions & 53 deletions

File tree

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,92 @@
1-
import React, { useEffect, useState } from 'react';
2-
import Link from 'next/link';
1+
'use client'
2+
3+
import React from 'react'
4+
import Link from 'next/link'
5+
import Image from 'next/image'
6+
import { Menu, X } from 'lucide-react'
7+
import { Button } from '@/components/ui/button'
38
import Logo from '../Logo/Logo';
49

5-
import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
6-
import LinkButton from '../LinkButton/LinkButton';
7-
import DropdownMenu from './DropdownMenu';
10+
const menuItems = [
11+
{ name: 'Home', to: '/' },
12+
{ name: 'Community', to: '/community' },
13+
{ name: 'Workshops & Events', to: '/events' },
14+
{ name: 'Resources', to: '/resources' },
15+
{ name: 'Contribute', to: '/contribute' },
16+
{ name: 'About Us', to: '/about' },
17+
]
818

9-
export default function Navbar() {
10-
const [screenWidth, setScreenWidth] = useState<number | null>(null);
1119

12-
const breakpoint = 768;
20+
export default function Navbar() {
21+
const [menuState, setMenuState] = React.useState(false)
1322

14-
useEffect(() => {
15-
setScreenWidth(window.innerWidth);
23+
return (
24+
<header>
25+
<nav
26+
data-state={menuState ? 'active' : undefined}
27+
className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
28+
>
29+
<div className="m-auto max-w-5xl px-6">
30+
<div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
31+
<div className="flex w-full justify-between lg:w-auto">
32+
<Link href="/" aria-label="Go home" className="block">
33+
<Logo size={60} />
34+
</Link>
1635

17-
const handleResize = () => setScreenWidth(window.innerWidth);
36+
<button
37+
onClick={() => setMenuState(!menuState)}
38+
aria-label={menuState ? 'Close Menu' : 'Open Menu'}
39+
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
40+
>
41+
<Menu
42+
className={`m-auto size-6 duration-200 ${
43+
menuState ? 'rotate-180 scale-0 opacity-0' : ''
44+
}`}
45+
/>
46+
<X
47+
className={`absolute inset-0 m-auto size-6 duration-200 ${
48+
menuState ? 'rotate-0 scale-100 opacity-100' : '-rotate-180 scale-0 opacity-0'
49+
}`}
50+
/>
51+
</button>
52+
</div>
1853

19-
window.addEventListener('resize', handleResize);
54+
<div
55+
className={`bg-background ${
56+
menuState ? 'block' : 'hidden'
57+
} lg:flex mb-6 w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent`}
58+
>
59+
<div className="lg:pr-4">
60+
<ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
61+
{menuItems.map((item, index) => (
62+
<li key={index}>
63+
<Link
64+
href={item.to}
65+
className="text-black hover:text-accent-foreground block duration-150"
66+
>
67+
{item.name}
68+
</Link>
69+
</li>
70+
))}
71+
</ul>
72+
</div>
73+
74+
<div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
75+
<Button asChild size="sm" className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-md inline-flex justify-center">
76+
<a href="https://bit.ly/joinreactdevske" target="_blank"
77+
rel="noopener noreferrer"
78+
>
79+
Join the Community
80+
</a>
81+
</Button>
82+
83+
</div>
2084

21-
return () => window.removeEventListener('resize', handleResize);
22-
}, []);
2385

24-
if (!screenWidth) return null;
25-
return (
26-
<header className="lg:pl-[49px] fixed top-0 backdrop-blur-md w-full bg-black text-white justify-between bg-opacity-50 z-10">
27-
<nav className="nav py-2 md:py-4 md:pl-5 flex flex-row justify-between md:justify-around px-4 items-center">
28-
<div className="">
29-
<Link href={HOME}>
30-
<a>
31-
<Logo size={60} />
32-
</a>
33-
</Link>
34-
</div>
35-
{screenWidth > breakpoint && (
36-
<div className="">
37-
<ul className="font-montserrat text-base text-white flex flex-row justify-between items-center md:space-x-[30px]">
38-
<a href={ABOUT}>
39-
<li>About us</li>
40-
</a>
41-
<a href={EVENTS}>
42-
<li>Events</li>
43-
</a>
44-
<a href={CONTACT}>
45-
<li>Contact</li>
46-
</a>
47-
</ul>
86+
</div>
4887
</div>
49-
)}
50-
{screenWidth > breakpoint && (
51-
<div>
52-
<LinkButton
53-
className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
54-
href="https://bit.ly/joinreactdevske"
55-
target="_blank"
56-
rel="noopener noreferrer"
57-
>
58-
Join Community
59-
</LinkButton>
60-
</div>
61-
)}
62-
{screenWidth <= breakpoint && <DropdownMenu />}
88+
</div>
6389
</nav>
6490
</header>
65-
);
91+
)
6692
}

0 commit comments

Comments
 (0)