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

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

@ -1,28 +1,24 @@
import { type FC } from "react";
import { useBarItems } from "../tabs";
import { Link } from "react-router";
export interface ITopBarProps {
activeTab: string;
onChangeTab: (tab: string) => void;
}
const TopBar: FC<ITopBarProps> = ({ activeTab, onChangeTab }) => {
const barItems = useBarItems();
const TopBar: FC = () => {
const [barItems, isActive] = useBarItems();
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">
{barItems.map((item) => (
<div
key={item.tab}
onClick={() => onChangeTab(item.tab)}
className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
item.tab === activeTab
? " border-b-4 border-b-blue-500 text-blue-500"
: " border-b-transparent text-gray-500"
}`}
>
{item.title}
</div>
<Link to={item.pathname} key={item.tab}>
<div
className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
isActive(item)
? " border-b-4 border-b-blue-500 text-blue-500"
: " border-b-transparent text-gray-500"
}`}
>
{item.title}
</div>
</Link>
))}
</div>
);