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
+106 -92
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,94 +101,108 @@ const Sidebar = () => {
return ( return (
<Wrapper color={role}> <Wrapper color={role}>
<Box display='flex' flexDirection='column'> {role !== 'admin' && (
{projects && <>
projects.map((project) => ( <Box display='flex' flexDirection='column'>
<Box marginBottom='20px' key={project.id}> {projects &&
<div id={`project-${project.id}`}> projects.map((project) => (
<SidebarItem <Box marginBottom='20px' key={project.id}>
color={role} <div id={`project-${project.id}`}>
text={project.name[0]} <SidebarItem
onClick={() => history.push(`/project/${project.id}`)} color={role}
/> selected={new RegExp(project.id, 'i').test(
</div> location.pathname
<ContextMenu )}
component={`project-${project.id}`} text={project.name[0]}
items={[{ action: () => {}, label: project.name }]} onClick={() => history.push(`/project/${project.id}`)}
/> />
</Box> </div>
))} <ContextMenu
{templates && component={`project-${project.id}`}
templates.map((template) => ( items={[{ action: () => {}, label: project.name }]}
<Box marginBottom='20px' key={template.id}> />
<div id={`template-${template.id}`}> </Box>
<SidebarItem ))}
color={role} {templates &&
text={template.name[0]} templates.map((template) => (
onClick={() => history.push(`/template/${template.id}`)} <Box marginBottom='20px' key={template.id}>
/> <div id={`template-${template.id}`}>
</div> <SidebarItem
<ContextMenu color={role}
component={`template-${template.id}`} selected={new RegExp(template.id, 'i').test(
items={[{ action: () => {}, label: template.name }]} location.pathname
/> )}
</Box> text={template.name[0]}
))} onClick={() => history.push(`/template/${template.id}`)}
{features && />
features.map((feature) => ( </div>
<Box marginBottom='20px' key={feature.id}> <ContextMenu
<div id={`feature-${feature.id}`}> component={`template-${template.id}`}
<SidebarItem items={[{ action: () => {}, label: template.name }]}
color={role} />
text={feature.name[0]} </Box>
onClick={() => history.push(`/feature/${feature.id}`)} ))}
/> {features &&
</div> features.map((feature) => (
<ContextMenu <Box marginBottom='20px' key={feature.id}>
component={`feature-${feature.id}`} <div id={`feature-${feature.id}`}>
items={[{ action: () => {}, label: feature.name }]} <SidebarItem
/> color={role}
</Box> selected={new RegExp(feature.id, 'i').test(
))} location.pathname
{categories && )}
categories.map((category) => ( text={feature.name[0]}
<Box marginBottom='20px' key={category.id}> onClick={() => history.push(`/feature/${feature.id}`)}
<div id={`category-${category.id}`}> />
<SidebarItem </div>
color={role} <ContextMenu
text={category.name[0]} component={`feature-${feature.id}`}
onClick={() => history.push(`/category/${category.id}`)} items={[{ action: () => {}, label: feature.name }]}
/> />
</div> </Box>
<ContextMenu ))}
component={`category-${category.id}`} {categories &&
items={[{ action: () => {}, label: category.name }]} categories.map((category) => (
/> <Box marginBottom='20px' key={category.id}>
</Box> <div id={`category-${category.id}`}>
))} <SidebarItem
</Box> color={role}
<Box> selected={new RegExp(category.id, 'i').test(
{role !== 'admin' && ( location.pathname
<IconButton )}
icon={<Add />} text={category.name[0]}
color={role} onClick={() => history.push(`/category/${category.id}`)}
onClick={() => { />
if (/project/.test(location.pathname)) { </div>
history.push('/add-project'); <ContextMenu
} component={`category-${category.id}`}
if (/template/.test(location.pathname)) { items={[{ action: () => {}, label: category.name }]}
history.push('/add-template'); />
} </Box>
if (/feature/.test(location.pathname)) { ))}
history.push('/add-feature'); </Box>
} <Box>
if (/category/.test(location.pathname)) { <IconButton
history.push('/add-category'); icon={<Add />}
} color={role}
}} onClick={() => {
/> if (/project/i.test(location.pathname)) {
)} history.push('/add-project');
</Box> }
if (/template/i.test(location.pathname)) {
history.push('/add-template');
}
if (/feature/i.test(location.pathname)) {
history.push('/add-feature');
}
if (/category/i.test(location.pathname)) {
history.push('/add-category');
}
}}
/>
</Box>
</>
)}
</Wrapper> </Wrapper>
); );
}; };