revamp side-menu
This commit is contained in:
Abhimanue committed
1 parent
3c400d3870
commit
4623aa8931
2 files changed
+41
-76
No files matched your search
@@ -43,6 +43,7 @@ import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
|
||||
import DotsVertical from "../../assets/icons/dots-vertical.svg?react";
|
||||
import ChangeLog from "../../assets/icons/changeLog.svg?react";
|
||||
import Docs from "../../assets/icons/docs.svg?react";
|
||||
import Folder from "../../assets/icons/folder.svg?react";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
@@ -68,13 +69,16 @@ const menu = [
|
||||
{ name: "Team", path: "account/team", icon: <TeamSvg /> },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const other = [
|
||||
{ name: "Settings", path: "settings", icon: <Settings /> },
|
||||
{ name: "Support", path: "support", icon: <Support /> },
|
||||
{ name: "Docs", path: "docs", icon: <Docs /> },
|
||||
{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
|
||||
{
|
||||
name: "Other",
|
||||
icon: <Folder />,
|
||||
nested: [
|
||||
{ name: "Settings", path: "settings", icon: <Settings /> },
|
||||
{ name: "Support", path: "support", icon: <Support /> },
|
||||
{ name: "Docs", path: "docs", icon: <Docs /> },
|
||||
{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const URL_MAP = {
|
||||
@@ -97,7 +101,7 @@ function Sidebar() {
|
||||
const dispatch = useDispatch();
|
||||
const authState = useSelector((state) => state.auth);
|
||||
const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
|
||||
const [open, setOpen] = useState({ Dashboard: false, Account: false });
|
||||
const [open, setOpen] = useState({ Dashboard: false, Account: false, Other: false });
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [popup, setPopup] = useState();
|
||||
const { user } = useSelector((state) => state.auth);
|
||||
@@ -137,6 +141,8 @@ function Sidebar() {
|
||||
setOpen((prev) => ({ ...prev, Dashboard: true }));
|
||||
else if (location.pathname.includes("/account"))
|
||||
setOpen((prev) => ({ ...prev, Account: true }));
|
||||
else if (location.pathname.includes("/settings"))
|
||||
setOpen((prev) => ({ ...prev, Other: true }));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -212,7 +218,7 @@ function Sidebar() {
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setOpen({ Dashboard: false, Account: false });
|
||||
setOpen({ Dashboard: false, Account: false, Other: false });
|
||||
dispatch(toggleSidebar());
|
||||
}}
|
||||
>
|
||||
@@ -356,7 +362,12 @@ function Sidebar() {
|
||||
}
|
||||
key={child.path}
|
||||
onClick={() => {
|
||||
navigate(`/${child.path}`);
|
||||
const url = URL_MAP[child.path];
|
||||
if (url) {
|
||||
window.open(url, "_blank", "noreferrer");
|
||||
} else {
|
||||
navigate(`/${child.path}`);
|
||||
}
|
||||
closePopup();
|
||||
}}
|
||||
sx={{
|
||||
@@ -382,8 +393,14 @@ function Sidebar() {
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
setOpen((prev) => ({
|
||||
...prev,
|
||||
[`${item.name}`]: !prev[`${item.name}`],
|
||||
...Object.keys(prev).reduce(
|
||||
(acc, key) => ({
|
||||
...acc,
|
||||
[key]: false, // close all other sections
|
||||
}),
|
||||
{}
|
||||
),
|
||||
[`${item.name}`]: !prev[`${item.name}`], // toggle clicked section
|
||||
}))
|
||||
}
|
||||
sx={{
|
||||
@@ -419,7 +436,14 @@ function Sidebar() {
|
||||
: ""
|
||||
}
|
||||
key={child.path}
|
||||
onClick={() => navigate(`/${child.path}`)}
|
||||
onClick={() => {
|
||||
const url = URL_MAP[child.path];
|
||||
if (url) {
|
||||
window.open(url, "_blank", "noreferrer");
|
||||
} else {
|
||||
navigate(`/${child.path}`);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
gap: theme.spacing(4),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
@@ -465,69 +489,6 @@ function Sidebar() {
|
||||
)
|
||||
)}
|
||||
</List>
|
||||
<Divider sx={{ my: theme.spacing(4) }} />
|
||||
{/* other */}
|
||||
<List
|
||||
component="nav"
|
||||
aria-labelledby="nested-other-subheader"
|
||||
subheader={
|
||||
<ListSubheader
|
||||
component="div"
|
||||
id="nested-other-subheader"
|
||||
sx={{
|
||||
pt: theme.spacing(4),
|
||||
px: collapsed ? 0 : theme.spacing(4),
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
Other
|
||||
</ListSubheader>
|
||||
}
|
||||
sx={{ px: theme.spacing(6) }}
|
||||
>
|
||||
{other.map((item) => (
|
||||
<Tooltip
|
||||
key={item.path}
|
||||
placement="right"
|
||||
title={collapsed ? item.name : ""}
|
||||
slotProps={{
|
||||
popper: {
|
||||
modifiers: [
|
||||
{
|
||||
name: "offset",
|
||||
options: {
|
||||
offset: [0, -16],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}}
|
||||
disableInteractive
|
||||
>
|
||||
<ListItemButton
|
||||
className={
|
||||
location.pathname.includes(item.path) ? "selected-path" : ""
|
||||
}
|
||||
onClick={() => {
|
||||
const url = URL_MAP[item.path];
|
||||
if (url) {
|
||||
window.open(url, "_blank", "noreferrer");
|
||||
} else {
|
||||
navigate(`/${item.path}`);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
gap: theme.spacing(4),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
px: theme.spacing(4),
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
|
||||
<ListItemText>{item.name}</ListItemText>
|
||||
</ListItemButton>
|
||||
</Tooltip>
|
||||
))}
|
||||
</List>
|
||||
<Divider sx={{ mt: "auto" }} />
|
||||
|
||||
<Stack
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 8.2C3 7.07989 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H9.67452C10.1637 5 10.4083 5 10.6385 5.05526C10.8425 5.10425 11.0376 5.18506 11.2166 5.29472C11.4184 5.4184 11.5914 5.59135 11.9373 5.93726L12.0627 6.06274C12.4086 6.40865 12.5816 6.5816 12.7834 6.70528C12.9624 6.81494 13.1575 6.89575 13.3615 6.94474C13.5917 7 13.8363 7 14.3255 7H17.8C18.9201 7 19.4802 7 19.908 7.21799C20.2843 7.40973 20.5903 7.71569 20.782 8.09202C21 8.51984 21 9.0799 21 10.2V15.8C21 16.9201 21 17.4802 20.782 17.908C20.5903 18.2843 20.2843 18.5903 19.908 18.782C19.4802 19 18.9201 19 17.8 19H6.2C5.07989 19 4.51984 19 4.09202 18.782C3.71569 18.5903 3.40973 18.2843 3.21799 17.908C3 17.4802 3 16.9201 3 15.8V8.2Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Reference in new issue
Block a user