From 7e55dfb897469c572f9a8274d5d7ddaa3cda828a Mon Sep 17 00:00:00 2001 From: cahyadikrishna Date: Thu, 10 Aug 2023 15:46:05 +0800 Subject: [PATCH 01/15] feat: init main navbar and header --- package-lock.json | 28 +++++++- package.json | 1 + src/components/header.jsx | 32 +++++++++ src/components/navbar.jsx | 144 ++++++++++++++++++++++++++++++++++++++ src/layouts/main.jsx | 17 ++++- 5 files changed, 218 insertions(+), 4 deletions(-) create mode 100644 src/components/header.jsx create mode 100644 src/components/navbar.jsx diff --git a/package-lock.json b/package-lock.json index b23a001..9540ca3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@mantine/core": "^6.0.18", "@mantine/form": "^6.0.18", "@mantine/hooks": "^6.0.18", + "@tabler/icons-react": "^2.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" @@ -1286,6 +1287,31 @@ "node": ">=14" } }, + "node_modules/@tabler/icons": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.30.0.tgz", + "integrity": "sha512-tvtmkI4ALjKThVVORh++sB9JnkFY7eGInKxNy+Df7WVQiF7T85tlvGADzlgX4Ic+CK5MIUzZ0jhOlQ/RRlgXpg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.30.0.tgz", + "integrity": "sha512-aYggXusHW133L4KujJkVf4GIIrjg7tIRHgNf/n37mnoHqMjwNP+PjmVdrBM1Z8Ywx9PKFRlrwM0eUMDcG+I4HA==", + "dependencies": { + "@tabler/icons": "2.30.0", + "prop-types": "^15.7.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -3093,7 +3119,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3366,7 +3391,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", diff --git a/package.json b/package.json index 78ed3ed..05316bc 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@mantine/core": "^6.0.18", "@mantine/form": "^6.0.18", "@mantine/hooks": "^6.0.18", + "@tabler/icons-react": "^2.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" diff --git a/src/components/header.jsx b/src/components/header.jsx new file mode 100644 index 0000000..159a817 --- /dev/null +++ b/src/components/header.jsx @@ -0,0 +1,32 @@ +import { createStyles, Header, Group, Burger, rem, Title } from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; + +const useStyles = createStyles((theme) => ({ + header: { + paddingLeft: theme.spacing.md, + paddingRight: theme.spacing.md, + }, + + inner: { + height: rem(56), + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }, +})); + +export function HeaderMain() { + const [opened, { toggle }] = useDisclosure(false); + const { classes } = useStyles(); + + return ( +
+
+ + + Dasboard + +
+
+ ); +} diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx new file mode 100644 index 0000000..a350e64 --- /dev/null +++ b/src/components/navbar.jsx @@ -0,0 +1,144 @@ +import { useState } from 'react'; +import { NavLink, useNavigate } from 'react-router-dom'; + +import { + createStyles, + Navbar, + Group, + getStylesRef, + rem, + Title, + Flex, +} from '@mantine/core'; +import { + IconDashboard, + IconShoe, + IconCategory, + IconLogout, +} from '@tabler/icons-react'; + +const useStyles = createStyles((theme) => ({ + header: { + paddingBottom: theme.spacing.md, + marginBottom: `calc(${theme.spacing.md} * 1.5)`, + borderBottom: `${rem(1)} solid ${ + theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2] + }`, + }, + + footer: { + paddingTop: theme.spacing.md, + marginTop: theme.spacing.md, + borderTop: `${rem(1)} solid ${ + theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2] + }`, + }, + + link: { + ...theme.fn.focusStyles(), + display: 'flex', + alignItems: 'center', + textDecoration: 'none', + fontSize: theme.fontSizes.sm, + color: + theme.colorScheme === 'dark' + ? theme.colors.dark[1] + : theme.colors.gray[7], + padding: `${theme.spacing.xs} ${theme.spacing.sm}`, + borderRadius: theme.radius.sm, + fontWeight: 500, + + '&:hover': { + backgroundColor: + theme.colorScheme === 'dark' + ? theme.colors.dark[6] + : theme.colors.gray[0], + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + + [`& .${getStylesRef('icon')}`]: { + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + }, + }, + }, + + linkIcon: { + ref: getStylesRef('icon'), + color: + theme.colorScheme === 'dark' + ? theme.colors.dark[2] + : theme.colors.gray[6], + marginRight: theme.spacing.sm, + }, + + linkActive: { + '&, &:hover': { + backgroundColor: theme.fn.variant({ + variant: 'light', + color: theme.primaryColor, + }).background, + color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }) + .color, + [`& .${getStylesRef('icon')}`]: { + color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }) + .color, + }, + }, + }, +})); + +const data = [ + { link: '/', label: 'Dashboard', icon: IconDashboard }, + { link: '/shoe', label: 'Shoes', icon: IconShoe }, + { link: '/category', label: 'Category', icon: IconCategory }, +]; + +export default function NavbarMain() { + const navigate = useNavigate(); + + const { classes, cx } = useStyles(); + const [active, setActive] = useState('Dashboard'); + + const links = data.map((item) => ( + { + event.preventDefault(); + navigate(item.link); + setActive(item.label); + }} + > + + {item.label} + + )); + + return ( + + + + + + BDC Shoe + + + + {links} + + + + event.preventDefault()} + > + + Logout + + + + ); +} diff --git a/src/layouts/main.jsx b/src/layouts/main.jsx index 8459bd3..41dd13f 100644 --- a/src/layouts/main.jsx +++ b/src/layouts/main.jsx @@ -1,5 +1,18 @@ -import { Outlet } from "react-router-dom"; +import { Outlet } from 'react-router-dom'; +import { Flex } from '@mantine/core'; + +import NavbarMain from '../components/navbar'; +import { HeaderMain } from '../components/header'; export default function LayoutMain() { - return ; + return ( + + + + + + + + + ); } From ed8e8a5f3ee58d51e55308e6aef97fc922420fe3 Mon Sep 17 00:00:00 2001 From: cahyadikrishna Date: Fri, 11 Aug 2023 00:21:34 +0800 Subject: [PATCH 02/15] refactor: change layout structure --- src/components/header.jsx | 42 +++++++++++++++++++-------------------- src/components/navbar.jsx | 10 ++++++++-- src/layouts/main.jsx | 32 ++++++++++++++++++++--------- 3 files changed, 51 insertions(+), 33 deletions(-) diff --git a/src/components/header.jsx b/src/components/header.jsx index 159a817..20c315f 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -1,31 +1,29 @@ -import { createStyles, Header, Group, Burger, rem, Title } from '@mantine/core'; +import { + Header, + Burger, + Title, + MediaQuery, + useMantineTheme, +} from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; -const useStyles = createStyles((theme) => ({ - header: { - paddingLeft: theme.spacing.md, - paddingRight: theme.spacing.md, - }, - - inner: { - height: rem(56), - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - }, -})); - export function HeaderMain() { + const theme = useMantineTheme(); const [opened, { toggle }] = useDisclosure(false); - const { classes } = useStyles(); return ( -
-
- - - Dasboard - +
+
+ + + + + Dasboard
); diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index a350e64..b2f590e 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -92,7 +92,7 @@ const data = [ { link: '/category', label: 'Category', icon: IconCategory }, ]; -export default function NavbarMain() { +export default function NavbarMain({ status }) { const navigate = useNavigate(); const { classes, cx } = useStyles(); @@ -117,7 +117,13 @@ export default function NavbarMain() { )); return ( - +