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>
|
||||
);
|
||||
}
|
||||
50
components/layouts/sideBarItem.tsx
Normal file
50
components/layouts/sideBarItem.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import {Props} from "@/types/types";
|
||||
import Button from "@/components/common/button";
|
||||
|
||||
export default function SidebarItem({ item }: Props) {
|
||||
const [open, setOpen] = useState(item.title === "Overview");
|
||||
|
||||
return (
|
||||
<div className=" border-b border-slate-800 ">
|
||||
<Button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex w-full items-center justify-between
|
||||
px-3 py-4 hover:bg-slate-900"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<item.icon size={16} />
|
||||
|
||||
<span className="text-base">{item.title}</span>
|
||||
</div>
|
||||
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{open && item.children.length > 0 && (
|
||||
<div className="ml-4 border-l border-slate-700 pl-2 pb-1">
|
||||
{item.children.map((child: any) => (
|
||||
<Link
|
||||
key={child.title}
|
||||
href={child.href}
|
||||
className="group mt-2 flex items-center gap-3 rounded-lg px-2 py-2 text-slate-300 hover:bg-teal-500/20 hover:text-teal-400"
|
||||
>
|
||||
<child.icon size={16} />
|
||||
|
||||
<span>{child.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
components/layouts/sidebar.tsx
Normal file
82
components/layouts/sidebar.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { SIDEBAR_ITEMS } from "@/constants/constant";
|
||||
import SidebarItem from "./sideBarItem";
|
||||
import {
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
ChevronDown,
|
||||
ChevronsLeft,
|
||||
} from "lucide-react";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
export default function Sidebar() {
|
||||
const { data: session } = useSession();
|
||||
console.log("Session data ",session?.user?.name)
|
||||
console.log("Session data ",session?.user?.email)
|
||||
return (
|
||||
<aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto [scrollbar-color:#1b2a40_#071321] [scrollbar-width:thin]">
|
||||
<div className="flex items-center gap-2 px-2 pt-2 pb-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg
|
||||
bg-[#3de0c4] font-bold text-[#05111d] text-sm">
|
||||
K
|
||||
</div>
|
||||
<span className="text-sm font-bold tracking-tight text-white">
|
||||
KA<span className="text-[#3de0c4]">FM</span>
|
||||
</span>
|
||||
</div>
|
||||
<hr className="border-[#142538]" />
|
||||
<div className="mx-4 my-4 flex rounded-xl
|
||||
bg-[#091624] p-2 border border-[#142538]">
|
||||
<button className="flex flex-1
|
||||
items-center justify-center gap-1 rounded-lg bg-[#3de0c4] py-1.5 text-xs
|
||||
text-black font-bold shadow-sm">
|
||||
<Activity size={14} />
|
||||
Operations
|
||||
</button>
|
||||
<button className="flex flex-1 items-center justify-center gap-1
|
||||
rounded-lg py-1 text-xs text-slate-400 font-medium hover:text-white transition-colors">
|
||||
<ShieldCheck size={14} />
|
||||
Admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="px-2 pt-2 pb-1 text-xs font-semibold uppercase
|
||||
tracking-wider text-slate-500">
|
||||
Tenant runtime
|
||||
</p>
|
||||
<div className="py-2">
|
||||
{SIDEBAR_ITEMS.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.title}
|
||||
item={item}
|
||||
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-3 pb-2 pt-1
|
||||
border-t border-[#0f1f30]">
|
||||
<button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
|
||||
<ChevronsLeft size={16} />
|
||||
Minimise menu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Profile Card Section */}
|
||||
<div className="m-3 mt-0 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2.5 items-center">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-600/50 bg-[#0d2430] text-cyan-400 text-xs font-bold">
|
||||
DT
|
||||
</div>
|
||||
<div className="min-w-0 leading-tight">
|
||||
<h4 className="font-semibold text-xs text-white truncate">{session?.user?.name}</h4>
|
||||
<p className="text-[11px] text-slate-500 truncate">
|
||||
{session?.user?.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14}
|
||||
onClick={() => signOut({ callbackUrl: "/login" })} />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user