feat: add new UI components and improve existing ones
- Introduced `Field` and `Label` components for better form handling. - Refactored `Input` and `Textarea` components to use forward refs and improved styling. - Updated `PendingSubmitButton` to use the new `Button` component. - Enhanced `Skeleton` component for better layout handling. - Revamped `Toast` component to support live regions and improved accessibility. - Updated sidebar configuration to use typed icons. - Added phase 3 UI boundary checks to prevent usage of deprecated imports. - Implemented new authentication action handler for better cookie management. - Improved setup logic for freelancer accounts with repair functionality.
This commit is contained in:
Poyraz
@@ -0,0 +1,350 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { IconButton } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { PendingLink } from "@/components/ui/pending-link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronUp, LogOut, Menu, Settings } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export type AppShellNavItem = {
|
||||
title: string;
|
||||
href?: string;
|
||||
icon?: LucideIcon;
|
||||
};
|
||||
|
||||
export type AppShellNavGroup = {
|
||||
title: string;
|
||||
items: AppShellNavItem[];
|
||||
};
|
||||
|
||||
type ShellUser = {
|
||||
email: string;
|
||||
displayName: string;
|
||||
shortName: string;
|
||||
avatarUrl: string | null;
|
||||
};
|
||||
|
||||
type AppShellProps = {
|
||||
children: React.ReactNode;
|
||||
homeHref: string;
|
||||
navGroups: AppShellNavGroup[];
|
||||
settingsHref: string;
|
||||
user: ShellUser;
|
||||
progress?: number;
|
||||
};
|
||||
|
||||
export function AppShell({
|
||||
children,
|
||||
homeHref,
|
||||
navGroups,
|
||||
settingsHref,
|
||||
user,
|
||||
progress,
|
||||
}: AppShellProps) {
|
||||
const pathname = usePathname();
|
||||
const [mobileSidebarState, setMobileSidebarState] = useState({
|
||||
open: false,
|
||||
pathname,
|
||||
});
|
||||
const isMobileSidebarOpen =
|
||||
mobileSidebarState.open && mobileSidebarState.pathname === pathname;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[90] focus:rounded-md focus:bg-surface focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
Ana içeriğe geç
|
||||
</a>
|
||||
<div className="flex min-h-screen">
|
||||
<AppSidebar
|
||||
homeHref={homeHref}
|
||||
navGroups={navGroups}
|
||||
pathname={pathname}
|
||||
progress={progress}
|
||||
settingsHref={settingsHref}
|
||||
user={user}
|
||||
className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex"
|
||||
/>
|
||||
|
||||
{isMobileSidebarOpen ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menüyü kapat"
|
||||
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
|
||||
onClick={() => setMobileSidebarState({ open: false, pathname })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<AppSidebar
|
||||
homeHref={homeHref}
|
||||
navGroups={navGroups}
|
||||
pathname={pathname}
|
||||
progress={progress}
|
||||
settingsHref={settingsHref}
|
||||
user={user}
|
||||
className={cn(
|
||||
"fixed inset-y-0 left-0 z-50 transition-transform duration-200 ease-out lg:hidden",
|
||||
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full",
|
||||
)}
|
||||
onNavigate={() => setMobileSidebarState({ open: false, pathname })}
|
||||
/>
|
||||
|
||||
<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-surface/95 px-4 backdrop-blur lg:hidden">
|
||||
<Link href={homeHref} className="flex items-center gap-2 font-semibold">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={120}
|
||||
height={32}
|
||||
className="h-8 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
<IconButton
|
||||
label="Menüyü aç"
|
||||
variant="outline"
|
||||
onClick={() => setMobileSidebarState({ open: true, pathname })}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</header>
|
||||
|
||||
<main id="main-content" className="min-w-0 flex-1 p-4 lg:p-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppSidebar({
|
||||
homeHref,
|
||||
navGroups,
|
||||
pathname,
|
||||
progress,
|
||||
settingsHref,
|
||||
user,
|
||||
onNavigate,
|
||||
className,
|
||||
}: {
|
||||
homeHref: string;
|
||||
navGroups: AppShellNavGroup[];
|
||||
pathname: string;
|
||||
progress?: number;
|
||||
settingsHref: string;
|
||||
user: ShellUser;
|
||||
onNavigate?: () => void;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"flex h-dvh w-[280px] max-w-[82vw] flex-col overflow-hidden border-r border-border bg-surface",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="shrink-0 px-6 py-3">
|
||||
<Link href={homeHref} className="flex w-full items-center justify-center">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={160}
|
||||
height={48}
|
||||
className="h-12 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-border" />
|
||||
|
||||
<nav className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5">
|
||||
{navGroups.map((group, groupIndex) => (
|
||||
<section key={group.title} className={cn(groupIndex > 0 && "mt-6")}>
|
||||
<h2 className="px-2 text-[11px] font-semibold uppercase leading-6 text-muted-foreground">
|
||||
{group.title}
|
||||
</h2>
|
||||
<ul className="mt-2 space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
item.href === homeHref
|
||||
? pathname === homeHref
|
||||
: item.href
|
||||
? pathname === item.href || pathname.startsWith(`${item.href}/`)
|
||||
: false;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<li key={item.href || item.title}>
|
||||
<PendingLink
|
||||
href={item.href || "#"}
|
||||
onClick={onNavigate}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex h-10 items-center gap-3 rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors",
|
||||
"hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
isActive && "bg-primary/10 text-primary",
|
||||
)}
|
||||
showSpinner
|
||||
>
|
||||
{Icon ? <Icon className="h-4 w-4 shrink-0" /> : null}
|
||||
<span className="truncate">{item.title}</span>
|
||||
</PendingLink>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto flex shrink-0 flex-col gap-4 border-t border-border px-4 py-4">
|
||||
{typeof progress === "number" ? <ProgressSummary progress={progress} /> : null}
|
||||
<AccountMenu user={user} settingsHref={settingsHref} onNavigate={onNavigate} />
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressSummary({ progress }: { progress: number }) {
|
||||
const normalizedProgress = Math.max(0, Math.min(100, progress));
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden border-primary/10 bg-primary/5 shadow-none">
|
||||
<CardContent className="space-y-3 p-4">
|
||||
<div className="text-sm font-semibold text-foreground">Proje ilerlemesi</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs font-medium">
|
||||
<span className="text-primary">%{normalizedProgress} tamamlandı</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-primary/10">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-[width] duration-700 ease-out"
|
||||
style={{ width: `${normalizedProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountMenu({
|
||||
user,
|
||||
settingsHref,
|
||||
onNavigate,
|
||||
}: {
|
||||
user: ShellUser;
|
||||
settingsHref: string;
|
||||
onNavigate?: () => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handlePointerDown(event: PointerEvent) {
|
||||
if (!menuRef.current?.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") {
|
||||
setOpen(false);
|
||||
buttonRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={menuRef} className="relative">
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="menu"
|
||||
className="flex w-full items-center gap-3 rounded-md p-2 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
>
|
||||
<UserAvatar user={user} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium text-foreground">{user.displayName}</div>
|
||||
<div className="truncate text-xs text-muted-foreground">{user.email}</div>
|
||||
</div>
|
||||
<ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute bottom-[calc(100%+0.5rem)] left-0 z-[70] w-full rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
|
||||
>
|
||||
<PendingLink
|
||||
href={settingsHref}
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
onNavigate?.();
|
||||
}}
|
||||
className="flex h-9 items-center gap-2 rounded-sm px-3 text-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
showSpinner
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
Ayarlar
|
||||
</PendingLink>
|
||||
<div className="my-1 h-px bg-border" />
|
||||
<form action={signOut}>
|
||||
<button
|
||||
type="submit"
|
||||
role="menuitem"
|
||||
className="flex h-9 w-full items-center gap-2 rounded-sm px-3 text-left text-sm text-destructive hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Çıkış yap
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserAvatar({ user }: { user: ShellUser }) {
|
||||
if (user.avatarUrl) {
|
||||
return (
|
||||
<Image
|
||||
src={user.avatarUrl}
|
||||
alt=""
|
||||
width={36}
|
||||
height={36}
|
||||
className="h-9 w-9 rounded-full object-cover"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
|
||||
{user.shortName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { Button } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarBranding,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarSection,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
SidebarUserProfile,
|
||||
} from "poyraz-ui/organisms";
|
||||
import { AppShell } from "@/components/layout/app-shell";
|
||||
import { sidebarData } from "@/config/sidebar";
|
||||
import { PendingLink } from "@/components/ui/pending-link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronUp, LogOut, Menu, Settings } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
type DashboardShellProps = {
|
||||
children: React.ReactNode;
|
||||
@@ -43,198 +14,9 @@ type DashboardShellProps = {
|
||||
};
|
||||
|
||||
export function DashboardShell({ children, user }: DashboardShellProps) {
|
||||
const pathname = usePathname();
|
||||
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="flex min-h-screen">
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex"
|
||||
/>
|
||||
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
{isMobileSidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
|
||||
onClick={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mobile Sidebar Drawer */}
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
onNavigate={() => setIsMobileSidebarOpen(false)}
|
||||
className={`fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
|
||||
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col min-w-0">
|
||||
<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 justify-center items-center gap-2 font-semibold">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={120}
|
||||
height={32}
|
||||
className="h-8 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-9 w-9 p-0"
|
||||
onClick={() => setIsMobileSidebarOpen(true)}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 p-4 lg:p-8 min-w-0">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppSidebar({
|
||||
pathname,
|
||||
user,
|
||||
onNavigate,
|
||||
className,
|
||||
}: {
|
||||
pathname: string;
|
||||
user: DashboardShellProps["user"];
|
||||
onNavigate?: () => void;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Sidebar
|
||||
variant="bordered"
|
||||
className={cn(
|
||||
"flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-y-0 border-l-0 border-r border-border",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
|
||||
<Link href="/" className="flex w-full items-center justify-center">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={160}
|
||||
height={48}
|
||||
className="h-12 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarSeparator className="mx-0 my-0 w-full" />
|
||||
|
||||
<SidebarContent className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-6 py-6">
|
||||
{sidebarData.map((group, groupIndex) => (
|
||||
<div key={group.title}>
|
||||
<SidebarSection title={group.title} defaultOpen className="mb-0">
|
||||
<SidebarMenu>
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
item.href === "/"
|
||||
? pathname === "/"
|
||||
: item.href
|
||||
? pathname === item.href || pathname.startsWith(item.href + "/")
|
||||
: false;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<SidebarMenuItem
|
||||
key={item.href || item.title}
|
||||
active={isActive}
|
||||
icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
|
||||
className={cn(isActive && "font-semibold")}
|
||||
>
|
||||
<PendingLink
|
||||
href={item.href || "#"}
|
||||
onClick={onNavigate}
|
||||
className="flex w-full items-center justify-between gap-2"
|
||||
showSpinner
|
||||
>
|
||||
{item.title}
|
||||
</PendingLink>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarSection>
|
||||
{groupIndex < sidebarData.length - 1 ? (
|
||||
<SidebarSeparator className="-mx-6 my-5 w-[calc(100%+3rem)]" />
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="mt-auto shrink-0 border-t border-border px-6 py-5">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded-sm text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<SidebarUserProfile
|
||||
name={user.displayName}
|
||||
role={user.email}
|
||||
avatarUrl={user.avatarUrl || undefined}
|
||||
initials={user.shortName}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
<ChevronUp className="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-0"
|
||||
>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="truncate text-sm font-medium text-foreground">
|
||||
{user.displayName}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{user.email}
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<PendingLink href="/settings" onClick={onNavigate} className="gap-2" showSpinner>
|
||||
<Settings className="h-4 w-4" />
|
||||
Ayarlar
|
||||
</PendingLink>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<form action={signOut}>
|
||||
<DropdownMenuItem asChild>
|
||||
<button type="submit" className="w-full gap-2">
|
||||
<LogOut className="h-4 w-4" />
|
||||
Çıkış yap
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</form>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarFooter>
|
||||
|
||||
<SidebarTrigger className="hidden" />
|
||||
</Sidebar>
|
||||
<AppShell homeHref="/" navGroups={sidebarData} settingsHref="/settings" user={user}>
|
||||
{children}
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,35 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { Button, Card, CardContent } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarBranding,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarSection,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
SidebarUserProfile,
|
||||
} from "poyraz-ui/organisms";
|
||||
import { AppShell } from "@/components/layout/app-shell";
|
||||
import { portalSidebarData } from "@/config/portal-sidebar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Activity, ChevronUp, LogOut, Menu, Settings } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
type PortalShellProps = {
|
||||
children: React.ReactNode;
|
||||
@@ -43,223 +15,15 @@ type PortalShellProps = {
|
||||
};
|
||||
|
||||
export function PortalShell({ children, user, progress }: PortalShellProps) {
|
||||
const pathname = usePathname();
|
||||
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="flex min-h-screen">
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
progress={progress}
|
||||
className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex"
|
||||
/>
|
||||
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
{isMobileSidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
|
||||
onClick={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mobile Sidebar Drawer */}
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
progress={progress}
|
||||
onNavigate={() => setIsMobileSidebarOpen(false)}
|
||||
className={`fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
|
||||
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col min-w-0">
|
||||
<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="/portal" className="flex items-center gap-2 font-semibold">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={120}
|
||||
height={32}
|
||||
className="h-8 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-9 w-9 p-0 lg:hidden"
|
||||
onClick={() => setIsMobileSidebarOpen(true)}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 p-4 lg:p-8 min-w-0">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppSidebar({
|
||||
pathname,
|
||||
user,
|
||||
progress = 0,
|
||||
onNavigate,
|
||||
className,
|
||||
}: {
|
||||
pathname: string;
|
||||
user: PortalShellProps["user"];
|
||||
progress?: number;
|
||||
onNavigate?: () => void;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Sidebar
|
||||
variant="bordered"
|
||||
className={cn(
|
||||
"flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-y-0 border-l-0 border-r border-border",
|
||||
className
|
||||
)}
|
||||
<AppShell
|
||||
homeHref="/portal"
|
||||
navGroups={portalSidebarData}
|
||||
settingsHref="/portal/settings"
|
||||
user={user}
|
||||
progress={progress}
|
||||
>
|
||||
<SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
|
||||
<Link href="/portal" className="flex w-full items-center justify-center">
|
||||
<Image
|
||||
src="/logo/blackLogoLong.png"
|
||||
alt="Neta"
|
||||
width={160}
|
||||
height={48}
|
||||
className="h-12 w-auto object-contain"
|
||||
style={{ width: "auto" }}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarSeparator className="mx-0 my-0 w-full" />
|
||||
|
||||
<SidebarContent className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-6 py-6">
|
||||
{portalSidebarData.map((group, groupIndex) => (
|
||||
<div key={group.title}>
|
||||
<SidebarSection title={group.title} defaultOpen className="mb-0">
|
||||
<SidebarMenu>
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
item.href === "/portal"
|
||||
? pathname === "/portal"
|
||||
: item.href
|
||||
? pathname === item.href || pathname.startsWith(item.href + "/")
|
||||
: false;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<SidebarMenuItem
|
||||
key={item.href || item.title}
|
||||
active={isActive}
|
||||
icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
|
||||
className={cn(isActive && "font-semibold")}
|
||||
>
|
||||
<Link
|
||||
href={item.href || "#"}
|
||||
onClick={onNavigate}
|
||||
className="block w-full"
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarSection>
|
||||
{groupIndex < portalSidebarData.length - 1 ? (
|
||||
<SidebarSeparator className="-mx-6 my-5 w-[calc(100%+3rem)]" />
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="mt-auto flex shrink-0 flex-col gap-5 border-t border-border px-6 py-5">
|
||||
<Card className="bg-primary/5 border-primary/10 shadow-none overflow-hidden relative">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="text-sm font-semibold text-foreground relative z-10">Proje İlerlemesi</div>
|
||||
<div className="space-y-1.5 mt-1 relative z-10">
|
||||
<div className="flex items-center justify-between text-xs font-medium">
|
||||
<span className="text-primary">%{progress} Tamamlandı</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-primary/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-700 ease-out relative"
|
||||
style={{ width: `${progress}%` }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 bottom-0 left-0 bg-white/20 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-4 -top-4 w-16 h-16 bg-primary/5 rounded-full blur-xl" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded-sm text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<SidebarUserProfile
|
||||
name={user.displayName}
|
||||
role={user.email}
|
||||
avatarUrl={user.avatarUrl || undefined}
|
||||
initials={user.shortName}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
<ChevronUp className="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-0"
|
||||
>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="truncate text-sm font-medium text-foreground">
|
||||
{user.displayName}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{user.email}
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/portal/settings" onClick={onNavigate} className="gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Ayarlar
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<form action={signOut}>
|
||||
<DropdownMenuItem asChild>
|
||||
<button type="submit" className="w-full gap-2">
|
||||
<LogOut className="h-4 w-4" />
|
||||
Çıkış yap
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</form>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarFooter>
|
||||
|
||||
<SidebarTrigger className="hidden" />
|
||||
</Sidebar>
|
||||
{children}
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user