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

feat: location.pathname based bar navigation + admin layout + separate

Browse Source 
auth routes
This commit is contained in:
Amir Adal
2025-05-29 23:42:17 +02:00
parent 78e84567c7
commit db2cb36f54
14 changed files with 219 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,22 @@
import type { FC } from "react";
import { useBarItems } from "../tabs";
import { Link } from "react-router";
export interface ISidebarProps {
activeTab: string;
onChangeTab: (tab: string) => void;
}
const Sidebar: FC<ISidebarProps> = ({ activeTab, onChangeTab }) => {
const barItems = useBarItems();
const Sidebar: FC = () => {
const [barItems, isActive] = useBarItems();
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">
{barItems.map((item) => (
<div
key={item.tab}
onClick={() => onChangeTab(item.tab)}
className={`dark:text-gray-200 transition-colors text-sm cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
item.tab === activeTab ? " bg-gray-200 dark:bg-gray-900" : ""
}`}
>
{item.icon} {item.title}
</div>
<Link to={item.pathname} key={item.tab}>
<div
className={`dark:text-gray-200 transition-colors text-sm cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
isActive(item) ? " bg-gray-200 dark:bg-gray-900" : ""
}`}
>
{item.icon} {item.title}
</div>
</Link>
))}
</div>
);