|
|
|
@ -1,3 +1,4 @@
|
|
|
|
|
import { Tooltip } from "@mui/joy";
|
|
|
|
|
import classNames from "classnames";
|
|
|
|
|
import { useEffect } from "react";
|
|
|
|
|
import { NavLink } from "react-router-dom";
|
|
|
|
@ -16,10 +17,12 @@ interface NavLinkItem {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
collapsed?: boolean;
|
|
|
|
|
className?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Navigation = (props: Props) => {
|
|
|
|
|
const { collapsed, className } = props;
|
|
|
|
|
const t = useTranslate();
|
|
|
|
|
const user = useCurrentUser();
|
|
|
|
|
const inboxStore = useInboxStore();
|
|
|
|
@ -45,31 +48,31 @@ const Navigation = (props: Props) => {
|
|
|
|
|
id: "header-home",
|
|
|
|
|
path: "/",
|
|
|
|
|
title: t("common.home"),
|
|
|
|
|
icon: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Home className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const timelineNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-timeline",
|
|
|
|
|
path: "/timeline",
|
|
|
|
|
title: t("timeline.title"),
|
|
|
|
|
icon: <Icon.GanttChartSquare className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const resourcesNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-resources",
|
|
|
|
|
path: "/resources",
|
|
|
|
|
title: t("common.resources"),
|
|
|
|
|
icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const exploreNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-explore",
|
|
|
|
|
path: "/explore",
|
|
|
|
|
title: t("common.explore"),
|
|
|
|
|
icon: <Icon.Globe2 className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const profileNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-profile",
|
|
|
|
|
path: user ? `/u/${encodeURIComponent(user.username)}` : "",
|
|
|
|
|
title: t("common.profile"),
|
|
|
|
|
icon: <Icon.User2 className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.User2 className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const inboxNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-inbox",
|
|
|
|
@ -78,7 +81,7 @@ const Navigation = (props: Props) => {
|
|
|
|
|
icon: (
|
|
|
|
|
<>
|
|
|
|
|
<div className="relative">
|
|
|
|
|
<Icon.Bell className="mr-3 w-6 h-auto opacity-70" />
|
|
|
|
|
<Icon.Bell className="w-6 h-auto opacity-70" />
|
|
|
|
|
{hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
@ -88,25 +91,25 @@ const Navigation = (props: Props) => {
|
|
|
|
|
id: "header-archived",
|
|
|
|
|
path: "/archived",
|
|
|
|
|
title: t("common.archived"),
|
|
|
|
|
icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Archive className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const settingNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-setting",
|
|
|
|
|
path: "/setting",
|
|
|
|
|
title: t("common.settings"),
|
|
|
|
|
icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Settings className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const signInNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-auth",
|
|
|
|
|
path: "/auth",
|
|
|
|
|
title: t("common.sign-in"),
|
|
|
|
|
icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.LogIn className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
const aboutNavLink: NavLinkItem = {
|
|
|
|
|
id: "header-about",
|
|
|
|
|
path: "/about",
|
|
|
|
|
title: t("common.about"),
|
|
|
|
|
icon: <Icon.Smile className="mr-3 w-6 h-auto opacity-70" />,
|
|
|
|
|
icon: <Icon.Smile className="w-6 h-auto opacity-70" />,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const navLinks: NavLinkItem[] = user
|
|
|
|
@ -117,16 +120,17 @@ const Navigation = (props: Props) => {
|
|
|
|
|
<header
|
|
|
|
|
className={classNames(
|
|
|
|
|
"w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
|
|
|
|
|
props.className
|
|
|
|
|
className
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<UserBanner />
|
|
|
|
|
<UserBanner collapsed={collapsed} />
|
|
|
|
|
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
|
|
|
|
|
{navLinks.map((navLink) => (
|
|
|
|
|
<NavLink
|
|
|
|
|
className={({ isActive }) =>
|
|
|
|
|
classNames(
|
|
|
|
|
"w-full px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
|
|
|
|
|
"px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
|
|
|
|
|
collapsed ? "" : "w-full px-4",
|
|
|
|
|
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent"
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
@ -135,9 +139,14 @@ const Navigation = (props: Props) => {
|
|
|
|
|
id={navLink.id}
|
|
|
|
|
unstable_viewTransition
|
|
|
|
|
>
|
|
|
|
|
<>
|
|
|
|
|
{navLink.icon} {navLink.title}
|
|
|
|
|
</>
|
|
|
|
|
{props.collapsed ? (
|
|
|
|
|
<Tooltip title={navLink.title} placement="right" arrow>
|
|
|
|
|
<div>{navLink.icon}</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
) : (
|
|
|
|
|
navLink.icon
|
|
|
|
|
)}
|
|
|
|
|
{!props.collapsed && <span className="ml-3">{navLink.title}</span>}
|
|
|
|
|
</NavLink>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|