chore: update dependencies and configuration for Tailwind CSS
- Added "@tailwindcss/postcss" to package.json dependencies. - Updated "tailwindcss" version to "^4.3.0" in package.json. - Modified postcss.config.mjs to use "@tailwindcss/postcss" instead of "tailwindcss". - Changed darkMode configuration in tailwind.config.ts to a string format.
This commit is contained in:
Poyraz Avsever
+168
-174
@@ -1,191 +1,185 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react"
|
||||
import Image from "next/image"
|
||||
import { motion, useReducedMotion } from "framer-motion"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { ReactNode } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
BarChart3,
|
||||
CalendarDays,
|
||||
Kanban,
|
||||
Wallet,
|
||||
} from "lucide-react";
|
||||
import { Typography } from "poyraz-ui/atoms";
|
||||
|
||||
type AuthPageShellProps = {
|
||||
title: string
|
||||
description: string
|
||||
imageSrc: string
|
||||
imageAlt: string
|
||||
imageSide: "left" | "right"
|
||||
form: ReactNode
|
||||
secondaryAction?: ReactNode
|
||||
footer: ReactNode
|
||||
}
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
imageSide?: "left" | "right";
|
||||
form: ReactNode;
|
||||
secondaryAction?: ReactNode;
|
||||
footer: ReactNode;
|
||||
};
|
||||
|
||||
const highlights = [
|
||||
{ label: "Müşteriler", icon: Kanban },
|
||||
{ label: "Takvim", icon: CalendarDays },
|
||||
{ label: "Finans", icon: Wallet },
|
||||
{ label: "Raporlar", icon: BarChart3 },
|
||||
];
|
||||
|
||||
export function AuthPageShell({
|
||||
title,
|
||||
description,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
imageSide,
|
||||
form,
|
||||
secondaryAction,
|
||||
footer,
|
||||
}: AuthPageShellProps) {
|
||||
const reducedMotion = useReducedMotion()
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
const stackVariants = {
|
||||
hidden: {},
|
||||
show: {
|
||||
transition: reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.15,
|
||||
},
|
||||
const fadeUp = {
|
||||
initial: reducedMotion ? false : { opacity: 0, y: 18 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: {
|
||||
duration: reducedMotion ? 0 : 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
}
|
||||
|
||||
const itemVariants = {
|
||||
hidden: reducedMotion ? { opacity: 1 } : { opacity: 0, y: 24 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: reducedMotion ? 0 : 0.65,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const formPanel = (
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? 36 : -36 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.8,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="flex flex-1 items-center justify-center p-8 w-full lg:w-1/2"
|
||||
>
|
||||
<motion.div
|
||||
variants={stackVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="w-full max-w-sm space-y-8"
|
||||
>
|
||||
<motion.div variants={itemVariants} className="text-center lg:text-left">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2">{description}</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>{form}</motion.div>
|
||||
|
||||
{secondaryAction ? (
|
||||
<motion.div variants={itemVariants}>{secondaryAction}</motion.div>
|
||||
) : null}
|
||||
|
||||
<motion.div variants={itemVariants}>{footer}</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
|
||||
const imagePanel = (
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? -42 : 42 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.95,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="hidden lg:flex lg:w-1/2 p-4 relative"
|
||||
>
|
||||
<div className="relative w-full h-full overflow-hidden rounded-2xl">
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { scale: 1.08, filter: "blur(6px)" }}
|
||||
animate={{ scale: 1, filter: "blur(0px)" }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 1.2,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<Image src={imageSrc} alt={imageAlt} fill className="object-cover" priority />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 0.9 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.9, delay: reducedMotion ? 0 : 0.1 }}
|
||||
className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/30"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, scale: 0.92 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 1.1,
|
||||
delay: reducedMotion ? 0 : 0.2,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_50%_18%,rgba(255,255,255,0.18),transparent_46%)]"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 26 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.85,
|
||||
delay: reducedMotion ? 0 : 0.32,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute bottom-0 left-0 right-0 flex items-center justify-center pointer-events-none z-10"
|
||||
>
|
||||
<motion.div
|
||||
animate={
|
||||
reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
y: [0, -8, 0],
|
||||
scale: [1, 1.02, 1],
|
||||
}
|
||||
}
|
||||
transition={
|
||||
reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}
|
||||
}
|
||||
className="relative drop-shadow-2xl flex items-center gap-4"
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo.png"
|
||||
alt="MindSpace Logo"
|
||||
width={256}
|
||||
height={128}
|
||||
className="object-contain w-64 h-auto"
|
||||
priority
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative isolate flex min-h-screen overflow-hidden bg-background">
|
||||
{imageSide === "left" ? imagePanel : null}
|
||||
{formPanel}
|
||||
{imageSide === "right" ? imagePanel : null}
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<div className="grid min-h-screen grid-cols-1 lg:grid-cols-[minmax(0,1fr)_480px]">
|
||||
<motion.section
|
||||
initial={reducedMotion ? false : { opacity: 0, x: -28 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.75,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="relative hidden overflow-hidden bg-primary text-primary-foreground lg:flex lg:flex-col lg:justify-between"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-20 bg-[linear-gradient(rgba(255,255,255,.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.18)_1px,transparent_1px)] bg-size-[32px_32px]" />
|
||||
<div className="relative z-10 flex items-center gap-4 p-10">
|
||||
<Image
|
||||
src="/logo/LogoWithBg.png"
|
||||
alt="Cognis logo"
|
||||
width={64}
|
||||
height={64}
|
||||
className="h-16 w-16 rounded-sm object-cover border border-red-500"
|
||||
priority
|
||||
/>
|
||||
<div>
|
||||
<div className="text-lg font-bold leading-none">Cognis</div>
|
||||
<div className="mt-1 text-sm text-primary-foreground/75">
|
||||
Freelancer OS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 1.4 }}
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 -z-10",
|
||||
"bg-[radial-gradient(circle_at_top,rgba(108,91,176,0.12),transparent_42%)]",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
<div className="relative z-10 px-10">
|
||||
<motion.div {...fadeUp}>
|
||||
<Typography
|
||||
variant="h1"
|
||||
className="max-w-2xl text-5xl leading-[1.02] text-primary-foreground"
|
||||
>
|
||||
Freelancer işlerini, müşterilerini ve finansını tek yerde yönet.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="lead"
|
||||
className="mt-6 max-w-xl text-primary-foreground/78"
|
||||
>
|
||||
Cognis, günlük operasyonunu, projelerini, side projectlerini ve
|
||||
temel finans durumunu sade raporlarla takip etmen için
|
||||
tasarlanır.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.55, delay: 0.16 }}
|
||||
className="mt-10 grid max-w-xl grid-cols-2 gap-3"
|
||||
>
|
||||
{highlights.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex items-center gap-3 rounded-sm border border-white/18 bg-white/10 px-4 py-3 text-sm font-medium backdrop-blur"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="w-full relative z-10 p-10 text-sm text-primary-foreground/78">
|
||||
<span>Açık kaynak ve self-host edilebilir.</span>{" "}
|
||||
<Link
|
||||
href="https://github.com/poyrazavsever/cognis"
|
||||
className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> üzerinden ulaşabilirsin, </span>
|
||||
<Link
|
||||
href="https://ui.poyrazavsever.com"
|
||||
className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
Poyraz UI <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> ile tasarlandı, </span>
|
||||
<Link
|
||||
href="https://poyrazavsever.com"
|
||||
className="inline-flex items-center gap-1 font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
Poyraz Avsever <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> tarafından kodlandı.</span>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<section className="flex min-h-screen items-center justify-center px-6 py-8 lg:px-12">
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.6, delay: 0.08 }}
|
||||
className="w-full max-w-sm"
|
||||
>
|
||||
<div className="mb-8 flex justify-center lg:hidden">
|
||||
<Image
|
||||
src="/logo/LogoWithBg.png"
|
||||
alt="Cognis logo"
|
||||
width={84}
|
||||
height={84}
|
||||
className="h-20 w-20 rounded-sm object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden space-y-2 text-center lg:block lg:text-left">
|
||||
<Typography variant="h2" className="text-3xl">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="muted">{description}</Typography>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
{form}
|
||||
{secondaryAction}
|
||||
{footer}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Button } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
Sidebar,
|
||||
SidebarBranding,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarSection,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
SidebarUserProfile,
|
||||
} from "poyraz-ui/organisms";
|
||||
import { sidebarData } from "@/config/sidebar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { LogOut, Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
type DashboardShellProps = {
|
||||
children: React.ReactNode;
|
||||
@@ -32,312 +35,137 @@ type DashboardShellProps = {
|
||||
export function DashboardShell({ children, user }: DashboardShellProps) {
|
||||
const pathname = usePathname();
|
||||
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
|
||||
const [isClockFullScreen, setIsClockFullScreen] = useState(false);
|
||||
|
||||
const closeMobileSidebar = () => setIsMobileSidebarOpen(false);
|
||||
|
||||
return (
|
||||
<div className="relative h-screen overflow-hidden bg-background text-foreground">
|
||||
<AmbientBackdrop />
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="flex min-h-screen">
|
||||
<aside className="hidden w-[280px] shrink-0 border-r border-border bg-background lg:block">
|
||||
<AppSidebar pathname={pathname} user={user} />
|
||||
</aside>
|
||||
|
||||
{/* Full Screen Clock Overlay */}
|
||||
<AnimatePresence>
|
||||
{isClockFullScreen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="fixed inset-0 z-[100] bg-[#0A0710] flex flex-col items-center justify-center cursor-pointer"
|
||||
onClick={() => setIsClockFullScreen(false)}
|
||||
>
|
||||
<div className="absolute top-8 right-8 text-muted-foreground text-sm tracking-widest uppercase">
|
||||
Click anywhere to close
|
||||
</div>
|
||||
<FullScreenClock />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="relative z-10 flex h-screen">
|
||||
{/* Desktop Sidebar */}
|
||||
<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 onClockClick={() => setIsClockFullScreen(true)} />
|
||||
</div>
|
||||
|
||||
{/* Mobile Sidebar */}
|
||||
<AnimatePresence>
|
||||
{isMobileSidebarOpen ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex lg:hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menüyü kapat"
|
||||
className="absolute inset-0 bg-background/75 backdrop-blur-sm"
|
||||
onClick={closeMobileSidebar}
|
||||
{isMobileSidebarOpen ? (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menuyu kapat"
|
||||
className="absolute inset-0 bg-overlay"
|
||||
onClick={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
<aside className="relative h-full w-[min(88vw,300px)] border-r border-border bg-background">
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
onNavigate={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: -48, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: -48, opacity: 0 }}
|
||||
transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="relative z-10 h-full w-[min(88vw,280px)] bg-[#0A0710]"
|
||||
>
|
||||
<SidebarPanel
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
onNavigate={closeMobileSidebar}
|
||||
onClockClick={() => setIsClockFullScreen(true)}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</aside>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Main Content Area (Scrollable internally) */}
|
||||
<div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
|
||||
<span className="font-semibold text-sm">Cognis</span>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
|
||||
<Link href="/" className="flex items-center gap-2 font-semibold">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-xs text-primary-foreground">
|
||||
C
|
||||
</span>
|
||||
Cognis
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-lg border-border bg-white/5 h-8 w-8"
|
||||
className="h-9 w-9 p-0"
|
||||
onClick={() => setIsMobileSidebarOpen(true)}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 p-6 lg:p-10">
|
||||
{children}
|
||||
</main>
|
||||
<main className="flex-1 p-4 lg:p-8">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarPanel({
|
||||
function AppSidebar({
|
||||
pathname,
|
||||
user,
|
||||
desktop = false,
|
||||
onNavigate,
|
||||
onClockClick,
|
||||
}: {
|
||||
pathname: string;
|
||||
user: DashboardShellProps["user"];
|
||||
desktop?: boolean;
|
||||
onNavigate?: () => void;
|
||||
onClockClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<aside className="flex h-full flex-col overflow-hidden">
|
||||
{/* Header / Time Badge */}
|
||||
<div className="pt-8 pb-2 px-4 flex justify-start">
|
||||
<ClockBadge onClick={onClockClick} />
|
||||
</div>
|
||||
<Sidebar variant="bordered" className="h-full rounded-none border-0">
|
||||
<SidebarHeader>
|
||||
<SidebarBranding
|
||||
title="Cognis"
|
||||
subtitle="Freelancer OS"
|
||||
logo={
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-sm font-bold text-primary-foreground">
|
||||
C
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</SidebarHeader>
|
||||
|
||||
{/* Main Navigation Links */}
|
||||
<nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
|
||||
{sidebarData.map((group, groupIdx) => (
|
||||
<div key={groupIdx} className="space-y-1">
|
||||
<h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
|
||||
{group.title}
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{group.items.map((route) => {
|
||||
<SidebarContent className="tiny-scrollbar">
|
||||
{sidebarData.map((group) => (
|
||||
<SidebarSection key={group.title} title={group.title} defaultOpen>
|
||||
<SidebarMenu>
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
route.href === "/"
|
||||
item.href === "/"
|
||||
? pathname === "/"
|
||||
: route.href
|
||||
? pathname === route.href ||
|
||||
pathname.startsWith(route.href + "/")
|
||||
: item.href
|
||||
? pathname === item.href || pathname.startsWith(item.href + "/")
|
||||
: false;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={route.href || route.title}
|
||||
href={route.href || "#"}
|
||||
className="block w-full"
|
||||
onClick={onNavigate}
|
||||
<SidebarMenuItem
|
||||
key={item.href || item.title}
|
||||
active={isActive}
|
||||
icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
|
||||
className={cn(isActive && "font-semibold")}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
|
||||
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",
|
||||
)}
|
||||
<Link
|
||||
href={item.href || "#"}
|
||||
onClick={onNavigate}
|
||||
className="block w-full"
|
||||
>
|
||||
{route.icon && (
|
||||
<route.icon
|
||||
className={cn(
|
||||
"h-[18px] w-[18px] shrink-0 transition-colors",
|
||||
isActive
|
||||
? "text-primary-foreground"
|
||||
: "text-muted-foreground/70",
|
||||
)}
|
||||
strokeWidth={isActive ? 2.5 : 2}
|
||||
/>
|
||||
)}
|
||||
<span className="text-[14px]">{route.title}</span>
|
||||
</div>
|
||||
</Link>
|
||||
{item.title}
|
||||
</Link>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</SidebarMenu>
|
||||
</SidebarSection>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarContent>
|
||||
|
||||
{/* Bottom User Profile & Settings Section */}
|
||||
<div className="mt-auto p-3">
|
||||
<div className="mb-2">
|
||||
<Link
|
||||
href="/settings"
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
|
||||
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>
|
||||
<SidebarSeparator />
|
||||
|
||||
{/* 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} />
|
||||
<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" />
|
||||
<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"
|
||||
onClick={async () => {
|
||||
await signOut();
|
||||
}}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Çıkış Yap
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function ClockBadge({ onClick }: { onClick: () => void }) {
|
||||
const [time, setTime] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
|
||||
};
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (!time) {
|
||||
return <div className="h-[34px] w-[100px] bg-white/5 animate-pulse rounded-sm" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="border border-white/5 bg-[#150F1D] px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground hover:text-foreground hover:border-primary/50 transition-colors rounded-sm flex items-center gap-2 group outline-none"
|
||||
>
|
||||
<Clock className="h-3.5 w-3.5 text-primary/70 group-hover:text-primary transition-colors" />
|
||||
<span suppressHydrationWarning>{time}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function FullScreenClock() {
|
||||
const [time, setTime] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
|
||||
};
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="text-[12vw] font-black tracking-tighter text-primary/90 drop-shadow-[0_0_60px_rgba(108,91,176,0.3)] select-none tabular-nums">
|
||||
<span suppressHydrationWarning>{time || "..."}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ user }: { user: DashboardShellProps["user"] }) {
|
||||
if (user.avatarUrl) {
|
||||
return (
|
||||
<div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary/20 bg-primary/10">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={user.avatarUrl}
|
||||
alt={user.displayName}
|
||||
className="h-full w-full object-cover"
|
||||
<SidebarFooter className="space-y-3">
|
||||
<SidebarUserProfile
|
||||
name={user.displayName}
|
||||
role={user.email}
|
||||
avatarUrl={user.avatarUrl || undefined}
|
||||
initials={user.shortName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<form action={signOut}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
className="h-10 w-full justify-start gap-2"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Cikis yap
|
||||
</Button>
|
||||
</form>
|
||||
</SidebarFooter>
|
||||
|
||||
return (
|
||||
<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">
|
||||
{user.shortName}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AmbientBackdrop() {
|
||||
return (
|
||||
<>
|
||||
<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%)]" />
|
||||
</>
|
||||
<SidebarTrigger className="hidden" />
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user