From daf6dfe6fcdb2ae03e8b8183d55c7fa418c9f410 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 17:05:34 +0530 Subject: [PATCH 01/10] Updated: global css rules --- src/index.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index e4baebe..5faa02f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,11 +1,13 @@ +html, body { margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } * { font-family: Averta; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + box-sizing: border-box; } code { From 6d7c1d3c190342d71ed66655f5de7e956d6536f8 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 17:10:45 +0530 Subject: [PATCH 02/10] Added: svg X and hamburger icon --- src/assets/icons/Hamburger-icon.js | 20 ++++++++++++++++++++ src/assets/icons/X-close-icon.js | 19 +++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/assets/icons/Hamburger-icon.js create mode 100644 src/assets/icons/X-close-icon.js diff --git a/src/assets/icons/Hamburger-icon.js b/src/assets/icons/Hamburger-icon.js new file mode 100644 index 0000000..ac771f1 --- /dev/null +++ b/src/assets/icons/Hamburger-icon.js @@ -0,0 +1,20 @@ +const HamburgerIcon = ({ width = 24, height = 24, color }) => ( + + + + + +); + +export default HamburgerIcon; diff --git a/src/assets/icons/X-close-icon.js b/src/assets/icons/X-close-icon.js new file mode 100644 index 0000000..51b7e42 --- /dev/null +++ b/src/assets/icons/X-close-icon.js @@ -0,0 +1,19 @@ +const XIcon = ({ width = 24, height = 24, color = '#ffffff' }) => ( + + + + +); + +export default XIcon; From d64fcbf19bc35b252a8e7b29ef95fbeb820f5e16 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 17:11:21 +0530 Subject: [PATCH 03/10] Added: useWindowDimension hook --- src/hooks/useWindowDimensions.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/hooks/useWindowDimensions.js diff --git a/src/hooks/useWindowDimensions.js b/src/hooks/useWindowDimensions.js new file mode 100644 index 0000000..6e2273a --- /dev/null +++ b/src/hooks/useWindowDimensions.js @@ -0,0 +1,25 @@ +import { useState, useEffect } from 'react'; + +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height, + isMobileScreen: width <= 800, + }; +} + +export default function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + } + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return windowDimensions; +} From 74c8f033bab368f8a30cec390a6c4166a1fc61e3 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 17:12:16 +0530 Subject: [PATCH 04/10] Added: class combiner code --- src/utils/combineCssClasses.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/utils/combineCssClasses.js diff --git a/src/utils/combineCssClasses.js b/src/utils/combineCssClasses.js new file mode 100644 index 0000000..d36bc34 --- /dev/null +++ b/src/utils/combineCssClasses.js @@ -0,0 +1,15 @@ +export const combineClasses = (...classes) => { + return classes.reduce((classNames, currentClassName) => { + if (Array.isArray(currentClassName)) { + return currentClassName[0] ? classNames + ' ' + currentClassName[1] : classNames; + } else if (currentClassName) { + return classNames + ' ' + currentClassName; + } else { + return classNames; + } + }, ''); +}; + +export default combineClasses; + +// Ref: https://www.npmjs.com/package/combine-classes From 5c54936ac10d6f44e4cd0b92963251eb56a12620 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 17:13:16 +0530 Subject: [PATCH 05/10] Added: sidebar open-close --- src/components/Sidebar/index.js | 26 +++++++++++++++++----- src/components/Sidebar/sidebar.module.css | 17 +++++++++++++- src/components/topbar/index.js | 20 ++++++++++++----- src/components/topbar/topbar.module.css | 7 +++++- src/hooks/placeholder | 0 src/layouts/dashboard/dashboard.module.css | 14 +++++++++++- src/layouts/dashboard/index.js | 10 +++++++-- 7 files changed, 78 insertions(+), 16 deletions(-) delete mode 100644 src/hooks/placeholder diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 436cb8f..9542e22 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,9 +1,23 @@ +import XIcon from '../../assets/icons/X-close-icon'; import styles from './sidebar.module.css'; -export default function Sidebar() { - return ( -
-
Plaidware
-
- ); +export default function Sidebar({ isMobileScreen, isOpen, setOpen }) { + if (!isMobileScreen && isOpen) { + return ( +
+
+
Plaidware
+
{ + setOpen(false); + }} + > + +
+
+
+
+ ); + } + return null; } diff --git a/src/components/Sidebar/sidebar.module.css b/src/components/Sidebar/sidebar.module.css index 92a4f36..8ee47cc 100644 --- a/src/components/Sidebar/sidebar.module.css +++ b/src/components/Sidebar/sidebar.module.css @@ -2,9 +2,24 @@ grid-column: 1; background: #2d373c; min-height: 100vh; + min-width: 350px; padding: 40px; } +/* @media only screen and (max-width: 800px) { + +} */ + +.sidebarBrandingHeader { + display: flex; + justify-content: space-between; + align-items: baseline; +} + +.closeIcon { + font-size: larger; +} + .sidebarBranding { font-style: normal; font-weight: bold; @@ -12,4 +27,4 @@ line-height: 44px; color: #ffffff; -} \ No newline at end of file +} diff --git a/src/components/topbar/index.js b/src/components/topbar/index.js index 81478ac..db802d2 100644 --- a/src/components/topbar/index.js +++ b/src/components/topbar/index.js @@ -1,8 +1,18 @@ -import React from 'react' -import styles from './topbar.module.css' +import React from 'react'; +import HamburgerIcon from '../../assets/icons/Hamburger-icon'; +import styles from './topbar.module.css'; -export default function TopBar() { +export default function TopBar({ isMobileScreen, isSidebarOpen, setSidebarOpen }) { return ( -
search comes here
- ) +
+
{ + setSidebarOpen(true); + }} + > + {isSidebarOpen ? null : } +
+
Other icons here
+
+ ); } diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css index 0592525..ffb2a48 100644 --- a/src/components/topbar/topbar.module.css +++ b/src/components/topbar/topbar.module.css @@ -1,5 +1,10 @@ .topBar { grid-row: 1; + padding: 24px 48px; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08); -} \ No newline at end of file + + display: flex; + align-items: center; + justify-content: space-between; +} diff --git a/src/hooks/placeholder b/src/hooks/placeholder deleted file mode 100644 index e69de29..0000000 diff --git a/src/layouts/dashboard/dashboard.module.css b/src/layouts/dashboard/dashboard.module.css index 21897ac..c771b02 100644 --- a/src/layouts/dashboard/dashboard.module.css +++ b/src/layouts/dashboard/dashboard.module.css @@ -1,7 +1,7 @@ .dashboardGrid { width: 100vw; display: grid; - grid-template-columns: 300px auto; + grid-template-columns: max-content auto; } .mainContent { @@ -10,7 +10,19 @@ grid-template-rows: 108px 72px auto; } +@media only screen and (max-width: 800px) { + .dashboardGrid { + grid-template-columns: auto; + } + + .mainContent { + grid-column: 1; + grid-template-rows: 50px 50px auto; + } +} + .content { grid-row: 3; padding: 24px 48px; + min-height: 100%; } diff --git a/src/layouts/dashboard/index.js b/src/layouts/dashboard/index.js index e3f196b..e244d1d 100644 --- a/src/layouts/dashboard/index.js +++ b/src/layouts/dashboard/index.js @@ -1,15 +1,21 @@ +import { useState } from 'react'; import { Outlet } from 'react-router-dom'; + import Breadcrumbs from '../../components/breadcrumbs'; import Sidebar from '../../components/Sidebar'; import TopBar from '../../components/topbar'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; import styles from './dashboard.module.css'; export default function Dashboard() { + const [sidebarOpen, setSidebarOpen] = useState(true); + const { isMobileScreen } = useWindowDimensions(); + return (
- +
- +
From d0cb3b44dc99346301ac1e94ed4e06aa1769dd92 Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 18:08:24 +0530 Subject: [PATCH 06/10] Added: Sidebar nav rendering --- src/components/Sidebar/index.js | 52 ++++++++++++++++++++++- src/components/Sidebar/sidebar.module.css | 11 ++++- src/components/topbar/index.js | 2 +- 3 files changed, 62 insertions(+), 3 deletions(-) diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 9542e22..792aefd 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,6 +1,53 @@ +import { NavLink } from 'react-router-dom'; import XIcon from '../../assets/icons/X-close-icon'; import styles from './sidebar.module.css'; +const items = { + title: { + icon: '', + text: 'Main link', + link: '/', + }, + subs: [ + { + text: 'Sub links', + link: '/', + }, + { + text: 'Sub links', + link: '/', + }, + { + text: 'Sub links', + link: '/', + }, + { + text: 'Sub links', + link: '/', + }, + { + text: 'Sub links', + link: '/', + }, + ], +}; + +const NavGroupItems = ({ list }) => ( +
+ +
+ + {list.title.text} +
+ + {list.subs.map((subLink) => ( + +
{subLink.text}
+ + ))} +
+); + export default function Sidebar({ isMobileScreen, isOpen, setOpen }) { if (!isMobileScreen && isOpen) { return ( @@ -15,7 +62,10 @@ export default function Sidebar({ isMobileScreen, isOpen, setOpen }) {
-
+
+ + +
); } diff --git a/src/components/Sidebar/sidebar.module.css b/src/components/Sidebar/sidebar.module.css index 8ee47cc..d027277 100644 --- a/src/components/Sidebar/sidebar.module.css +++ b/src/components/Sidebar/sidebar.module.css @@ -3,7 +3,6 @@ background: #2d373c; min-height: 100vh; min-width: 350px; - padding: 40px; } /* @media only screen and (max-width: 800px) { @@ -14,6 +13,7 @@ display: flex; justify-content: space-between; align-items: baseline; + padding: 40px 40px 30px 40px; } .closeIcon { @@ -28,3 +28,12 @@ color: #ffffff; } + +.sidebarList { +} + +.sidebarMainItem { +} + +.sidebarSubItem { +} diff --git a/src/components/topbar/index.js b/src/components/topbar/index.js index db802d2..571f32c 100644 --- a/src/components/topbar/index.js +++ b/src/components/topbar/index.js @@ -12,7 +12,7 @@ export default function TopBar({ isMobileScreen, isSidebarOpen, setSidebarOpen } > {isSidebarOpen ? null : } -
Other icons here
+
Right side icons here
); } From 977d1905f26425ddd26e284c780cc07c3f4ef29b Mon Sep 17 00:00:00 2001 From: Llewellyn D'souza Date: Fri, 7 Jan 2022 18:09:08 +0530 Subject: [PATCH 07/10] Added: temp deploy command --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b2f517f..d6faee0 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "deploy": "scp -Cvpr -i build/* ubuntu@ec2-13-59-140-102.us-east-2.compute.amazonaws.com:/home/ubuntu/web-wms/" }, "eslintConfig": { "extends": [ From 25bf141987c61ce6e6e21432efe56ac06ba25594 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Fri, 7 Jan 2022 22:30:36 +0530 Subject: [PATCH 08/10] Update: fixed svgs --- src/assets/icons/Hamburger-icon.js | 8 ++++---- src/assets/icons/X-close-icon.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/assets/icons/Hamburger-icon.js b/src/assets/icons/Hamburger-icon.js index ac771f1..dbe6ec7 100644 --- a/src/assets/icons/Hamburger-icon.js +++ b/src/assets/icons/Hamburger-icon.js @@ -6,10 +6,10 @@ const HamburgerIcon = ({ width = 24, height = 24, color }) => ( viewBox="0 0 24 24" fill="none" stroke={color} - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="feather feather-menu" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="feather feather-menu" > diff --git a/src/assets/icons/X-close-icon.js b/src/assets/icons/X-close-icon.js index 51b7e42..e60dbae 100644 --- a/src/assets/icons/X-close-icon.js +++ b/src/assets/icons/X-close-icon.js @@ -6,10 +6,10 @@ const XIcon = ({ width = 24, height = 24, color = '#ffffff' }) => ( viewBox="0 0 24 24" fill="none" stroke={color} - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="feather feather-x" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="feather feather-x" > From b2a908130739ba28bb6191090b5ab0994c635761 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Sat, 8 Jan 2022 00:15:11 +0530 Subject: [PATCH 09/10] Added: Icons --- src/assets/icons/Hamburger-icon.js | 5 ++--- src/assets/icons/Home-icon.js | 14 ++++++++++++++ src/assets/icons/SidebarDown-icon.js | 10 ++++++++++ src/assets/icons/X-close-icon.js | 10 +++++----- 4 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 src/assets/icons/Home-icon.js create mode 100644 src/assets/icons/SidebarDown-icon.js diff --git a/src/assets/icons/Hamburger-icon.js b/src/assets/icons/Hamburger-icon.js index dbe6ec7..b1b0523 100644 --- a/src/assets/icons/Hamburger-icon.js +++ b/src/assets/icons/Hamburger-icon.js @@ -1,15 +1,14 @@ -const HamburgerIcon = ({ width = 24, height = 24, color }) => ( +const HamburgerIcon = ({ width = 24, height = 24, color, ...props }) => ( diff --git a/src/assets/icons/Home-icon.js b/src/assets/icons/Home-icon.js new file mode 100644 index 0000000..2c7cb15 --- /dev/null +++ b/src/assets/icons/Home-icon.js @@ -0,0 +1,14 @@ +const HomeIcon = ({ width = 24, height = 24, color = 'white', ...props }) => ( + + + + +); + +export default HomeIcon; diff --git a/src/assets/icons/SidebarDown-icon.js b/src/assets/icons/SidebarDown-icon.js new file mode 100644 index 0000000..ae6969a --- /dev/null +++ b/src/assets/icons/SidebarDown-icon.js @@ -0,0 +1,10 @@ +const SidebarDownIcon = ({ width = 14, height = 8, color = 'white', ...props }) => ( + + + +); + +export default SidebarDownIcon; diff --git a/src/assets/icons/X-close-icon.js b/src/assets/icons/X-close-icon.js index e60dbae..820160e 100644 --- a/src/assets/icons/X-close-icon.js +++ b/src/assets/icons/X-close-icon.js @@ -1,18 +1,18 @@ -const XIcon = ({ width = 24, height = 24, color = '#ffffff' }) => ( +const XIcon = ({ width = 18, height = 18, color = '#ffffff', ...props }) => ( - - + + ); From 3c8e71bfadace40fb51ba3a99b794397246a03e9 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Sat, 8 Jan 2022 00:15:46 +0530 Subject: [PATCH 10/10] Added: Sidebar Link styles --- src/components/Sidebar/index.js | 56 ++++++++++++--------- src/components/Sidebar/sidebar.module.css | 59 ++++++++++++++++++++--- 2 files changed, 83 insertions(+), 32 deletions(-) diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 792aefd..9fd3811 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,5 +1,8 @@ import { NavLink } from 'react-router-dom'; +import SidebarDownIcon from '../../assets/icons/SidebarDown-icon'; +import HomeIcon from '../../assets/icons/Home-icon'; import XIcon from '../../assets/icons/X-close-icon'; +import combineClasses from '../../utils/combineCssClasses'; import styles from './sidebar.module.css'; const items = { @@ -11,7 +14,15 @@ const items = { subs: [ { text: 'Sub links', - link: '/', + link: '/login', + }, + { + text: 'Sub links', + link: '/login', + }, + { + text: 'Sub links', + link: '/login', }, { text: 'Sub links', @@ -19,34 +30,31 @@ const items = { }, { text: 'Sub links', - link: '/', - }, - { - text: 'Sub links', - link: '/', - }, - { - text: 'Sub links', - link: '/', + link: '/login', }, ], }; -const NavGroupItems = ({ list }) => ( -
- -
- - {list.title.text} +const NavGroupItems = ({ list }) => { + return ( +
+
+ + +
{list.title.text}
+ +
- - {list.subs.map((subLink) => ( - -
{subLink.text}
- - ))} -
-); + {list.subs.map((subLink, idx) => ( + + {({ isActive }) => ( +
{subLink.text}
+ )} + + ))} +
+ ); +}; export default function Sidebar({ isMobileScreen, isOpen, setOpen }) { if (!isMobileScreen && isOpen) { diff --git a/src/components/Sidebar/sidebar.module.css b/src/components/Sidebar/sidebar.module.css index d027277..8c31091 100644 --- a/src/components/Sidebar/sidebar.module.css +++ b/src/components/Sidebar/sidebar.module.css @@ -10,14 +10,10 @@ } */ .sidebarBrandingHeader { - display: flex; - justify-content: space-between; - align-items: baseline; - padding: 40px 40px 30px 40px; -} - -.closeIcon { - font-size: larger; + display: grid; + padding: 40px 0px 30px 40px; + grid-template-columns: auto 40px; + align-items: center; } .sidebarBranding { @@ -30,10 +26,57 @@ } .sidebarList { + width: 100%; +} + +.sidebarGroup { } .sidebarMainItem { + width: 100%; + display: grid; + align-items: center; + grid-template-columns: auto 55px; + height: 48px; + + /* background: #007aff; */ +} + +.mainItemContent { + display: grid; + align-items: center; + grid-template-columns: 80px auto; + height: 100%; + + color: white; +} + +.mainItemIcon { + padding-left: 40px; + width: auto; +} + +.dropdownIcon { + padding-left: 20px; + width: auto; } .sidebarSubItem { + width: 100%; + height: 46px; + display: grid; + align-items: center; + padding-left: 80px; + + color: white; +} + +.alink:visited, +.alink:link { + text-decoration: none; +} + +.subActive { + background: #1f282d; + color: #007aff !important; }