sean/gunbuilder-next-tailwind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed theming and color

Browse Source
This commit is contained in:
Sean Strawsburg
2025-06-29 13:43:46 -04:00
parent 6aa87ea11d
commit 14b25e7359
7 changed files with 780 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.tsx
+25 -52
View File
@@ -3,42 +3,38 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import ThemeSwitcher from './ThemeSwitcher';
import { MagnifyingGlassIcon, UserCircleIcon } from '@heroicons/react/24/outline';
export default function Navbar() {
const pathname = usePathname();
const navItems = [
{ href: '/', label: 'Parts Catalog' },
{ href: '/parts', label: 'Parts Catalog' },
{ href: '/build', label: 'Build Checklist' },
{ href: '/builds', label: 'My Builds' },
];
return (
<nav className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<div className="flex items-center">
<Link href="/" className="flex items-center space-x-2">
<div className="w-8 h-8 bg-primary-600 dark:bg-primary-500 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-lg">🔫</span>
</div>
<span className="text-xl font-bold text-neutral-900 dark:text-white">
Pew Builder
</span>
</Link>
</div>
<>
{/* Top Bar */}
<div className="w-full bg-[#4B6516] text-white h-10 flex items-center justify-between px-4 sm:px-8">
<span className="font-bold text-lg tracking-tight">Pew Builder</span>
<UserCircleIcon className="h-7 w-7 text-white opacity-80" />
</div>
{/* Navigation Links */}
<div className="hidden md:flex items-center space-x-8">
{/* Subnav */}
<nav className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-14">
{/* Left: Nav Links */}
<div className="flex items-center space-x-6">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
className={`px-2 py-1 rounded-md text-sm font-medium transition-colors ${
pathname === item.href
? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300'
: 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700'
? 'text-primary font-semibold underline underline-offset-4'
: 'text-neutral-700 dark:text-neutral-200 hover:text-primary'
}`}
>
{item.label}
@@ -46,41 +42,18 @@ export default function Navbar() {
))}
</div>
{/* Theme Switcher */}
{/* Right: Sign In + Search */}
<div className="flex items-center space-x-4">
<ThemeSwitcher />
{/* Mobile menu button */}
<button className="md:hidden p-2 rounded-md text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700">
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
<Link href="/signin" className="btn btn-sm btn-ghost text-sm font-medium">
Sign In
</Link>
<button className="p-2 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors">
<MagnifyingGlassIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-200" />
</button>
<ThemeSwitcher />
</div>
</div>
</div>
{/* Mobile menu */}
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.href}
href={item.href}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
isActive
? 'bg-blue-600 text-white'
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
}`}
>
{item.label}
</Link>
);
})}
</div>
</div>
</nav>
</nav>
</>
);
}