53 lines
No EOL
1.5 KiB
TypeScript
53 lines
No EOL
1.5 KiB
TypeScript
import React from 'react'
|
|
import styles from './Sidebar.module.css'
|
|
import SidebarItem from './SidebarItem';
|
|
import useSidebarData from './SidebarData';
|
|
import SidebarUser from './SidebarUser';
|
|
import { useCurrentUser } from '../../hooks/useUsers';
|
|
|
|
interface SidebarItemType {
|
|
id: string;
|
|
name: string;
|
|
link?: string;
|
|
submenu?: SidebarItemType[];
|
|
}
|
|
|
|
interface SidebarProps {
|
|
data: SidebarItemType[];
|
|
}
|
|
|
|
const Sidebar: React.FC<SidebarProps> = ({ data }) => {
|
|
const { user, isLoading, error } = useCurrentUser();
|
|
|
|
return (
|
|
<div className={styles.sidebarContainer}>
|
|
<div className={styles.logoContainer}>
|
|
<img src="/logos/PowerOn_transparent.png" alt="Logo" className={styles.logo} />
|
|
</div>
|
|
|
|
<div>
|
|
<SidebarUser
|
|
user={{
|
|
id: user?.id || 0,
|
|
name: user?.fullName || user?.username || '',
|
|
role: user?.privilege || ''
|
|
}}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.sidebar}>
|
|
{data.map(item => {
|
|
return <SidebarItem key={item.id} item={item} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SidebarWithData: React.FC = () => {
|
|
return <Sidebar data={useSidebarData()} />;
|
|
};
|
|
|
|
export default SidebarWithData; |