58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import DashboardIcon from "@mui/icons-material/Dashboard";
|
|
import { styled } from "@mui/system";
|
|
import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
|
|
import PageLinks from "../../../components/PageLinks/PageLinks";
|
|
|
|
const SideBarContainer = styled("aside")(({ theme }) => ({
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: 240,
|
|
height: "100vh",
|
|
backgroundColor: theme.palette.background.primary,
|
|
color: theme.palette.text.primary,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
padding: theme.spacing(2),
|
|
zIndex: 1100,
|
|
borderRight: `1px solid ${theme.palette.divider}`,
|
|
}));
|
|
|
|
const SidebarHeader = styled("div")(({ theme }) => ({
|
|
fontSize: "20px",
|
|
fontWeight: 600,
|
|
marginBottom: theme.spacing(3),
|
|
display: "flex",
|
|
alignItems: "center",
|
|
color: theme.palette.text.primary,
|
|
}));
|
|
|
|
const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
|
|
marginLeft: theme.spacing(1),
|
|
}));
|
|
|
|
const SideBar = () => {
|
|
return (
|
|
<SideBarContainer>
|
|
<SidebarHeader>
|
|
<span style={{ color: "#fff" }}>
|
|
Betrise cashir <IconSpacing fontSize="small" />
|
|
</span>
|
|
</SidebarHeader>
|
|
{SIDEBAR_LINKS.map((link) => (
|
|
<PageLinks
|
|
key={link.path}
|
|
title={link.title}
|
|
path={link.path}
|
|
icon={link.icon}
|
|
/>
|
|
))}
|
|
</SideBarContainer>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|