aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/common/AppBar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/common/AppBar.tsx')
-rw-r--r--FrontEnd/src/views/common/AppBar.tsx98
1 files changed, 0 insertions, 98 deletions
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
deleted file mode 100644
index b9ea825b..00000000
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useState } from "react";
-import classnames from "classnames";
-import { Link, NavLink } from "react-router-dom";
-
-import { I18nText, useC, useMobile } from "./common";
-import { useUser } from "@/services/user";
-
-import TimelineLogo from "./TimelineLogo";
-import { IconButton } from "./button";
-import UserAvatar from "./user/UserAvatar";
-
-import "./AppBar.css";
-
-function AppBarNavLink({
- link,
- className,
- label,
- onClick,
- children,
-}: {
- link: string;
- className?: string;
- label?: I18nText;
- onClick?: () => void;
- children?: React.ReactNode;
-}) {
- if (label != null && children != null) {
- throw new Error("AppBarNavLink: label and children cannot be both set");
- }
-
- const c = useC();
-
- return (
- <NavLink
- to={link}
- className={({ isActive }) => classnames(className, isActive && "active")}
- onClick={onClick}
- >
- {children != null ? children : c(label)}
- </NavLink>
- );
-}
-
-export default function AppBar() {
- const isMobile = useMobile();
-
- const [isCollapse, setIsCollapse] = useState<boolean>(true);
- const collapse = isMobile ? () => setIsCollapse(true) : undefined;
- const toggleCollapse = () => setIsCollapse(!isCollapse);
-
- const user = useUser();
- const hasAdministrationPermission = user && user.hasAdministrationPermission;
-
- return (
- <nav
- className={classnames(
- isMobile ? "mobile" : "desktop",
- "app-bar",
- isCollapse && "collapse",
- )}
- >
- <Link to="/" className="app-bar-brand" onClick={collapse}>
- <TimelineLogo className="app-bar-brand-icon" />
- Timeline
- </Link>
-
- <div className="app-bar-link-area">
- <AppBarNavLink
- link="/settings"
- label="nav.settings"
- onClick={collapse}
- />
- <AppBarNavLink link="/about" label="nav.about" onClick={collapse} />
- {hasAdministrationPermission && (
- <AppBarNavLink
- link="/admin"
- label="nav.administration"
- onClick={collapse}
- />
- )}
- </div>
-
- <div className="app-bar-user-area">
- {user != null ? (
- <AppBarNavLink link="/" className="app-bar-avatar" onClick={collapse}>
- <UserAvatar username={user.username} />
- </AppBarNavLink>
- ) : (
- <AppBarNavLink link="/login" label="nav.login" onClick={collapse} />
- )}
- </div>
-
- {isMobile && (
- <IconButton icon="list" className="toggler" onClick={toggleCollapse} />
- )}
- </nav>
- );
-}