Sidebar adjustments

package.json

@@ -33,6 +33,8 @@
     }
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "ag-grid-community": "^25.1.0",
     "ag-grid-react": "^25.1.0",
     "axios": "^0.21.1",

src/components/Grids/ProcessMonitoringGrid/ProcessMonitoringGrid.jsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
 import { AgGridReact } from 'ag-grid-react'
-import 'ag-grid-community/dist/styles/ag-grid.css'
-import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
 import PropTypes from 'prop-types'
 
 import * as S from './styles'
 
-const ProcessMonitoringGrid = ({ className, ...props }) => {
+const ProcessMonitoringGrid = ({ rowData, cellClicked }) => {
   const gridOptions = {
     columnDefs: [
       { headerName: 'ID', field: 'id' },
@@ -20,26 +18,21 @@ const ProcessMonitoringGrid = ({ className, ...props }) => {
     ]
   }
   return (
-    <S.Wrapper className={className} {...props}>
+    <S.Container>
       <div className="ag-theme-alpine" style={{ height: 500, flex: 4 }}>
         <AgGridReact
-          rowData={props.rowData}
+          rowData={rowData}
           columnDefs={gridOptions.columnDefs}
-          onCellClicked={(e) => props.cellClicked(e)}
+          onCellClicked={(e) => cellClicked(e)}
         />
       </div>
-    </S.Wrapper>
+    </S.Container>
   )
 }
 
 ProcessMonitoringGrid.propTypes = {
-  className: PropTypes.string,
   rowData: PropTypes.any,
   cellClicked: PropTypes.func
 }
 
-ProcessMonitoringGrid.defaultProps = {
-  className: 'processmonitoringgrid'
-}
-
 export default ProcessMonitoringGrid

src/components/Grids/ProcessMonitoringGrid/styles.js

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

src/components/Grids/Viewer/Viewer.jsx

@@ -4,21 +4,17 @@ import PropTypes from 'prop-types'
 
 import * as S from './styles'
 
-const Viewer = ({ className, ...props }) => {
-  return props.viewerContent ? (
-    <S.Wrapper className={className} {...props}>
-      <pre>{props.viewerContent}</pre>
-    </S.Wrapper>
-  ) : null
+const Viewer = ({ viewerContent }) => {
+  if (!viewerContent) return null
+  return (
+    <S.Container>
+      <pre>{viewerContent}</pre>
+    </S.Container>
+  )
 }
 
 Viewer.propTypes = {
-  className: PropTypes.string,
   viewerContent: PropTypes.any
 }
 
-Viewer.defaultProps = {
-  className: 'viewer'
-}
-
 export default Viewer

src/components/Grids/Viewer/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-export const Wrapper = styled.div`
+export const Container = styled.div`
   ${({ theme }) => css`
     align-content: center;
     align-items: center;

src/components/Grids/index.js

@@ -1,2 +1,2 @@
-export * from './ProcessMonitoringGrid/ProcessMonitoringGrid'
-export * from './Viewer/Viewer'
+export { default as ProcessMonitoringGrid } from './ProcessMonitoringGrid/ProcessMonitoringGrid'
+export { default as Viewer } from './Viewer/Viewer'

src/components/Navigation/Headerbar/Headerbar.jsx

@@ -30,10 +30,7 @@ const Headerbar = ({ navItems }) => {
 }
 
 Headerbar.propTypes = {
-  navItems: PropTypes.array.isRequired,
-  isSidebarExpanded: PropTypes.bool.isRequired,
-  setIsSidebarExpanded: PropTypes.func.isRequired,
-  setCurrentExpandedItem: PropTypes.func.isRequired
+  navItems: PropTypes.array.isRequired
 }
 
 export default Headerbar

src/components/Navigation/Sidebar/Logo/index.jsx

@@ -1,39 +1,42 @@
 import React from 'react'
 
+import * as C from 'components'
 import { useNavigationContext } from 'components/Navigation/NavigationProvider'
 
 import * as S from './styles'
 
 const Logo = () => {
   const { isSidebarExpanded } = useNavigationContext()
   return (
-    <S.Container isSidebarExpanded={isSidebarExpanded}>
-      <S.Image
-        viewBox="0 0 50 50"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="3"
-          y="6.5"
-          width="36"
-          height="36"
-          rx="12"
-          stroke="#0062ff"
-          strokeWidth="6"
-        />
-        <rect
-          x="19.5"
-          y="8"
-          width="18"
-          height="18"
-          rx="9"
-          stroke="#0062ff"
-          strokeWidth="6"
-        />
-      </S.Image>
-      {isSidebarExpanded && <S.Text>Logo</S.Text>}
-    </S.Container>
+    <C.UI.Link url="/home">
+      <S.Container isSidebarExpanded={isSidebarExpanded}>
+        <S.Image
+          viewBox="0 0 50 50"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="3"
+            y="6.5"
+            width="36"
+            height="36"
+            rx="12"
+            stroke="#0062ff"
+            strokeWidth="6"
+          />
+          <rect
+            x="19.5"
+            y="8"
+            width="18"
+            height="18"
+            rx="9"
+            stroke="#0062ff"
+            strokeWidth="6"
+          />
+        </S.Image>
+        {isSidebarExpanded && <S.Text>Logo</S.Text>}
+      </S.Container>
+    </C.UI.Link>
   )
 }
 

src/components/Navigation/Sidebar/NavItem/NavItem.jsx

@@ -24,27 +24,44 @@ const NavItem = ({ navItem }) => {
   }
 
   return (
-    <S.Container>
-      {navItem?.path ? (
-        <C.UI.Link url={navItem.path}>
-          <S.LinkContent>
-            <S.Icon>{navItem?.icon}</S.Icon>
-            {isSidebarExpanded && <S.Title>{navItem?.title || '*'}</S.Title>}
-          </S.LinkContent>
-        </C.UI.Link>
-      ) : (
-        <>
-          <S.LinkContent onClick={handleClick}>
-            <S.Icon>{navItem?.icon}</S.Icon>
-            {isSidebarExpanded && <S.Title>{navItem?.title || '*'}</S.Title>}
-          </S.LinkContent>
-
-          {isSidebarExpanded && currentExpandedSidebarItem === navItem?.id && (
-            <SubItems subItems={navItem?.subItems} />
-          )}
-        </>
-      )}
-    </S.Container>
+    <>
+      <S.Container>
+        {navItem?.path ? (
+          <C.UI.Link url={navItem.path}>
+            <S.LinkContent>
+              <C.UI.Tooltip
+                title={!isSidebarExpanded ? navItem?.title : ''}
+                placement="right"
+                hasArrow
+              >
+                <S.Icon>{navItem?.icon}</S.Icon>
+              </C.UI.Tooltip>
+
+              {isSidebarExpanded && <S.Title>{navItem?.title || '*'}</S.Title>}
+            </S.LinkContent>
+          </C.UI.Link>
+        ) : (
+          <>
+            <S.LinkContent onClick={handleClick}>
+              <C.UI.Tooltip
+                title={!isSidebarExpanded ? navItem?.title : ''}
+                placement="right"
+                hasArrow
+              >
+                <S.Icon>{navItem?.icon}</S.Icon>
+              </C.UI.Tooltip>
+
+              {isSidebarExpanded && <S.Title>{navItem?.title || '*'}</S.Title>}
+            </S.LinkContent>
+
+            {isSidebarExpanded &&
+              currentExpandedSidebarItem === navItem?.id && (
+                <SubItems subItems={navItem?.subItems} />
+              )}
+          </>
+        )}
+      </S.Container>
+    </>
   )
 }
 

src/components/UI/Tooltip/Tooltip.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import { makeStyles } from '@material-ui/core/styles'
+import TooltipUIMaterial from '@material-ui/core/Tooltip'
+
+const Tooltip = ({ children, title = '', placement, hasArrow, style = {} }) => {
+  const useStyles = makeStyles(() => ({
+    tooltip: {
+      fontSize: 13,
+      ...style
+    }
+  }))
+
+  const classes = useStyles()
+
+  return (
+    <TooltipUIMaterial
+      title={title}
+      placement={placement}
+      arrow={hasArrow}
+      classes={classes}
+    >
+      {children}
+    </TooltipUIMaterial>
+  )
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.any,
+  title: PropTypes.string.isRequired,
+  placement: PropTypes.string,
+  hasArrow: PropTypes.bool,
+  style: PropTypes.object
+}
+
+export default Tooltip

src/components/UI/index.js

@@ -2,3 +2,4 @@ export { default as Button } from './Button/Button'
 export { default as Link } from './Link/Link'
 export { default as Spinner } from './Spinner/Spinner'
 export { default as TextField } from './TextField/TextField'
+export { default as Tooltip } from './Tooltip/Tooltip'

src/index.jsx

@@ -2,15 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import 'react-notifications-component/dist/theme.css'
+import 'ag-grid-community/dist/styles/ag-grid.css'
+import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
 import * as serviceWorker from 'utils/initializer/serviceWorker'
 
 import App from './App'
 
-ReactDOM.render(
-  <>
-    <App />
-  </>,
-  document.getElementById('root')
-)
+ReactDOM.render(<App />, document.getElementById('root'))
 
 serviceWorker.unregister()

src/pages/Home/Home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import * as S from './styles'
+
+const Home = () => {
+  return <S.Container>{<S.Title>Home</S.Title>}</S.Container>
+}
+
+export default Home

src/pages/User/styles.js → src/pages/Home/styles.js

@@ -3,10 +3,4 @@ import styled from 'styled-components'
 
 export const Container = styled(PS.PageContainer)``
 
-export const Section = styled.section`
-  height: 100%;
-  padding: 0 15px;
-  width: 100%;
-`
-
-export const UserName = styled.h1``
+export const Title = styled(PS.PageTitle)``

src/pages/ProcessMonitoring/ProcessMonitoring.jsx

@@ -36,12 +36,14 @@ const ProcessMonitoring = () => {
     <S.Container>
       <h1>ProcessMonitoring</h1>
 
-      <C.GRID.ProcessMonitoringGrid
-        rowData={gridData}
-        cellClicked={(e) => showViewerHandler(e)}
-      />
-
-      <C.GRID.Viewer viewerContent={viewerContent} />
+      <S.Content>
+        <C.GRID.ProcessMonitoringGrid
+          rowData={gridData}
+          cellClicked={(e) => showViewerHandler(e)}
+        />
+
+        <C.GRID.Viewer viewerContent={viewerContent} />
+      </S.Content>
     </S.Container>
   )
 }

src/pages/ProcessMonitoring/styles.js

@@ -2,3 +2,11 @@ import * as PS from 'assets/styles/pages'
 import styled from 'styled-components'
 
 export const Container = styled(PS.PageContainer)``
+
+export const Content = styled.div`
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+`