Improve sidebar UX

src/components/Sidebar/index.tsx

@@ -120,6 +120,16 @@ const Sidebar = () => {
     };
   }, [location.pathname]);
 
+	const showAddButton = (role: string, pathname: string) => {
+		switch (role) {
+			case 'client': return (/project/i.test(pathname));
+			case 'productOwner': return (/template/i.test(pathname));
+			case 'developer': return (/feature/i.test(pathname) || /category/i.test(pathname));
+		}	
+		
+		return false;
+ 	}
+
   return (
     <Wrapper color={role}>
       {role !== 'admin' && (
@@ -210,27 +220,40 @@ const Sidebar = () => {
               ))}
           </Box>
           <Box display='flex' flexDirection='column'>
-            <Box marginBottom='20px'>
+            {showAddButton(role, location.pathname) && (
-              <IconButton
+							<Box marginBottom='20px'>
-                icon={<Add />}
+								<IconButton
-                color={role}
+									icon={<Add />}
-                onClick={() => {
+									color={role}
-                  if (/project/i.test(location.pathname)) {
+									onClick={() => {
-                    navigate('/add-project');
+										switch(role) {
-                  }
+											case 'client': {
-                  if (/template/i.test(location.pathname)) {
+												if (/project/i.test(location.pathname)) {
-                    navigate('/add-template');
+													navigate('/add-project');
-                  }
+												}
-                  if (/feature/i.test(location.pathname)) {
+											}
-                    navigate('/add-feature');
+											case 'productOwner': {
-                  }
+												if (/project/i.test(location.pathname)) {
-                  if (/category/i.test(location.pathname)) {
+													navigate('/add-project');
-                    navigate('/add-category');
+												}
-                  }
+												if (/template/i.test(location.pathname)) {
-                }}
+													navigate('/add-template');
-              />
+												}
-            </Box>
+											}
-            {/\/project/i.test(location.pathname) && (
+											case 'developer': {
+												if (/feature/i.test(location.pathname)) {
+													navigate('/add-feature');
+												}
+												if (/category/i.test(location.pathname)) {
+													navigate('/add-category');
+												}
+											}
+										}
+									}}
+								/>
+							</Box>
+						)}
+            {/project/i.test(location.pathname) && ['client', 'productOwner'].includes(role) && (
               <Box>
                 <IconButton
                   icon={<Messaging />}

src/pages/AddProject/index.tsx

@@ -418,12 +418,10 @@ const AddProject = () => {
         .required('Email is required')
         .email('Email is invalid'),
       prefix: Yup.string().required('Prefix is required'),
-      // prettier-ignore
       number: Yup.number().typeError('Phone must be a number').required('Phone is required'),
       place: Yup.string().required('Address is required'),
       city: Yup.string().required('City is required'),
       country: Yup.string().required('Country is required'),
-      // prettier-ignore
       zip: Yup.number().typeError('Zip must be a number').required('Zip is required'),
     }),
     onSubmit: ({

src/pages/AddTemplate/index.tsx

@@ -278,7 +278,7 @@ const AddTemplate = () => {
     <Spinner fullScreen color={role || 'client'} />
   );
 
-  if (categoriesError || featuresError || !availableFeatures || !categories) return (
+  if (categoriesError || featuresError || !categories) return (
     <Wrapper color={role}>
       <Box
         width='100%'

src/pages/AddTemplate/styles.ts

@@ -1,5 +1,14 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
   padding: 35px 45px 35px 120px;
+
+	.empty {
+    fill: ${({ theme, color }) =>
+      color ? theme.colors[color].main : theme.colors.client.main};
+  }
 `;