feat: implement dashboard layout shell with responsive sidebar, global dark theme, and navigation pages

This commit is contained in:
Poyraz Avsever
2026-05-08 11:50:18 +03:00
parent 9adc34418e
commit 0233122b6d
13 changed files with 350 additions and 409 deletions
+17
View File
@@ -0,0 +1,17 @@
export default function AnalyticsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Analizler</h1>
<p className="text-muted-foreground mt-2">
Zaman içindeki duygu durumunuzu ve görev istatistiklerinizi inceleyin.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground backdrop-blur-sm">
Gelişmiş veri analiz modülü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function CalendarPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Takvim</h1>
<p className="text-muted-foreground mt-2">
Günlük, haftalık ve aylık programınızı yönetin.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
Takvim görünümü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function DocumentsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Dökümanlar</h1>
<p className="text-muted-foreground mt-2">
Notlarınızı, raporlarınızı ve belgelerinizi saklayın.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
Döküman yönetim modülü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function GoalsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Hedefler</h1>
<p className="text-muted-foreground mt-2">
Kısa ve uzun vadeli hedeflerinizi belirleyin ve ilerlemenizi izleyin.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground backdrop-blur-sm">
Hedef yönetim modülü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function HabitsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Alışkanlıklar</h1>
<p className="text-muted-foreground mt-2">
Günlük alışkanlıklarınızı takip edin ve zinciri kırmayın.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground backdrop-blur-sm">
Alışkanlık takip modülü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function ProjectsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Projeler</h1>
<p className="text-muted-foreground mt-2">
Geniş çaplı projelerinizi ve aşamalarını takip edin.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
Proje yönetim modülü yakında eklenecek.
</div>
</div>
);
}
+17
View File
@@ -0,0 +1,17 @@
export default function TeamPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight text-foreground">Ekip / Kişiler</h1>
<p className="text-muted-foreground mt-2">
Birlikte çalıştığınız kişileri ve takım koordinasyonunu yönetin.
</p>
</div>
</div>
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
Ekip modülü yakında eklenecek.
</div>
</div>
);
}
+18
View File
@@ -64,3 +64,21 @@
transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s;
} }
} }
@layer utilities {
.tiny-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.tiny-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.tiny-scrollbar::-webkit-scrollbar-thumb {
background: theme('colors.primary.DEFAULT' / 30%);
border-radius: 4px;
}
.tiny-scrollbar::-webkit-scrollbar-thumb:hover {
background: theme('colors.primary.DEFAULT' / 60%);
}
}
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 220 KiB

+143 -409
View File
@@ -10,23 +10,14 @@ import {
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { sidebarData } from "@/config/sidebar";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { import { ChevronDown, LogOut, Menu, Settings2 } from "lucide-react";
BookOpenText,
CheckSquare2,
ChevronRight,
LogOut,
Menu,
MessageCircleHeart,
PanelLeftClose,
Settings2,
Sparkles,
} from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useMemo, useState } from "react"; import { useState } from "react";
type DashboardShellProps = { type DashboardShellProps = {
children: React.ReactNode; children: React.ReactNode;
@@ -38,110 +29,23 @@ type DashboardShellProps = {
}; };
}; };
type RouteMeta = {
eyebrow: string;
title: string;
description: string;
};
const routes = [
{
label: "Dashboard",
href: "/",
icon: Sparkles,
description: "Günün ritmi ve genel görünüm",
},
{
label: "Günlük",
href: "/journal",
icon: BookOpenText,
description: "Düşünceler, duygu ve enerji kayıtları",
},
{
label: "Görevler",
href: "/tasks",
icon: CheckSquare2,
description: "Planlar, öncelikler ve aksiyonlar",
},
{
label: "Sohbet",
href: "/chat",
icon: MessageCircleHeart,
description: "AI ile bağlamsal yansıma alanı",
},
{
label: "Ayarlar",
href: "/settings",
icon: Settings2,
description: "Profil, güvenlik ve AI tercihleri",
},
] as const;
const routeMeta: Record<string, RouteMeta> = {
"/": {
eyebrow: "MindSpace Workspace",
title: "Günün Nabzı",
description: "Verilerini, odağını ve kişisel akışını tek panelden yönet.",
},
"/journal": {
eyebrow: "Journal",
title: "Düşünce Akışı",
description: "Bugünün zihinsel yükünü yaz, duygu ve enerji izlerini kaydet.",
},
"/tasks": {
eyebrow: "Tasks",
title: "Aksiyon Katmanı",
description: "Önceliklerini sadeleştir, küçük ama net adımlar belirle.",
},
"/chat": {
eyebrow: "Reflective AI",
title: "Yansıtıcı Sohbet",
description: "Geçmiş kayıtlarınla bağ kuran özel AI eşlikçin burada.",
},
"/settings": {
eyebrow: "Preferences",
title: "Hesap ve Kontroller",
description: "Profilini, güvenliği ve AI ayarlarını tek yerden yönet.",
},
};
export function DashboardShell({ children, user }: DashboardShellProps) { export function DashboardShell({ children, user }: DashboardShellProps) {
const pathname = usePathname(); const pathname = usePathname();
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
const closeMobileSidebar = () => setIsMobileSidebarOpen(false); const closeMobileSidebar = () => setIsMobileSidebarOpen(false);
const currentMeta = useMemo(() => {
if (pathname === "/") return routeMeta["/"];
if (pathname?.startsWith("/journal")) return routeMeta["/journal"];
if (pathname?.startsWith("/tasks")) return routeMeta["/tasks"];
if (pathname?.startsWith("/chat")) return routeMeta["/chat"];
if (pathname?.startsWith("/settings")) return routeMeta["/settings"];
return routeMeta["/"];
}, [pathname]);
const todayLabel = useMemo(
() =>
new Intl.DateTimeFormat("tr-TR", {
weekday: "long",
day: "numeric",
month: "long",
}).format(new Date()),
[],
);
return ( return (
<div className="relative min-h-screen overflow-hidden bg-background text-foreground"> <div className="relative h-screen overflow-hidden bg-background text-foreground">
<AmbientBackdrop /> <AmbientBackdrop />
<div className="relative z-10 flex min-h-screen"> <div className="relative z-10 flex h-screen">
<div className="hidden shrink-0 lg:block lg:w-[320px]"> {/* Desktop Sidebar */}
<div className="sticky top-0 h-screen p-4 pr-0"> <div className="hidden shrink-0 lg:block lg:w-[260px] h-screen border-r border-white/5 bg-[#0A0710]">
<SidebarPanel pathname={pathname} user={user} desktop /> <SidebarPanel pathname={pathname} user={user} desktop />
</div>
</div> </div>
{/* Mobile Sidebar */}
<AnimatePresence> <AnimatePresence>
{isMobileSidebarOpen ? ( {isMobileSidebarOpen ? (
<motion.div <motion.div
@@ -161,7 +65,7 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: -48, opacity: 0 }} exit={{ x: -48, opacity: 0 }}
transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }} transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
className="relative z-10 h-full w-[min(88vw,340px)] p-4 pr-2" className="relative z-10 h-full w-[min(88vw,280px)] bg-[#0A0710]"
> >
<SidebarPanel <SidebarPanel
pathname={pathname} pathname={pathname}
@@ -173,19 +77,28 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
) : null} ) : null}
</AnimatePresence> </AnimatePresence>
<div className="flex min-h-screen min-w-0 flex-1 flex-col"> {/* Main Content Area (Scrollable internally) */}
<header className="sticky top-0 z-30 px-4 pb-3 pt-4 md:px-6 lg:px-8"> <div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
<TopBar {/* Mobile Menu Button */}
user={user} <div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
currentMeta={currentMeta} <div className="flex items-center gap-2">
todayLabel={todayLabel} <Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
onOpenSidebar={() => setIsMobileSidebarOpen(true)} <span className="font-semibold text-sm">Cognis</span>
/> </div>
</header> <Button
type="button"
variant="outline"
size="icon"
className="rounded-lg border-border bg-white/5 h-8 w-8"
onClick={() => setIsMobileSidebarOpen(true)}
>
<Menu className="h-4 w-4" />
</Button>
</div>
<main className="flex-1 px-4 pb-6 md:px-6 md:pb-8 lg:px-8"> <main className="flex-1 p-4 lg:p-8">
<div className="min-h-[calc(100vh-7rem)] rounded-[28px] border border-white/8 bg-[linear-gradient(180deg,rgba(31,23,43,0.84),rgba(18,13,28,0.72))] shadow-[0_30px_120px_rgba(7,5,14,0.45)] ring-1 ring-white/6 backdrop-blur-xl"> <div className="min-h-[calc(100vh-2rem)] rounded-2xl border border-white/5 bg-[linear-gradient(180deg,rgba(31,23,43,0.3),rgba(18,13,28,0.1))] shadow-2xl ring-1 ring-white/5 backdrop-blur-xl">
<div className="h-full p-4 md:p-6 lg:p-8">{children}</div> <div className="h-full p-6 md:p-8">{children}</div>
</div> </div>
</main> </main>
</div> </div>
@@ -206,304 +119,139 @@ function SidebarPanel({
onNavigate?: () => void; onNavigate?: () => void;
}) { }) {
return ( return (
<aside className="flex h-full flex-col overflow-hidden rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.96),rgba(18,13,28,0.88))] shadow-[0_24px_100px_rgba(7,5,14,0.52)] ring-1 ring-white/6 backdrop-blur-xl"> <aside className="flex h-full flex-col overflow-hidden">
<div className="relative overflow-hidden border-b border-white/8 px-5 pb-5 pt-6"> {/* Header / Logo */}
<div className="absolute -left-8 top-0 h-24 w-24 rounded-full bg-primary/20 blur-3xl" /> <div className="pt-8 pb-4 flex justify-center">
<div className="absolute right-0 top-8 h-16 w-16 rounded-full bg-white/10 blur-2xl" /> <Link href="/" className="relative flex items-center justify-center" onClick={onNavigate}>
<Image
<Link href="/" className="relative flex items-center gap-4" onClick={onNavigate}> src="/logo/logo.png"
<div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/5 shadow-[0_12px_40px_rgba(0,0,0,0.22)]"> alt="Cognis Logo"
<Image width={48}
src="/logo/logo.png" height={48}
alt="MindSpace Logo" className="object-contain transition-transform hover:scale-105"
width={40} priority
height={40} />
className="h-10 w-10 object-contain"
priority
/>
</div>
<div className="min-w-0">
<div className="text-[11px] font-medium uppercase tracking-[0.28em] text-primary/80">
Private Space
</div>
<div className="truncate text-xl font-semibold tracking-tight text-foreground">
MindSpace
</div>
<div className="text-sm text-muted-foreground">
Dingin, güvenli ve odaklı çalışma alanı
</div>
</div>
</Link> </Link>
</div> </div>
<div className="px-4 pt-4"> {/* Main Navigation Links */}
<div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3 text-sm text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"> <nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
<div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-primary/70"> {sidebarData.map((group, groupIdx) => (
Focus Layer <div key={groupIdx} className="space-y-1">
</div> <h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
Yaz, gözlemle, planla. Tüm akışı sade ama güçlü bir panelde tut. {group.title}
</div> </h4>
</div> <div className="space-y-1">
{group.items.map((route) => {
const isActive =
route.href === "/"
? pathname === "/"
: route.href
? pathname === route.href || pathname.startsWith(route.href + "/")
: false;
<nav className="flex-1 space-y-2 overflow-y-auto px-4 py-5"> return (
{routes.map((route) => { <Link
const isActive = key={route.href || route.title}
route.href === "/" href={route.href || "#"}
? pathname === "/" className="block w-full"
: pathname === route.href || pathname.startsWith(route.href + "/"); onClick={onNavigate}
return (
<Link
key={route.href}
href={route.href}
className="block"
onClick={onNavigate}
>
<motion.div
whileHover={{ x: 6 }}
transition={{ duration: 0.22, ease: "easeOut" }}
className={cn(
"group relative overflow-hidden rounded-2xl border px-4 py-3.5 transition-all",
isActive
? "border-primary/35 bg-primary/[0.14] shadow-[0_16px_40px_rgba(108,91,176,0.22)]"
: "border-white/8 bg-white/[0.03] hover:border-white/16 hover:bg-white/[0.06]",
)}
>
{isActive ? (
<motion.div
layoutId="dashboard-nav-active"
className="absolute inset-0 rounded-2xl bg-[linear-gradient(135deg,rgba(108,91,176,0.2),rgba(108,91,176,0.08),transparent)]"
/>
) : null}
<div className="relative flex items-center gap-3">
<div
className={cn(
"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border transition-all",
isActive
? "border-primary/30 bg-primary/20 text-primary-foreground shadow-[0_12px_28px_rgba(108,91,176,0.22)]"
: "border-white/8 bg-white/5 text-muted-foreground group-hover:border-primary/20 group-hover:bg-primary/10 group-hover:text-foreground",
)}
> >
<route.icon className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<div <div
className={cn( className={cn(
"flex items-center gap-2 text-sm font-semibold", "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
isActive ? "text-foreground" : "text-foreground/90", isActive
? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
)} )}
> >
{route.label} {route.icon && (
<ChevronRight <route.icon
className={cn( className={cn(
"h-4 w-4 transition-all", "h-[18px] w-[18px] shrink-0 transition-colors",
isActive isActive ? "text-primary-foreground" : "text-muted-foreground/70",
? "translate-x-0 text-primary" )}
: "translate-x-[-4px] opacity-0 group-hover:translate-x-0 group-hover:opacity-100", strokeWidth={isActive ? 2.5 : 2}
)} />
/> )}
<span className="text-[14px]">{route.title}</span>
</div> </div>
<div className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground"> </Link>
{route.description} );
</div> })}
</div>
</div>
</motion.div>
</Link>
);
})}
</nav>
<div className="border-t border-white/8 p-4 pt-5">
<div className="mb-4 rounded-2xl border border-white/8 bg-white/5 p-3">
<div className="flex items-center gap-3">
<Avatar user={user} size="sm" />
<div className="min-w-0">
<div className="truncate text-sm font-semibold text-foreground">
{user.displayName}
</div>
<div className="truncate text-xs text-muted-foreground">
{user.email}
</div>
</div> </div>
</div> </div>
</div> ))}
</nav>
<form action={signOut}> {/* Bottom User Profile & Settings Section */}
<Button <div className="mt-auto p-3">
type="submit" <div className="mb-2">
variant="outline" <Link
href="/settings"
onClick={onNavigate}
className={cn( className={cn(
"h-12 w-full justify-start gap-3 rounded-2xl border-white/10 bg-white/[0.04] px-4 text-sm font-semibold text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition-all", "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
"hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive", pathname.startsWith("/settings")
? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent"
)} )}
> >
<LogOut className="h-4 w-4" /> <Settings2 className="h-[18px] w-[18px] shrink-0" strokeWidth={pathname.startsWith("/settings") ? 2.5 : 2} />
Çıkış Yap <span className="text-[14px]">Ayarlar</span>
</Button> </Link>
</form> </div>
{!desktop ? ( {/* Separator */}
<div className="mt-3 text-center text-[11px] uppercase tracking-[0.24em] text-muted-foreground/60"> <div className="h-[1px] w-full bg-white/5 mb-3" />
Secure workspace
</div> <DropdownMenu>
) : null} <DropdownMenuTrigger asChild>
<button
type="button"
className="flex w-full items-center justify-between gap-2 rounded-md p-2 transition-all hover:bg-white/5 outline-none"
>
<div className="flex items-center gap-2 min-w-0">
<Avatar user={user} size="sm" />
<div className="min-w-0 text-left">
<div className="truncate text-sm font-medium text-foreground leading-tight">
{user.displayName}
</div>
</div>
</div>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
side="right"
align="end"
sideOffset={16}
className="w-56 rounded-lg border border-white/10 bg-[#0A0710] p-1 text-foreground shadow-2xl"
>
<DropdownMenuLabel className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
{user.email}
</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-white/5" />
<form action={signOut}>
<button type="submit" className="w-full">
<DropdownMenuItem className="rounded-md px-2 py-1.5 text-destructive focus:bg-destructive/10 focus:text-destructive cursor-pointer flex items-center gap-2 text-sm">
<LogOut className="h-4 w-4" />
Çıkış Yap
</DropdownMenuItem>
</button>
</form>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
</aside> </aside>
); );
} }
function TopBar({ function Avatar({ user }: { user: DashboardShellProps["user"] }) {
user,
currentMeta,
todayLabel,
onOpenSidebar,
}: {
user: DashboardShellProps["user"];
currentMeta: RouteMeta;
todayLabel: string;
onOpenSidebar: () => void;
}) {
return (
<div className="overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.82),rgba(18,13,28,0.68))] px-4 py-4 shadow-[0_20px_80px_rgba(7,5,14,0.3)] ring-1 ring-white/6 backdrop-blur-xl md:px-5">
<div className="flex items-start justify-between gap-4">
<div className="flex min-w-0 items-start gap-3">
<Button
type="button"
variant="outline"
size="icon-lg"
className="mt-0.5 shrink-0 rounded-2xl border-white/10 bg-white/[0.04] lg:hidden"
onClick={onOpenSidebar}
>
<Menu className="h-5 w-5" />
</Button>
<div className="min-w-0">
<div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.26em] text-primary/80">
{currentMeta.eyebrow}
</div>
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<h1 className="text-2xl font-semibold tracking-tight text-foreground md:text-[2rem]">
{currentMeta.title}
</h1>
<div className="rounded-full border border-white/8 bg-white/[0.04] px-3 py-1 text-xs font-medium text-muted-foreground">
{todayLabel}
</div>
</div>
<p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
{currentMeta.description}
</p>
</div>
</div>
<div className="hidden items-center gap-3 md:flex">
<div className="rounded-full border border-white/8 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-muted-foreground">
Protected session
</div>
<UserMenu user={user} />
</div>
</div>
<div className="mt-4 flex items-center justify-end md:hidden">
<UserMenu user={user} compact />
</div>
</div>
);
}
function UserMenu({
user,
compact = false,
}: {
user: DashboardShellProps["user"];
compact?: boolean;
}) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className={cn(
"group flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] p-1.5 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition-all outline-none hover:border-white/16 hover:bg-white/[0.07]",
compact ? "w-full justify-between" : "min-w-[220px]",
)}
>
<div className="flex items-center gap-3">
<Avatar user={user} />
<div className={cn("min-w-0", compact ? "max-w-[160px]" : "max-w-[180px]")}>
<div className="truncate text-sm font-semibold text-foreground">
{user.displayName}
</div>
<div className="truncate text-xs text-muted-foreground">
{user.email}
</div>
</div>
</div>
<div className="mr-1 flex h-8 w-8 items-center justify-center rounded-xl bg-white/5 text-muted-foreground transition-all group-hover:bg-white/10 group-hover:text-foreground">
<PanelLeftClose className="h-4 w-4 rotate-[-90deg]" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-72 rounded-2xl border border-white/10 bg-[linear-gradient(180deg,rgba(31,23,43,0.98),rgba(18,13,28,0.94))] p-2 text-foreground shadow-[0_20px_60px_rgba(7,5,14,0.45)] backdrop-blur-xl"
>
<DropdownMenuLabel className="px-3 py-2 text-foreground">
<div className="flex items-center gap-3">
<Avatar user={user} />
<div className="min-w-0">
<div className="truncate text-sm font-semibold">{user.displayName}</div>
<div className="truncate text-xs font-normal text-muted-foreground">
{user.email}
</div>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-white/8" />
<DropdownMenuItem asChild className="rounded-xl px-3 py-2.5">
<Link href="/settings" className="flex items-center gap-2">
<Settings2 className="h-4 w-4" />
Ayarlar
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="rounded-xl px-3 py-2.5">
<Link href="/journal" className="flex items-center gap-2">
<BookOpenText className="h-4 w-4" />
Günlük Alanı
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator className="bg-white/8" />
<div className="px-3 py-2 text-xs leading-5 text-muted-foreground">
Bu menü profil ve hızlı erişim içindir. Ana çıkış aksiyonu soldaki
panelin altındadır.
</div>
</DropdownMenuContent>
</DropdownMenu>
);
}
function Avatar({
user,
size = "md",
}: {
user: DashboardShellProps["user"];
size?: "sm" | "md";
}) {
const dimensions = size === "sm" ? "h-11 w-11 text-sm" : "h-12 w-12 text-sm";
if (user.avatarUrl) { if (user.avatarUrl) {
return ( return (
<div <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary/20 bg-primary/10">
className={cn(
"overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-[0_12px_36px_rgba(0,0,0,0.18)]",
dimensions,
)}
>
{/* Avatar URL dış kaynaklı olduğu için bu önizlemede native img kullanıyoruz. */}
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={user.avatarUrl} src={user.avatarUrl}
@@ -515,12 +263,7 @@ function Avatar({
} }
return ( return (
<div <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/30 bg-primary/20 font-semibold text-primary-foreground text-sm">
className={cn(
"flex items-center justify-center rounded-2xl border border-white/10 bg-[linear-gradient(135deg,rgba(108,91,176,0.32),rgba(255,255,255,0.08))] font-semibold text-foreground shadow-[0_12px_36px_rgba(0,0,0,0.18)]",
dimensions,
)}
>
{user.shortName} {user.shortName}
</div> </div>
); );
@@ -529,17 +272,8 @@ function Avatar({
function AmbientBackdrop() { function AmbientBackdrop() {
return ( return (
<> <>
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(108,91,176,0.18),transparent_34%),radial-gradient(circle_at_85%_14%,rgba(255,255,255,0.08),transparent_18%),radial-gradient(circle_at_bottom_right,rgba(108,91,176,0.14),transparent_28%)]" /> <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(108,91,176,0.1),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(108,91,176,0.1),transparent_30%)]" />
<motion.div
animate={{ x: [0, 28, 0], y: [0, -20, 0] }}
transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
className="pointer-events-none absolute left-[-8rem] top-10 h-64 w-64 rounded-full bg-primary/10 blur-[120px]"
/>
<motion.div
animate={{ x: [0, -32, 0], y: [0, 24, 0] }}
transition={{ duration: 17, repeat: Infinity, ease: "easeInOut" }}
className="pointer-events-none absolute bottom-0 right-[-8rem] h-72 w-72 rounded-full bg-white/5 blur-[130px]"
/>
</> </>
); );
} }
+70
View File
@@ -0,0 +1,70 @@
import {
Activity,
BarChart3,
BookOpenText,
Calendar,
CheckSquare2,
FileText,
FolderKanban,
MessageCircleHeart,
Sparkles,
Target,
Users,
Wallet,
Building2,
Tags,
} from "lucide-react";
export type SidebarNavItem = {
title: string;
href?: string;
icon?: any;
items?: SidebarNavItem[]; // For nested (accordion) links later
};
export type SidebarNavGroup = {
title: string;
items: SidebarNavItem[];
};
export const sidebarData: SidebarNavGroup[] = [
{
title: "GENEL BAKIŞ",
items: [
{ title: "Dashboard", href: "/", icon: Sparkles },
{ title: "Takvim", href: "/calendar", icon: Calendar },
{ title: "Analizler", href: "/analytics", icon: BarChart3 },
],
},
{
title: "YÖNETİM",
items: [
{ title: "Görevler", href: "/tasks", icon: CheckSquare2 },
{ title: "Projeler", href: "/projects", icon: FolderKanban },
{ title: "Dökümanlar", href: "/documents", icon: FileText },
{ title: "Finans", href: "/finance", icon: Wallet },
],
},
{
title: "KİŞİSEL",
items: [
{ title: "Günlük", href: "/journal", icon: BookOpenText },
{ title: "Alışkanlıklar", href: "/habits", icon: Activity },
{ title: "Hedefler", href: "/goals", icon: Target },
],
},
{
title: "ORGANİZASYON",
items: [
{ title: "Ekip", href: "/team", icon: Users },
{ title: "Müşteriler", href: "/clients", icon: Building2 },
{ title: "Etiketler", href: "/tags", icon: Tags },
],
},
{
title: "AI ASİSTAN",
items: [
{ title: "Sohbet", href: "/chat", icon: MessageCircleHeart },
],
},
];