Project structure changes ad new files added in dashboard folders
This commit is contained in:
83
components/layouts/navbar.tsx
Normal file
83
components/layouts/navbar.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin } from 'lucide-react';
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
/*
|
||||
- 'fixed top-0 right-0 left-64' anchors the navbar to the top of the screen,
|
||||
leaving room exactly for your 64-width sidebar.
|
||||
- 'bg-[#071321]' matches your master UI background.
|
||||
- 'h-16' gives it a consistent height.
|
||||
*/
|
||||
<header className="fixed top-0 right-0 left-64 z-30 flex h-16 items-center justify-between border-b border-[#142538]/50 bg-[#071321] px-8">
|
||||
|
||||
{/* Left Group */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Company Selector */}
|
||||
<div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-3 py-1.5 text-sm font-semibold text-[#10b981] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
|
||||
<span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>
|
||||
<span className="font-semibold">Apple One</span>
|
||||
<ChevronDown className="h-3.5 w-3.5 text-[#10b981]" />
|
||||
</div>
|
||||
|
||||
{/* Location Selector */}
|
||||
<div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
|
||||
<MapPin className="h-4 w-4 text-gray-500 shrink-0" />
|
||||
<span className="whitespace-nowrap">
|
||||
Apple One — <span className="text-[#cbd5e1] font-semibold">HQ Tower</span>
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative w-60">
|
||||
<Search className="absolute left-4 top-2.5 h-4 w-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search requests, equipment, met"
|
||||
className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Utilities */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Tour */}
|
||||
<button className="flex items-center gap-2 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#14253d]">
|
||||
<HelpCircle className="h-4 w-4 text-gray-400" />
|
||||
<span>Tour</span>
|
||||
</button>
|
||||
|
||||
{/* Language */}
|
||||
<div className="flex items-center gap-1.5 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-[#cbd5e1] cursor-pointer hover:bg-[#14253d]">
|
||||
<Globe className="h-4 w-4 text-gray-400" />
|
||||
<span>English</span>
|
||||
<ChevronDown className="h-4 w-4 text-gray-500" />
|
||||
</div>
|
||||
|
||||
{/* Live Indicator */}
|
||||
<div className="flex items-center gap-2 px-1 text-sm font-bold text-[#10b981] tracking-wider">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#10b981]"></span>
|
||||
<span className="text-xs font-bold text-gray-400">LIVE</span>
|
||||
</div>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<button className="flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] text-gray-400 hover:text-white transition">
|
||||
<Sun className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<div className="relative flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] cursor-pointer hover:bg-[#14253d] transition">
|
||||
<Bell className="h-4 w-4 text-gray-400" />
|
||||
<span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#ef4444] text-[9px] font-bold text-white">
|
||||
8
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Profile Avatar */}
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white cursor-pointer hover:opacity-90 transition">
|
||||
DH
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user