feat(frontend): improve responsive navigation shell
This commit is contained in:
@@ -19,10 +19,13 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
const { t, lang, setLanguage } = useTranslation()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false)
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
|
||||
const [user, setUser] = useState<any>(null)
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const isFa = lang === "fa"
|
||||
const isDarkMode =
|
||||
theme === "dark" ||
|
||||
@@ -61,6 +64,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
setIsDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
@@ -88,6 +92,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = isFa ? "en" : "fa"
|
||||
|
||||
if (setLanguage) {
|
||||
setLanguage(newLang)
|
||||
} else {
|
||||
@@ -98,7 +103,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-8 py-6 backdrop-blur-md transition-colors dark:border-slate-800/80 dark:bg-slate-900/70">
|
||||
<header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-4 py-4 backdrop-blur-md transition-colors md:px-8 md:py-6 dark:border-slate-800/80 dark:bg-slate-900/70">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@@ -108,19 +113,40 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex cursor-pointer items-center gap-2" onClick={() => navigate("/")}>
|
||||
<span className="relative z-20 flex items-center gap-2 text-xl font-bold tracking-tight text-slate-900 dark:text-slate-50">
|
||||
<Command className="h-7 w-7" />
|
||||
{t.title || "Qlockify"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-2"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<span className="relative z-20 flex items-center gap-2 text-lg font-bold tracking-tight text-slate-900 md:text-xl dark:text-slate-50">
|
||||
<Command className="h-6 w-6 md:h-7 md:w-7" />
|
||||
Qlockify.ir
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Mobile navbar: theme toggle + notification bell */}
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
title={isDarkMode ? t.lightMode || "Light Mode" : t.darkMode || "Dark Mode"}
|
||||
>
|
||||
{isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
||||
</button>
|
||||
|
||||
{user && <NotificationBell />}
|
||||
</div>
|
||||
|
||||
{/* Desktop navbar: keep the old controls here */}
|
||||
<div className="hidden items-center gap-4 md:flex">
|
||||
{user && <WorkspaceSelector />}
|
||||
|
||||
{user ? (
|
||||
<>
|
||||
<NotificationBell />
|
||||
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen((current) => !current)}
|
||||
@@ -141,8 +167,10 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div
|
||||
dir="rtl"
|
||||
className={`absolute ${isFa ? "left-0" : "right-0"} z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
|
||||
dir={isFa ? "rtl" : "ltr"}
|
||||
className={`absolute ${
|
||||
isFa ? "left-0" : "right-0"
|
||||
} z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
|
||||
>
|
||||
<div className="mb-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800">
|
||||
<p className="truncate text-sm font-semibold text-slate-800 dark:text-slate-400">
|
||||
@@ -151,6 +179,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
: user.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/profile")
|
||||
@@ -166,8 +195,16 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
onClick={toggleTheme}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
<span>{isDarkMode ? (t.lightMode || "Light Mode") : (t.darkMode || "Dark Mode")}</span>
|
||||
{isDarkMode ? (
|
||||
<Sun className="h-4 w-4" />
|
||||
) : (
|
||||
<Moon className="h-4 w-4" />
|
||||
)}
|
||||
<span>
|
||||
{isDarkMode
|
||||
? t.lightMode || "Light Mode"
|
||||
: t.darkMode || "Dark Mode"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -178,7 +215,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
<span>{isFa ? "English" : "فارسی"}</span>
|
||||
</button>
|
||||
|
||||
<div className="my-1 h-px bg-slate-200 dark:bg-slate-800"></div>
|
||||
<div className="my-1 h-px bg-slate-200 dark:bg-slate-800" />
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -197,6 +234,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
) : (
|
||||
<>
|
||||
<SettingsMenu />
|
||||
|
||||
<Button
|
||||
onClick={() => navigate("/auth")}
|
||||
className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
@@ -210,7 +248,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
|
||||
{showLogoutModal && (
|
||||
<div
|
||||
className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4"
|
||||
className="fixed inset-0 z-[80] flex items-center justify-center bg-black/50 px-4"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
>
|
||||
<div
|
||||
@@ -220,9 +258,12 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
|
||||
{t.confirmLogoutTitle || "Confirm Logout"}
|
||||
</h2>
|
||||
|
||||
<p className="mb-6 text-slate-600 dark:text-slate-400">
|
||||
{t.confirmLogoutMessage || "Are you sure you want to log out of your account?"}
|
||||
{t.confirmLogoutMessage ||
|
||||
"Are you sure you want to log out of your account?"}
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -231,6 +272,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleLogout}
|
||||
@@ -244,4 +286,4 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,187 +1,405 @@
|
||||
import { useState } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import {
|
||||
import { useEffect, useState } from "react"
|
||||
import { NavLink, useNavigate } from "react-router-dom"
|
||||
import {
|
||||
Users,
|
||||
LayoutDashboard,
|
||||
LayoutDashboard,
|
||||
X,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
PanelRightClose,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
PanelRightClose,
|
||||
PanelRightOpen,
|
||||
Briefcase,
|
||||
ChartColumn,
|
||||
Clock3,
|
||||
History,
|
||||
Tags,
|
||||
} from 'lucide-react';
|
||||
import { useOptionalWorkspace } from '../context/WorkspaceContext';
|
||||
import { useTranslation } from '../hooks/useTranslation';
|
||||
import { canWorkspace, WORKSPACE_LOGS_VIEW } from '../lib/permissions';
|
||||
User,
|
||||
Globe,
|
||||
LogOut,
|
||||
LogIn,
|
||||
} from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useOptionalWorkspace } from "../context/WorkspaceContext"
|
||||
import { useTranslation } from "../hooks/useTranslation"
|
||||
import { canWorkspace, WORKSPACE_LOGS_VIEW } from "../lib/permissions"
|
||||
import { WorkspaceSelector } from "./WorkspaceSelector"
|
||||
import { SettingsMenu } from "./SettingsMenu"
|
||||
import { Button } from "./ui/button"
|
||||
import { getUserProfile, logoutUser } from "../api/users"
|
||||
import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
|
||||
|
||||
type SidebarProps = {
|
||||
mobileOpen?: boolean;
|
||||
onMobileClose?: () => void;
|
||||
};
|
||||
mobileOpen?: boolean
|
||||
onMobileClose?: () => void
|
||||
}
|
||||
|
||||
export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
const { t, lang } = useTranslation();
|
||||
const workspaceContext = useOptionalWorkspace();
|
||||
const activeWorkspace = workspaceContext?.activeWorkspace ?? null;
|
||||
const isRtl = lang === 'fa';
|
||||
const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW);
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false)
|
||||
const [user, setUser] = useState<any>(null)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t, lang, setLanguage } = useTranslation()
|
||||
|
||||
const workspaceContext = useOptionalWorkspace()
|
||||
const activeWorkspace = workspaceContext?.activeWorkspace ?? null
|
||||
|
||||
const isRtl = lang === "fa"
|
||||
const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW)
|
||||
|
||||
const ToggleIcon = isRtl
|
||||
? (isCollapsed ? PanelRightOpen : PanelRightClose)
|
||||
: (isCollapsed ? PanelLeftOpen : PanelLeftClose);
|
||||
? isCollapsed
|
||||
? PanelRightOpen
|
||||
: PanelRightClose
|
||||
: isCollapsed
|
||||
? PanelLeftOpen
|
||||
: PanelLeftClose
|
||||
|
||||
useEffect(() => {
|
||||
const handleProfileUpdated = ((e: CustomEvent) => {
|
||||
if (e.detail) {
|
||||
setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
|
||||
}
|
||||
}) as EventListener
|
||||
|
||||
window.addEventListener("profile_updated", handleProfileUpdated)
|
||||
return () => window.removeEventListener("profile_updated", handleProfileUpdated)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
const token = getAccessToken()
|
||||
if (!token) return
|
||||
|
||||
try {
|
||||
const userData = await getUserProfile()
|
||||
setUser(userData)
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user profile:", error)
|
||||
}
|
||||
}
|
||||
|
||||
void fetchUser()
|
||||
}, [])
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const refreshToken = getRefreshToken()
|
||||
if (refreshToken) {
|
||||
await logoutUser(refreshToken)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Logout API failed:", error)
|
||||
} finally {
|
||||
clearSessionTokens()
|
||||
setUser(null)
|
||||
setShowLogoutModal(false)
|
||||
onMobileClose?.()
|
||||
toast.success(t.logoutToast || "Successfully logged out!")
|
||||
navigate("/auth")
|
||||
}
|
||||
}
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = isRtl ? "en" : "fa"
|
||||
|
||||
if (setLanguage) {
|
||||
setLanguage(newLang)
|
||||
} else {
|
||||
localStorage.setItem("language", newLang)
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
path: '/timesheet',
|
||||
path: "/timesheet",
|
||||
icon: Clock3,
|
||||
label: t.sidebar?.timesheet || 'Timesheet'
|
||||
label: t.sidebar?.timesheet || "Timesheet",
|
||||
},
|
||||
{
|
||||
path: '/tags',
|
||||
path: "/tags",
|
||||
icon: Tags,
|
||||
label: t.sidebar?.tags || 'Tags'
|
||||
},
|
||||
{
|
||||
path: '/clients',
|
||||
icon: Users,
|
||||
label: t.sidebar?.clients || 'Clients'
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
icon: Briefcase,
|
||||
label: t.sidebar?.projects || 'Projects'
|
||||
},
|
||||
{
|
||||
path: '/workspaces',
|
||||
icon: LayoutDashboard,
|
||||
label: t.sidebar?.workspaces || 'Workspaces'
|
||||
label: t.sidebar?.tags || "Tags",
|
||||
},
|
||||
{
|
||||
path: '/reports',
|
||||
path: "/clients",
|
||||
icon: Users,
|
||||
label: t.sidebar?.clients || "Clients",
|
||||
},
|
||||
{
|
||||
path: "/projects",
|
||||
icon: Briefcase,
|
||||
label: t.sidebar?.projects || "Projects",
|
||||
},
|
||||
{
|
||||
path: "/workspaces",
|
||||
icon: LayoutDashboard,
|
||||
label: t.sidebar?.workspaces || "Workspaces",
|
||||
},
|
||||
{
|
||||
path: "/reports",
|
||||
icon: ChartColumn,
|
||||
label: t.sidebar?.reports || 'Reports'
|
||||
label: t.sidebar?.reports || "Reports",
|
||||
},
|
||||
...(canViewLogs
|
||||
? [
|
||||
{
|
||||
path: '/logs',
|
||||
path: "/logs",
|
||||
icon: History,
|
||||
label: t.sidebar?.logs || 'Logs',
|
||||
label: t.sidebar?.logs || "Logs",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
]
|
||||
|
||||
const renderNavItems = (mobile = false) =>
|
||||
navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const Icon = item.icon
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
key={`${mobile ? 'mobile' : 'desktop'}-${item.path}`}
|
||||
key={`${mobile ? "mobile" : "desktop"}-${item.path}`}
|
||||
to={item.path}
|
||||
title={!mobile && isCollapsed ? item.label : undefined}
|
||||
onClick={() => {
|
||||
if (mobile) onMobileClose?.();
|
||||
if (mobile) onMobileClose?.()
|
||||
}}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center rounded-lg text-sm font-medium transition-colors ${
|
||||
mobile
|
||||
? 'gap-3 px-4 py-3'
|
||||
? "gap-3 px-4 py-3"
|
||||
: isCollapsed
|
||||
? 'justify-center px-0 py-2.5'
|
||||
: 'gap-3 px-3 py-2.5'
|
||||
? "justify-center px-0 py-2.5"
|
||||
: "gap-3 px-3 py-2.5"
|
||||
} ${
|
||||
isActive
|
||||
? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
|
||||
: 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
|
||||
? "bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
|
||||
: "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Icon size={mobile ? 20 : isCollapsed ? 22 : 18} className="shrink-0" />
|
||||
|
||||
{(mobile || !isCollapsed) && (
|
||||
<span className="truncate whitespace-nowrap">{item.label}</span>
|
||||
)}
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
const renderMobileTopSection = () => {
|
||||
if (!user) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-b border-slate-200 p-4 dark:border-slate-800">
|
||||
<div className="w-full">
|
||||
<WorkspaceSelector className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderMobileFooterSection = () => {
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="border-t border-slate-200 p-4 dark:border-slate-800">
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 mb-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
||||
>
|
||||
<Globe size={20} className="shrink-0" />
|
||||
<span className="truncate whitespace-nowrap">
|
||||
{isRtl ? "English" : "فارسی"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onMobileClose?.()
|
||||
navigate("/auth")
|
||||
}}
|
||||
className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
>
|
||||
<LogIn className="mr-2 h-4 w-4" />
|
||||
{t.login?.signIn || "Login"}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1 p-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
onMobileClose?.()
|
||||
navigate("/profile")
|
||||
}}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
||||
>
|
||||
<User size={20} className="shrink-0" />
|
||||
<span className="truncate whitespace-nowrap">
|
||||
{t.profile?.title || "Profile"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
||||
>
|
||||
<Globe size={20} className="shrink-0" />
|
||||
<span className="truncate whitespace-nowrap">
|
||||
{isRtl ? "English" : "فارسی"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowLogoutModal(true)}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
|
||||
>
|
||||
<LogOut size={20} className="shrink-0" />
|
||||
<span className="truncate whitespace-nowrap">{t.logout || "Logout"}</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside
|
||||
className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
|
||||
isCollapsed ? 'w-20' : 'w-64'
|
||||
{/* Desktop sidebar */}
|
||||
<aside
|
||||
className={`hidden h-screen shrink-0 flex-col border-e border-slate-200 bg-white transition-all duration-300 ease-in-out md:sticky md:top-0 md:flex dark:border-slate-800 dark:bg-slate-950 ${
|
||||
isCollapsed ? "w-20" : "w-64"
|
||||
}`}
|
||||
>
|
||||
<div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
|
||||
isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
|
||||
}`}>
|
||||
<div
|
||||
className={`flex h-[73px] shrink-0 items-center border-b border-slate-200 transition-all dark:border-slate-800 ${
|
||||
isCollapsed ? "justify-center px-0" : "justify-between px-6"
|
||||
}`}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
|
||||
<h2 className="truncate text-xl font-bold text-slate-800 dark:text-white">
|
||||
{t.title || "Qlockify"}
|
||||
</h2>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
|
||||
title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
|
||||
className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
title={
|
||||
isCollapsed
|
||||
? t.sidebar?.expand || "Expand"
|
||||
: t.sidebar?.collapse || "Collapse"
|
||||
}
|
||||
>
|
||||
<ToggleIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
|
||||
|
||||
<nav className="flex-1 space-y-1 overflow-y-auto overflow-x-hidden p-4">
|
||||
{renderNavItems(false)}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Mobile sidebar */}
|
||||
<div
|
||||
className={`fixed inset-0 z-[70] md:hidden transition-all duration-200 ${
|
||||
mobileOpen ? 'pointer-events-auto' : 'pointer-events-none'
|
||||
className={`fixed inset-0 z-[70] transition-all duration-200 md:hidden ${
|
||||
mobileOpen ? "pointer-events-auto" : "pointer-events-none"
|
||||
}`}
|
||||
aria-hidden={!mobileOpen}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`absolute inset-0 bg-slate-950/50 backdrop-blur-[1px] transition-opacity ${
|
||||
mobileOpen ? 'opacity-100' : 'opacity-0'
|
||||
mobileOpen ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
onClick={onMobileClose}
|
||||
/>
|
||||
|
||||
<aside
|
||||
className={`absolute inset-y-0 flex w-[18.5rem] max-w-[86vw] flex-col bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
|
||||
dir={isRtl ? "rtl" : "ltr"}
|
||||
className={`absolute inset-y-0 flex w-[19.5rem] max-w-[88vw] flex-col overflow-hidden bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
|
||||
isRtl
|
||||
? `right-0 border-s border-slate-200 dark:border-slate-800 ${
|
||||
mobileOpen ? 'translate-x-0' : 'translate-x-full'
|
||||
mobileOpen ? "translate-x-0" : "translate-x-full"
|
||||
}`
|
||||
: `left-0 border-e border-slate-200 dark:border-slate-800 ${
|
||||
mobileOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
mobileOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
|
||||
<h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
|
||||
{t.title || "Qlockify"}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onMobileClose}
|
||||
className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
title="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
||||
<div className="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
|
||||
<h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
|
||||
Qlockify.ir
|
||||
</h2>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onMobileClose}
|
||||
className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
title="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
{renderMobileTopSection()}
|
||||
</div>
|
||||
|
||||
<nav className="shrink-0 space-y-1 p-4">
|
||||
{renderNavItems(true)}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto shrink-0">
|
||||
{renderMobileFooterSection()}
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex-1 space-y-1 overflow-y-auto p-4">
|
||||
{renderNavItems(true)}
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{showLogoutModal && (
|
||||
<div
|
||||
className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 px-4"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
|
||||
{t.confirmLogoutTitle || "Confirm Logout"}
|
||||
</h2>
|
||||
|
||||
<p className="mb-6 text-slate-600 dark:text-slate-400">
|
||||
{t.confirmLogoutMessage ||
|
||||
"Are you sure you want to log out of your account?"}
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
className="dark:text-white"
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleLogout}
|
||||
className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
|
||||
>
|
||||
{t.logout || "Logout"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
@@ -6,7 +6,11 @@ import { useNavigate } from "react-router-dom";
|
||||
import { fetchWorkspaces, type Workspace } from "../api/workspaces";
|
||||
import { InfiniteScroll } from "./InfiniteScroll";
|
||||
|
||||
export const WorkspaceSelector: React.FC = () => {
|
||||
type WorkspaceSelectorProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({ className = "" }) => {
|
||||
const { workspaces, activeWorkspace, setActiveWorkspace } = useWorkspace();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
@@ -40,21 +44,21 @@ export const WorkspaceSelector: React.FC = () => {
|
||||
refreshWorkspacesList();
|
||||
}) as EventListener;
|
||||
|
||||
const handleWorkspaceCreated = ((e: CustomEvent) => {
|
||||
if (e.detail?.id) {
|
||||
setActiveWorkspace(e.detail);
|
||||
}
|
||||
refreshWorkspacesList();
|
||||
}) as EventListener;
|
||||
const handleWorkspaceCreated = ((e: CustomEvent) => {
|
||||
if (e.detail?.id) {
|
||||
setActiveWorkspace(e.detail);
|
||||
}
|
||||
refreshWorkspacesList();
|
||||
}) as EventListener;
|
||||
|
||||
const handleWorkspaceEdited = ((e: CustomEvent) => {
|
||||
// آپدیت نام کارتابل در نوبار در صورتی که کارتابل فعال ویرایش شده باشد
|
||||
if (activeWorkspace?.id === e.detail?.id) {
|
||||
setActiveWorkspace({
|
||||
...activeWorkspace,
|
||||
...e.detail,
|
||||
} as Workspace);
|
||||
}
|
||||
if (activeWorkspace?.id === e.detail?.id) {
|
||||
setActiveWorkspace({
|
||||
...activeWorkspace,
|
||||
...e.detail,
|
||||
} as Workspace);
|
||||
}
|
||||
refreshWorkspacesList();
|
||||
}) as EventListener;
|
||||
|
||||
@@ -116,23 +120,23 @@ export const WorkspaceSelector: React.FC = () => {
|
||||
}, [offset, hasMore, isLoadingMore]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<div className={`relative ${className}`} ref={dropdownRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-base font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
|
||||
{activeWorkspace?.thumbnail ? (
|
||||
<img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
|
||||
)}
|
||||
</div>
|
||||
<span className="max-w-30 truncate">
|
||||
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
|
||||
{activeWorkspace?.thumbnail ? (
|
||||
<img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
|
||||
)}
|
||||
</div>
|
||||
<span className="min-w-0 flex-1 truncate text-start">
|
||||
{activeWorkspace?.name || t.workspace?.title || "Workspaces"}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-slate-400" />
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
@@ -162,13 +166,13 @@ export const WorkspaceSelector: React.FC = () => {
|
||||
className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
|
||||
{ws.thumbnail ? (
|
||||
<img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
ws.name.charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
<div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
|
||||
{ws.thumbnail ? (
|
||||
<img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
ws.name.charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
<span className="truncate">{ws.name}</span>
|
||||
</div>
|
||||
{activeWorkspace?.id === ws.id && (
|
||||
|
||||
Reference in New Issue
Block a user