97 lines
6.2 KiB
TypeScript
97 lines
6.2 KiB
TypeScript
// app/components/Navbar.tsx
|
|
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { useTheme } from 'next-themes';
|
|
import { FaSun, FaMoon } from 'react-icons/fa';
|
|
|
|
export default function Navbar() {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const { theme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setMounted(true), 0);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const toggleMenu = () => setIsExpanded(!isExpanded);
|
|
const closeMenu = () => setIsExpanded(false);
|
|
|
|
return (
|
|
<header className="fixed h-25 bg-white/80 dark:bg-[#0d1117]/80 backdrop-blur-md border-b border-slate-200 dark:border-white/10 left-0 right-0 z-100 transition-colors duration-300">
|
|
<nav className="flex justify-between h-full items-center max-w-450 px-8 mx-auto">
|
|
|
|
<Link href="/" className="group text-slate-900 dark:text-white no-underline flex uppercase font-extrabold items-center tracking-[1px] transition-transform hover:scale-105" onClick={closeMenu}>
|
|
<div className="w-12 h-12 flex justify-center items-center rounded-full bg-[#84c0a0] dark:bg-[#84c0a0]/10 border border-[#84c0a0]/30 shadow-[0_0_15px_rgba(132,192,160,0.2)] group-hover:bg-[#84c0a0]/80 group-hover:dark:bg-[#84c0a0]/20 transition-all duration-300">
|
|
<Image
|
|
src="/assets/logos/logo.svg"
|
|
alt="Wiking"
|
|
width={32}
|
|
height={32}
|
|
className="w-8 h-8"
|
|
/>
|
|
</div>
|
|
<span className="hidden md:block ml-4 text-sm tracking-widest text-[#84c0a0] font-mono transition">
|
|
SODERBERG TECH
|
|
</span>
|
|
</Link>
|
|
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer border-none bg-transparent w-10 h-10 flex items-center justify-center flex-col md:hidden relative group z-50"
|
|
aria-expanded={isExpanded}
|
|
onClick={toggleMenu}
|
|
>
|
|
<span className={`block h-0.5 bg-slate-900 dark:bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'absolute m-0 w-7 rotate-45' : 'w-6 m-0.75'}`}></span>
|
|
<span className={`block h-0.5 bg-slate-900 dark:bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'opacity-0 w-0' : 'w-6 m-0.75'}`}></span>
|
|
<span className={`block h-0.5 bg-slate-900 dark:bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'absolute m-0 w-7 -rotate-45' : 'w-6 m-0.75'}`}></span>
|
|
</button>
|
|
|
|
<div
|
|
className={`fixed top-25 bottom-0 left-0 right-0 transition-all duration-300 md:static md:block md:opacity-100 md:visible md:h-full ${isExpanded ? 'bg-white/90 dark:bg-[#0d1117]/60 backdrop-blur-sm opacity-100 visible' : 'opacity-0 invisible'}`}
|
|
onClick={closeMenu}
|
|
>
|
|
<ul
|
|
// Added md:dark:bg-transparent and md:dark:border-none to clear the mobile dark mode styling on desktop!
|
|
className={`list-none absolute flex flex-col items-center left-0 right-0 m-4 rounded-3xl bg-white/90 dark:bg-[#0d1117]/90 backdrop-blur-2xl md:backdrop-blur-none border border-slate-200 dark:border-white/10 md:border-none md:dark:border-none shadow-2xl md:m-0 md:p-0 md:shadow-none md:static md:flex-row md:w-full md:h-full md:bg-transparent md:dark:bg-transparent md:justify-end gap-2 md:gap-8 transition-all duration-300 ${isExpanded ? 'p-8 translate-y-0 opacity-100' : '-translate-y-4 opacity-0 md:translate-y-0 md:opacity-100'}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{[
|
|
{ name: 'Home', path: '/' },
|
|
{ name: 'Gallery', path: '/gallery' },
|
|
{ name: 'Projects', path: '/projects' },
|
|
{ name: 'Contact', path: '/contact' },
|
|
].map((link) => (
|
|
<li key={link.name} className="w-full md:w-auto">
|
|
<Link
|
|
className="relative flex justify-center items-center text-slate-600 dark:text-gray-300 uppercase font-bold tracking-[2px] text-sm px-4 py-3 rounded-xl hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all duration-300 group overflow-hidden"
|
|
href={link.path}
|
|
onClick={closeMenu}
|
|
>
|
|
<span className="relative z-10">{link.name}</span>
|
|
<span className="absolute bottom-0 left-1/2 w-0 h-0.5 bg-[#84c0a0] transition-all duration-300 group-hover:w-1/2 group-hover:-translate-x-1/2 shadow-[0_0_10px_rgba(132,192,160,0.8)]"></span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
|
|
<li className="w-full md:w-auto flex justify-center mt-4 md:mt-0 md:pl-2">
|
|
{mounted && (
|
|
<button
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
className="p-3 md:p-2.5 rounded-full bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-white hover:bg-slate-200 dark:hover:bg-white/20 transition-all flex items-center justify-center"
|
|
aria-label="Toggle Theme"
|
|
>
|
|
{theme === 'dark' ? <FaSun size={18} /> : <FaMoon size={18} />}
|
|
</button>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
} |