179 lines
6.9 KiB
TypeScript
179 lines
6.9 KiB
TypeScript
"use client";
|
||
|
||
import { useSession, signOut } from "next-auth/react";
|
||
import Link from "next/link";
|
||
import { usePathname } from "next/navigation";
|
||
import LanguageSwitcher from "./LanguageSwitcher";
|
||
|
||
export default function Sidebar({ dict, lang }: { dict: any; lang: string }) {
|
||
const { data: session } = useSession();
|
||
const pathname = usePathname();
|
||
const role = session?.user?.role ?? "";
|
||
const name = session?.user?.name ?? "";
|
||
const email = session?.user?.email ?? "";
|
||
|
||
const navItems = [
|
||
{
|
||
section: dict.sidebar?.general || "GENEL",
|
||
items: [
|
||
{ href: `/${lang}/dashboard`, label: dict.dashboard?.title || "Dashboard", icon: HomeIcon, roles: ["SUPER_ADMIN", "DOMAIN_ADMIN"] },
|
||
{ href: `/${lang}/dashboard/mail`, label: dict.sidebar?.mailClient || "Mail Client", icon: InboxIcon, roles: ["SUPER_ADMIN", "DOMAIN_ADMIN"] },
|
||
],
|
||
},
|
||
{
|
||
section: dict.sidebar?.management || "YÖNETİM",
|
||
items: [
|
||
{ href: `/${lang}/dashboard/domains`, label: dict.domains?.title || "Domainler", icon: GlobeIcon, roles: ["SUPER_ADMIN"] },
|
||
{ href: `/${lang}/dashboard/users`, label: dict.sidebar?.users || "Kullanıcılar", icon: UsersIcon, roles: ["SUPER_ADMIN"] },
|
||
{ href: `/${lang}/dashboard/mappings`, label: dict.sidebar?.mappings || "Eşleştirmeler", icon: LinkIcon, roles: ["SUPER_ADMIN"] },
|
||
{ href: `/${lang}/dashboard/mailboxes`, label: dict.sidebar?.mailboxes || "Mail Hesapları", icon: MailIcon, roles: ["SUPER_ADMIN", "DOMAIN_ADMIN"] },
|
||
{ href: `/${lang}/dashboard/logs`, label: dict.sidebar?.logs || "Loglar", icon: ListIcon, roles: ["SUPER_ADMIN"] },
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<aside className="sidebar">
|
||
<div className="sidebar-logo">
|
||
<div className="sidebar-logo-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div className="sidebar-logo-text">AyrisMail</div>
|
||
<div className="sidebar-logo-sub">Central</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav className="sidebar-nav">
|
||
{navItems.map((group) => {
|
||
const visibleItems = group.items.filter((item) => item.roles.includes(role));
|
||
if (visibleItems.length === 0) return null;
|
||
|
||
return (
|
||
<div key={group.section}>
|
||
<div className="sidebar-section">{group.section}</div>
|
||
{visibleItems.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className={`nav-item ${pathname === item.href ? "active" : ""}`}
|
||
>
|
||
<item.icon />
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
);
|
||
})}
|
||
</nav>
|
||
|
||
<div className="sidebar-footer">
|
||
<LanguageSwitcher currentLang={lang} />
|
||
|
||
<div className="user-info" style={{ marginBottom: "12px" }}>
|
||
<div className="user-avatar">{name[0]?.toUpperCase()}</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div className="user-name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name}</div>
|
||
<div className="user-role">{role === "SUPER_ADMIN" ? (dict.superAdmin || "Süper Admin") : (dict.domainAdmin || "Domain Admin")}</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
className="btn btn-ghost"
|
||
style={{ width: "100%", justifyContent: "center", fontSize: "12px" }}
|
||
onClick={async () => {
|
||
await fetch("/api/mail/auth", { method: "DELETE" });
|
||
await signOut({ redirect: false });
|
||
window.location.href = `/${lang}/login`;
|
||
}}
|
||
>
|
||
<LogOutIcon />
|
||
{dict.sidebar?.logout || "Çıkış Yap"}
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
// Icons
|
||
function HomeIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||
<polyline points="9 22 9 12 15 12 15 22" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function GlobeIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||
<path d="M2 12h20" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function UsersIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function MailIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function InboxIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
||
<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function LogOutIcon() {
|
||
return (
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||
<polyline points="16 17 21 12 16 7" />
|
||
<line x1="21" x2="9" y1="12" y2="12" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function LinkIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||
</svg>
|
||
);
|
||
}
|
||
function ListIcon() {
|
||
return (
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="8" x2="21" y1="6" y2="6" />
|
||
<line x1="8" x2="21" y1="12" y2="12" />
|
||
<line x1="8" x2="21" y1="18" y2="18" />
|
||
<line x1="3" x2="3.01" y1="6" y2="6" />
|
||
<line x1="3" x2="3.01" y1="12" y2="12" />
|
||
<line x1="3" x2="3.01" y1="18" y2="18" />
|
||
</svg>
|
||
);
|
||
}
|