feat: implement dashboard layout shell with responsive sidebar, global dark theme, and navigation pages
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
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 |
@@ -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}>
|
||||||
|
|
||||||
<Link href="/" className="relative flex items-center gap-4" onClick={onNavigate}>
|
|
||||||
<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)]">
|
|
||||||
<Image
|
<Image
|
||||||
src="/logo/logo.png"
|
src="/logo/logo.png"
|
||||||
alt="MindSpace Logo"
|
alt="Cognis Logo"
|
||||||
width={40}
|
width={48}
|
||||||
height={40}
|
height={48}
|
||||||
className="h-10 w-10 object-contain"
|
className="object-contain transition-transform hover:scale-105"
|
||||||
priority
|
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) => {
|
||||||
<nav className="flex-1 space-y-2 overflow-y-auto px-4 py-5">
|
|
||||||
{routes.map((route) => {
|
|
||||||
const isActive =
|
const isActive =
|
||||||
route.href === "/"
|
route.href === "/"
|
||||||
? pathname === "/"
|
? pathname === "/"
|
||||||
: pathname === route.href || pathname.startsWith(route.href + "/");
|
: route.href
|
||||||
|
? pathname === route.href || pathname.startsWith(route.href + "/")
|
||||||
|
: false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={route.href}
|
key={route.href || route.title}
|
||||||
href={route.href}
|
href={route.href || "#"}
|
||||||
className="block"
|
className="block w-full"
|
||||||
onClick={onNavigate}
|
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
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border transition-all",
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
|
||||||
isActive
|
isActive
|
||||||
? "border-primary/30 bg-primary/20 text-primary-foreground shadow-[0_12px_28px_rgba(108,91,176,0.22)]"
|
? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
|
||||||
: "border-white/8 bg-white/5 text-muted-foreground group-hover:border-primary/20 group-hover:bg-primary/10 group-hover:text-foreground",
|
: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<route.icon className="h-5 w-5" />
|
{route.icon && (
|
||||||
</div>
|
<route.icon
|
||||||
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div
|
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center gap-2 text-sm font-semibold",
|
"h-[18px] w-[18px] shrink-0 transition-colors",
|
||||||
isActive ? "text-foreground" : "text-foreground/90",
|
isActive ? "text-primary-foreground" : "text-muted-foreground/70",
|
||||||
)}
|
|
||||||
>
|
|
||||||
{route.label}
|
|
||||||
<ChevronRight
|
|
||||||
className={cn(
|
|
||||||
"h-4 w-4 transition-all",
|
|
||||||
isActive
|
|
||||||
? "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">
|
|
||||||
{route.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className="border-t border-white/8 p-4 pt-5">
|
{/* Bottom User Profile & Settings Section */}
|
||||||
<div className="mb-4 rounded-2xl border border-white/8 bg-white/5 p-3">
|
<div className="mt-auto p-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="mb-2">
|
||||||
<Avatar user={user} size="sm" />
|
<Link
|
||||||
<div className="min-w-0">
|
href="/settings"
|
||||||
<div className="truncate text-sm font-semibold text-foreground">
|
onClick={onNavigate}
|
||||||
{user.displayName}
|
|
||||||
</div>
|
|
||||||
<div className="truncate text-xs text-muted-foreground">
|
|
||||||
{user.email}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action={signOut}>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
variant="outline"
|
|
||||||
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"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
<Settings2 className="h-[18px] w-[18px] shrink-0" strokeWidth={pathname.startsWith("/settings") ? 2.5 : 2} />
|
||||||
|
<span className="text-[14px]">Ayarlar</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separator */}
|
||||||
|
<div className="h-[1px] w-full bg-white/5 mb-3" />
|
||||||
|
|
||||||
|
<DropdownMenu>
|
||||||
|
<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" />
|
<LogOut className="h-4 w-4" />
|
||||||
Çıkış Yap
|
Çıkış Yap
|
||||||
</Button>
|
</DropdownMenuItem>
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
</DropdownMenuContent>
|
||||||
{!desktop ? (
|
</DropdownMenu>
|
||||||
<div className="mt-3 text-center text-[11px] uppercase tracking-[0.24em] text-muted-foreground/60">
|
|
||||||
Secure workspace
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</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]"
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user