admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: admin only bar items

Browse Source
This commit is contained in:
Amir Adal
2025-05-29 19:56:33 +02:00
parent d9ca1ce2b4
commit aa18b9f3e2
3 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Home/Sidebar/index.tsx
View File

@ -1,5 +1,5 @@
import type { FC } from "react"; import type { FC } from "react";
import { barItems } from "../tabs"; import { useBarItems } from "../tabs";
export interface ISidebarProps { export interface ISidebarProps {
activeTab: string; activeTab: string;
@ -7,6 +7,8 @@ export interface ISidebarProps {
} }
const Sidebar: FC<ISidebarProps> = ({ activeTab, onChangeTab }) => { const Sidebar: FC<ISidebarProps> = ({ activeTab, onChangeTab }) => {
const barItems = useBarItems();
return ( return (
<div className="hidden sm:flex flex-col gap-2 items-stretch min-w-80 w-80 p-5 pt-18 min-h-screen select-none bg-white/65 dark:bg-black/65 shadow-lg shadow-gray-300 dark:shadow-gray-700"> <div className="hidden sm:flex flex-col gap-2 items-stretch min-w-80 w-80 p-5 pt-18 min-h-screen select-none bg-white/65 dark:bg-black/65 shadow-lg shadow-gray-300 dark:shadow-gray-700">
{barItems.map((item) => ( {barItems.map((item) => (

4
web/src/components/Home/TopBar/index.tsx
View File

@ -1,5 +1,5 @@
import { type FC } from "react"; import { type FC } from "react";
import { barItems } from "../tabs"; import { useBarItems } from "../tabs";
export interface ITopBarProps { export interface ITopBarProps {
activeTab: string; activeTab: string;
@ -7,6 +7,8 @@ export interface ITopBarProps {
} }
const TopBar: FC<ITopBarProps> = ({ activeTab, onChangeTab }) => { const TopBar: FC<ITopBarProps> = ({ activeTab, onChangeTab }) => {
const barItems = useBarItems();
return ( return (
<div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70 pt-14"> <div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70 pt-14">
{barItems.map((item) => ( {barItems.map((item) => (

54
web/src/components/Home/tabs.tsx
View File

@ -1,19 +1,37 @@
import { Home, Settings2, User } from "lucide-react"; import { useAuth } from "@/store/auth";
import { Blocks, Home, Settings2, User } from "lucide-react";
export const barItems = [ export const useBarItems = () => {
{ const profile = useAuth((state) => state.profile);
icon: <Home />,
title: "Home", if (!profile) {
tab: "home", return [];
}, }
{
icon: <User />, return [
title: "Personal Info", {
tab: "personal-info", icon: <Home />,
}, title: "Home",
{ tab: "home",
icon: <Settings2 />, },
title: "Data & Personalization", {
tab: "data-personalization", icon: <User />,
}, title: "Personal Info",
]; tab: "personal-info",
},
{
icon: <Settings2 />,
title: "Data & Personalization",
tab: "data-personalization",
},
...(profile.isAdmin
? [
{
icon: <Blocks />,
title: "API Services",
tab: "api-services",
},
]
: []),
];
};