dionjoshualobo/ArtSplash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed the navbar

Browse Source
This commit is contained in:
ShovinDsouza
2026-02-21 19:16:48 +05:30
parent 63d3a88ae5
commit 243ab9e073
5 changed files with 68 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/Navbar.tsx
View File

@@ -18,9 +18,9 @@ export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-200">
<nav className="fixed top-0 left-0 right-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800">
{/* Announcement Bar */}
<div className="bg-black text-white overflow-hidden">
<div className="bg-lime-400 text-black overflow-hidden">
<div className="whitespace-nowrap py-2 text-xs tracking-widest flex">
{/* Track */}
@@ -48,7 +48,7 @@ export default function Navbar() {
{/* Logo */}
<Link href="/" className="flex items-center gap-2 group">
<Diamond className="w-6 h-6 text-lime-400 group-hover:rotate-12 transition-transform" />
<span className="text-xl font-bold tracking-tight">ARTSPLASH</span>
<span className="text-xl font-bold tracking-tight text-white">ARTSPLASH</span>
</Link>
{/* Desktop Navigation */}
@@ -57,7 +57,7 @@ export default function Navbar() {
<Link
key={link.href}
href={link.href}
className="text-sm font-medium tracking-wide text-zinc-700 hover:text-black transition-colors relative group"
className="text-sm font-medium tracking-wide text-zinc-300 hover:text-white transition-colors relative group"
>
{link.label}
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-lime-400 group-hover:w-full transition-all duration-300" />
@@ -78,7 +78,7 @@ export default function Navbar() {
{/* Mobile Menu Button */}
<button
onClick={() => setIsOpen(!isOpen)}
className="lg:hidden p-2 hover:bg-zinc-100 rounded-lg transition-colors"
className="lg:hidden p-2 hover:bg-zinc-800 rounded-lg transition-colors text-white"
aria-label="Toggle menu"
>
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
@@ -93,7 +93,7 @@ export default function Navbar() {
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="lg:hidden bg-white border-t border-zinc-200"
className="lg:hidden bg-zinc-950 border-t border-zinc-800"
>
<div className="px-4 py-6 space-y-4">
{navLinks.map((link) => (
@@ -101,7 +101,7 @@ export default function Navbar() {
key={link.href}
href={link.href}
onClick={() => setIsOpen(false)}
className="block text-lg font-medium text-zinc-700 hover:text-black hover:pl-2 transition-all"
className="block text-lg font-medium text-zinc-300 hover:text-white hover:pl-2 transition-all"
>
{link.label}
</Link>