Sidebar adjustments

generators/templates/component.jsx.hbs

@@ -4,20 +4,15 @@ import PropTypes from 'prop-types'
 
 import * as S from './styles'
 
-const {{pascalCase name}} = ({ className, ...props }) => {
-  return (
-    <S.Wrapper className={className} {...props}>
-      <h1>{{pascalCase name}}</h1>
-    </S.Wrapper>
-  )
+const {{pascalCase name}} = () => {
+return (
+<S.Container>
+</S.Container>
+)
 }
 
 {{pascalCase name}}.propTypes = {
-  className: PropTypes.string
 }
 
-{{pascalCase name}}.defaultProps = {
-  className: '{{lowerCase name}}'
-}
 
-export default {{pascalCase name}}
+export default {{pascalCase name}}

generators/templates/styles.js.hbs

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
-export const Wrapper = styled.div`
-  ${({ theme }) => css`
-    color: ${theme.colors.black};
-  `}
-`
+export const Container = styled.div`
+${({ theme }) => css`
+color: ${theme.colors.black};
+`}
+`

package.json

@@ -41,9 +41,11 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^3.11.0",
+    "react-notifications-component": "^3.0.5",
     "react-router-dom": "^5.1.2",
     "react-scripts": "4.0.1",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "uuidv4": "^6.2.7"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.1",

src/App.jsx

@@ -1,22 +1,26 @@
 import React from 'react'
+import Notifications from 'react-notifications-component'
 import { BrowserRouter } from 'react-router-dom'
 
 import GlobalStyles from 'assets/styles/globalStyles'
 import theme from 'assets/styles/theme'
-import { AuthProvider } from 'contexts/AuthContext'
+import * as C from 'components'
+import Providers from 'contexts/Providers'
 import Routes from 'routes'
 import { ThemeProvider } from 'styled-components'
 
 const App = () => {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
+        <Providers>
           <GlobalStyles />
+          <Notifications />
 
+          <C.Navigation />
           <Routes />
-        </ThemeProvider>
-      </AuthProvider>
+        </Providers>
+      </ThemeProvider>
     </BrowserRouter>
   )
 }

src/assets/styles/globalStyles.js

@@ -12,18 +12,20 @@ export default createGlobalStyle`
 
   html {
     font-size: 62.5%;
-    height: 100%;
     -ms-overflow-style: scrollbar;
   }
 
   body {
     ${({ theme }) => css`
       font-family: ${theme.font.family};
       font-size: ${theme.font.sizes.medium};
-      height: 100%;
     `}
   }
 
+  html, body, #root {
+    height: 100%;
+  }
+
   h1,
   h2,
   h3,
@@ -73,4 +75,9 @@ export default createGlobalStyle`
     box-shadow: 0 0 0px 1000px transparent inset;
     transition: background-color 5000s ease-in-out 0s;
   }
+
+  :root {
+    --sidebar-width: 70px;
+    --headerbar-height: 70px;
+  }
 `

src/assets/styles/pages/index.js

@@ -0,0 +1 @@
+export * from './pages'

src/assets/styles/pages/pages.js

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components'
+
+export const PageContainer = styled.div`
+  ${({ theme }) => css`
+    align-items: center;
+    background: ${theme.page.backgroundColor};
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+    padding: var(--headerbar-height) 0 0 var(--sidebar-width);
+    transition: padding ${theme.navigation.transition};
+    width: 100%;
+  `}
+`
+
+export const PageTitle = styled.h1``

src/assets/styles/theme.js

@@ -53,7 +53,8 @@ export default {
     alwaysOnTop: 50
   },
   border: {
-    radius: '0.4rem'
+    radius: '0.4rem',
+    color: ' #e6ecf5'
   },
   spacings: {
     xxsmall: '0.8rem',
@@ -64,5 +65,20 @@ export default {
     xlarge: '4.8rem',
     xxlarge: '5.6rem'
   },
+  navigation: {
+    transition: '400ms ease',
+    sidebar: {
+      width: '70px',
+      icons: {
+        color: '#888da8'
+      }
+    },
+    headerbar: {
+      height: '70px'
+    }
+  },
+  page: {
+    backgroundColor: '#F6F7FB'
+  },
   transition: 'all 250ms cubic-bezier(0.77, 0, 0.175, 1)'
 }

src/components/Grids/index.js

@@ -0,0 +1,2 @@
+export * from './ProcessMonitoringGrid/ProcessMonitoringGrid'
+export * from './Viewer/Viewer'

src/components/Navigation/Headerbar/Headerbar.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { GiHamburgerMenu } from 'react-icons/gi'
+import { GrClose } from 'react-icons/gr'
+
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Headerbar = ({ navItems, isSidebarExpanded, setIsSidebarExpanded }) => {
+  console.log('navItems', navItems)
+  return (
+    <S.Container>
+      <S.Toggle
+        isSidebarExpanded={isSidebarExpanded}
+        onClick={() => setIsSidebarExpanded((prev) => !prev)}
+      >
+        {isSidebarExpanded ? <GrClose /> : <GiHamburgerMenu />}
+      </S.Toggle>
+    </S.Container>
+  )
+}
+
+Headerbar.propTypes = {
+  navItems: PropTypes.array.isRequired,
+  isSidebarExpanded: PropTypes.bool.isRequired,
+  setIsSidebarExpanded: PropTypes.func.isRequired
+}
+
+export default Headerbar