Initial work on #25

Added a list to browse available scenarios
amosproj · May 1, 2021 · aa3ca61 · aa3ca61
1 parent d0fa2af
commit aa3ca61
Show file tree

Hide file tree

Showing 16 changed files with 254 additions and 31 deletions.
diff --git a/react-navigation/src/assets/icons/icon-home.js b/react-navigation/src/assets/icons/icon-home.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+
+export default (props) => (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+        <path opacity={props.opacity || ''} d="M3 10v11h6v-7h6v7h6v-11L12,3z"
+            fill={props.fill || "#9FA2B4"}
+        />
+    </svg>
+);
+
diff --git a/react-navigation/src/assets/icons/icon-ideas.js b/react-navigation/src/assets/icons/icon-ideas.js
@@ -5,7 +5,7 @@ export default (props) => (
         <g clipPath="url(#clip0)">
             <path opacity={props.opacity || ''} d="M5.50187 14.1984C5.50219 14.395 5.56031 14.5875 5.66937 14.7512L6.20344 15.5541C6.29467 15.6913 6.41841 15.8039 6.56366 15.8817C6.7089 15.9596 6.87114 16.0003 7.03594 16.0003H8.96438C9.12917 16.0003 9.29141 15.9596 9.43665 15.8817C9.5819 15.8039 9.70564 15.6913 9.79688 15.5541L10.3309 14.7512C10.44 14.5875 10.4982 14.3952 10.4984 14.1984L10.4997 13H5.50031L5.50187 14.1984ZM2.5 5.5C2.5 6.88656 3.01406 8.15156 3.86125 9.11812C4.3775 9.70718 5.185 10.9378 5.49281 11.9759C5.49406 11.9841 5.495 11.9922 5.49625 12.0003H10.5037C10.505 11.9922 10.5059 11.9844 10.5072 11.9759C10.815 10.9378 11.6225 9.70718 12.1388 9.11812C12.9859 8.15156 13.5 6.88656 13.5 5.5C13.5 2.45656 11.0284 -0.00937887 7.98281 -3.87451e-06C4.795 0.00968363 2.5 2.59281 2.5 5.5ZM8 3C6.62156 3 5.5 4.12156 5.5 5.5C5.5 5.77625 5.27625 6 5 6C4.72375 6 4.5 5.77625 4.5 5.5C4.5 3.57 6.07 2 8 2C8.27625 2 8.5 2.22375 8.5 2.5C8.5 2.77625 8.27625 3 8 3Z"
                 fill={props.fill || "#9FA2B4"} />
-            />
+            {/* /> */}
         </g>
         <defs>
             <clipPath id="clip0">

diff --git a/react-navigation/src/assets/icons/icon-inbox.js b/react-navigation/src/assets/icons/icon-inbox.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+
+export default (props) => (
+    <svg width="16" height="16" viewBox="0 0 40 26" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+        <path opacity={props.opacity || ''} d="M 22.8196 15.7456C 22.0005 16.5862 20.9038 17.0508 19.7317 17.0542C 18.5632 17.0444 17.46 16.5994 16.6362 15.7646L 1.09009 0L 38.1626 0L 22.8196 15.7456ZM 0 1.06567L 11.2952 12.5818L 0 24.1392L 0 1.06567ZM 27.9519 12.623L 39.2878 24.1233L 39.2878 1.06567L 27.9519 12.623ZM 23.7844 16.9265L 27.0105 13.6885L 38.1833 25.082L 1.10547 25.082L 12.4006 13.6885L 15.6772 16.9512C 16.7539 18.0415 18.1877 18.6418 19.7185 18.6418L 19.7363 18.6418C 21.2734 18.6375 22.7109 18.0281 23.7844 16.9265Z"
+            fill={props.fill || "#9FA2B4"}
+        />
+    </svg>
+);
diff --git a/react-navigation/src/assets/icons/index.js b/react-navigation/src/assets/icons/index.js
@@ -14,7 +14,8 @@ import IconSearch from './icon-search';
 import IconSettings from './icon-settings';
 import IconSubscription from './icon-subscription';
 import IconTickets from './icon-tickets';
-
+import IconInbox from './icon-inbox';
+import IconHome from './icon-home';
 export {
     IconCheckboxOff,
     IconCheckboxOn,
@@ -31,5 +32,7 @@ export {
     IconSearch,
     IconSettings,
     IconSubscription,
-    IconTickets
+    IconTickets, 
+    IconInbox,
+    IconHome
 };
diff --git a/react-navigation/src/components/header/HeaderComponent.js b/react-navigation/src/components/header/HeaderComponent.js
@@ -67,8 +67,14 @@ function HeaderComponent() {
 
     let title;
     switch (true) {
+        case currentItem === SLUGS.home:
+            title = 'Home';
+            break;
+        case currentItem === SLUGS.dashboard:
+            title = 'My Dashboard';
+            break;
         case currentItem === SLUGS.dashboard:
-            title = 'Dashboard';
+            title = 'Inbox';
             break;
         case [SLUGS.overview, SLUGS.overviewTwo, SLUGS.overviewThree].includes(currentItem):
             title = 'Overview';

diff --git a/react-navigation/src/components/sidebar/MenuComponent.js b/react-navigation/src/components/sidebar/MenuComponent.js
@@ -30,7 +30,7 @@ const getMenuStyles = ({ theme }) => ({
         zIndex: 30
     },
     bmMenu: {
-        background: theme.color.veryDarkGrayishBlue
+        background: 'white'  // left side bar backgroundcolor 
     },
     bmItem: {
         outline: 'none',

diff --git a/react-navigation/src/components/sidebar/MenuItemComponent.js b/react-navigation/src/components/sidebar/MenuItemComponent.js
@@ -23,11 +23,11 @@ const useStyles = createUseStyles({
         borderLeft: ({ theme, level }) =>
             level > 1 ? 'none' : `3px solid ${theme.color.darkGrayishBlue}`
     },
-    title: {
-        fontSize: 16,
-        lineHeight: '20px',
+    title: { 
+        fontSize: 20, // left bar titles 
+        lineHeight: '25px',
         letterSpacing: '0.2px',
-        color: ({ theme, isActive }) => (isActive ? theme.color.paleBlue : theme.color.grayishBlue),
+        color: ({ theme, isActive }) =>(isActive ? 'green' : 'black'), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
         marginLeft: 24
     }
 });
@@ -43,7 +43,7 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
     const classes = useStyles({ theme, level, isActive });
     const classNameColumn = isActive ? classes.leftBar : '';
     const classNameContainer = [classes.container, isActive && classes.activeContainer].join(' ');
-    const iconColor = isActive ? theme.color.paleBlue : theme.color.grayishBlue2;
+    const iconColor = isActive ? 'green' : 'black';//theme.color.paleBlue : theme.color.grayishBlue2;
 
     function onItemClicked(e) {
         if (onClick) {

diff --git a/react-navigation/src/components/sidebar/SidebarComponent.js b/react-navigation/src/components/sidebar/SidebarComponent.js
@@ -11,13 +11,15 @@ import {
     IconOverview,
     IconSettings,
     IconSubscription,
-    IconTickets
+    IconTickets,
+    IconInbox,
+    IconHome
 } from 'assets/icons';
 import { convertSlugToUrl } from 'resources/utilities';
 import LogoComponent from './LogoComponent';
 import Menu from './MenuComponent';
 import MenuItem from './MenuItemComponent';
-
+import logo from './TeamLogo.PNG'
 const useStyles = createUseStyles({
     separator: {
         borderTop: ({ theme }) => `1px solid ${theme.color.lightGrayishBlue}`,
@@ -44,41 +46,48 @@ function SidebarComponent() {
     return (
         <Menu isMobile={isMobile}>
             <div style={{ paddingTop: 30, paddingBottom: 30 }}>
-                <LogoComponent />
+            <img src={logo} style={{padding:10}} />
             </div>
             <MenuItem
                 id={SLUGS.dashboard}
-                title='Dashboard'
-                icon={IconSubscription}
+                title='My Dashboard'
+                icon={IconHome}
                 onClick={() => onClick(SLUGS.dashboard)}
             />
+            {/* <MenuItem
+                id={SLUGS.home}
+                title='Home'
+                icon={IconHome}
+                onClick={() => onClick(SLUGS.home)}
+            /> */}
             <MenuItem
-                id={SLUGS.overview}
-                items={[SLUGS.overviewTwo, SLUGS.overviewThree]}
-                title='Overview'
-                icon={IconOverview}
+                id={SLUGS.scenerios}
+                items={[SLUGS.overview]}
+                title='Scenerios'
+                icon={IconArticles}
+                onClick={() => onClick(SLUGS.scenerios)}
             >
                 <MenuItem
                     id={SLUGS.overview}
-                    title='Sub Item 1'
+                    title='Overview'
                     level={2}
-                    icon={IconAgents}
+                    icon={IconOverview}
                     onClick={() => onClick(SLUGS.overview)}
                 />
                 <MenuItem
-                    id={SLUGS.overviewTwo}
-                    title='Sub Item 2'
+                    id={SLUGS.comparison}
+                    title='Comparison'       // display two senerios for diff scenerison
                     level={2}
                     icon={IconContacts}
-                    onClick={() => onClick(SLUGS.overviewTwo)}
+                    onClick={() => onClick(SLUGS.comparison)}
                 />
-                <MenuItem
+                {/* <MenuItem
                     id={SLUGS.overviewThree}
                     title='Sub Item 3'
                     level={2}
                     icon={IconArticles}
                     onClick={() => onClick(SLUGS.overviewThree)}
-                />
+                /> */}
             </MenuItem>
             <MenuItem
                 id={SLUGS.tickets}

diff --git a/react-navigation/src/components/sidebar/TeamLogo.PNG b/react-navigation/src/components/sidebar/TeamLogo.PNG
diff --git a/react-navigation/src/resources/slugs.js b/react-navigation/src/resources/slugs.js
@@ -1,6 +1,9 @@
 export default {
     // private
+    comparison: '/comparison',
     dashboard: '/dashboard',
+    scenerios: '/scenerios',
+    inbox:'./inbox',
     overview: '/overview',
     overviewTwo: '/overview/two',
     overviewThree: '/overview/three',

diff --git a/react-navigation/src/routes/PrivateRoutes.js b/react-navigation/src/routes/PrivateRoutes.js
@@ -2,17 +2,22 @@ import React, { Suspense, lazy } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import SLUGS from 'resources/slugs';
 import LoadingComponent from 'components/loading';
+// import ScenariosComponent from 'components/scenarios';
 
-const DashboardComponent = lazy(() => import('./dashboard'));
 
+const DashboardComponent = lazy(() => import('./dashboard'));
+const ScenariosComponent = lazy(() => import('./scenarios'));
 function PrivateRoutes() {
     return (
         <Suspense fallback={<LoadingComponent loading />}>
             <Switch>
                 <Route exact path={SLUGS.dashboard} component={DashboardComponent} />
-                <Route exact path={SLUGS.overviewTwo} render={() => <div>overviewTwo</div>} />
-                <Route exact path={SLUGS.overviewThree} render={() => <div>overviewThree</div>} />
+                <Route exact path={SLUGS.scenerios} component={ScenariosComponent} /> 
                 <Route exact path={SLUGS.overview} render={() => <div>overview</div>} />
+                <Route exact path={SLUGS.comparison} render={() => <div>comparison!</div>} />   
+                {/* <Route exact path={SLUGS.overviewTwo} component={DropdownComponent}/> */}
+                <Route exact path={SLUGS.overviewThree} render={() => <div>overviewThree</div>} />
+
                 <Route exact path={SLUGS.tickets} render={() => <div>tickets</div>} />
                 <Route exact path={SLUGS.ideasTwo} render={() => <div>ideasTwo</div>} />
                 <Route exact path={SLUGS.ideasThree} render={() => <div>ideasThree</div>} />

diff --git a/react-navigation/src/routes/PublicRoutes.js b/react-navigation/src/routes/PublicRoutes.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import SLUGS from 'resources/slugs';
-
 function PublicRoutes() {
     return (
         <Switch>
+            {/* <img src={logo} style={{padding:20}} /> */}
             <Route path={SLUGS.login} render={() => <div>login</div>} />
+            {/* <button onClick={activateLasers}>
+            Activate Lasers
+            </button> */}
             <Route path={SLUGS.signup} render={() => <div>signup</div>} />
             <Route path={SLUGS.forgotPassword} render={() => <div>forgotPassword</div>} />
             <Redirect to={SLUGS.login} />

diff --git a/react-navigation/src/routes/TeamLogo.PNG b/react-navigation/src/routes/TeamLogo.PNG
diff --git a/react-navigation/src/routes/index.js b/react-navigation/src/routes/index.js
@@ -13,7 +13,7 @@ function Routes() {
         window.scrollTo(0, 0);
     }, [pathname]);
 
-    const isUserLoggedIn = true;
+    const isUserLoggedIn = true; // log in page e git
     return isUserLoggedIn ? <PrivateSection /> : <PublicRoutes />;
 }