crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete sidebar component

Browse Source
This commit is contained in:
Hazem Krimi
2021-05-28 17:42:41 +01:00
parent 57493dbc36
commit c0c09139a0
1 changed files with 106 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar/index.tsx
+24 -10
View File
@@ -74,18 +74,18 @@ const Sidebar = () => {
}); });
useEffect(() => { useEffect(() => {
if (/project/.test(location.pathname)) { if (/project/i.test(location.pathname)) {
getProjects(); getProjects();
} }
if (/template/.test(location.pathname)) { if (/template/i.test(location.pathname)) {
getTemplates(); getTemplates();
} }
if (/feature/.test(location.pathname)) { if (/feature/i.test(location.pathname)) {
getFeatures(); getFeatures();
} }
if (/category/.test(location.pathname)) { if (/category/i.test(location.pathname)) {
getCategories(); getCategories();
} }
@@ -101,6 +101,8 @@ const Sidebar = () => {
return ( return (
<Wrapper color={role}> <Wrapper color={role}>
{role !== 'admin' && (
<>
<Box display='flex' flexDirection='column'> <Box display='flex' flexDirection='column'>
{projects && {projects &&
projects.map((project) => ( projects.map((project) => (
@@ -108,6 +110,9 @@ const Sidebar = () => {
<div id={`project-${project.id}`}> <div id={`project-${project.id}`}>
<SidebarItem <SidebarItem
color={role} color={role}
selected={new RegExp(project.id, 'i').test(
location.pathname
)}
text={project.name[0]} text={project.name[0]}
onClick={() => history.push(`/project/${project.id}`)} onClick={() => history.push(`/project/${project.id}`)}
/> />
@@ -124,6 +129,9 @@ const Sidebar = () => {
<div id={`template-${template.id}`}> <div id={`template-${template.id}`}>
<SidebarItem <SidebarItem
color={role} color={role}
selected={new RegExp(template.id, 'i').test(
location.pathname
)}
text={template.name[0]} text={template.name[0]}
onClick={() => history.push(`/template/${template.id}`)} onClick={() => history.push(`/template/${template.id}`)}
/> />
@@ -140,6 +148,9 @@ const Sidebar = () => {
<div id={`feature-${feature.id}`}> <div id={`feature-${feature.id}`}>
<SidebarItem <SidebarItem
color={role} color={role}
selected={new RegExp(feature.id, 'i').test(
location.pathname
)}
text={feature.name[0]} text={feature.name[0]}
onClick={() => history.push(`/feature/${feature.id}`)} onClick={() => history.push(`/feature/${feature.id}`)}
/> />
@@ -156,6 +167,9 @@ const Sidebar = () => {
<div id={`category-${category.id}`}> <div id={`category-${category.id}`}>
<SidebarItem <SidebarItem
color={role} color={role}
selected={new RegExp(category.id, 'i').test(
location.pathname
)}
text={category.name[0]} text={category.name[0]}
onClick={() => history.push(`/category/${category.id}`)} onClick={() => history.push(`/category/${category.id}`)}
/> />
@@ -168,27 +182,27 @@ const Sidebar = () => {
))} ))}
</Box> </Box>
<Box> <Box>
{role !== 'admin' && (
<IconButton <IconButton
icon={<Add />} icon={<Add />}
color={role} color={role}
onClick={() => { onClick={() => {
if (/project/.test(location.pathname)) { if (/project/i.test(location.pathname)) {
history.push('/add-project'); history.push('/add-project');
} }
if (/template/.test(location.pathname)) { if (/template/i.test(location.pathname)) {
history.push('/add-template'); history.push('/add-template');
} }
if (/feature/.test(location.pathname)) { if (/feature/i.test(location.pathname)) {
history.push('/add-feature'); history.push('/add-feature');
} }
if (/category/.test(location.pathname)) { if (/category/i.test(location.pathname)) {
history.push('/add-category'); history.push('/add-category');
} }
}} }}
/> />
)}
</Box> </Box>
</>
)}
</Wrapper> </Wrapper>
); );
}; };