bali-dev-camp · cahyadikrishna · Aug 10, 2023 · Aug 10, 2023 · Aug 11, 2023 · Aug 11, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off',
   },
-}
+};
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>BDC Shoe Dashboard</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git 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/assets/images/shoe-example.jpg b/src/assets/images/shoe-example.jpg
diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -0,0 +1,15 @@
+import { Header, Title, MediaQuery, Flex } from '@mantine/core';
+import { IconMenu2 } from '@tabler/icons-react';
+
+export function HeaderMain({ onToggle }) {
+  return (
+    <Header height={{ base: 50, md: 70 }} p="md">
+      <Flex direction="row" align="center" gap="sm" style={{ height: '100%' }}>
+        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+          <IconMenu2 size={30} strokeWidth={2} onClick={() => onToggle()} />
+        </MediaQuery>
+        <Title order={4}>Dasboard</Title>
+      </Flex>
+    </Header>
+  );
+}
diff --git a/src/components/navbar/index.jsx b/src/components/navbar/index.jsx
@@ -0,0 +1,77 @@
+import { NavLink } from 'react-router-dom';
+import { Navbar, Group, Title, Flex, MediaQuery } from '@mantine/core';
+import {
+  IconDashboard,
+  IconShoe,
+  IconCategory,
+  IconLogout,
+  IconX,
+} from '@tabler/icons-react';
+
+import { useStyles } from './style';
+
+const links = [
+  { link: '/', label: 'Dashboard', icon: IconDashboard },
+  { link: '/shoe', label: 'Shoes', icon: IconShoe },
+  { link: '/category', label: 'Category', icon: IconCategory },
+];
+
+export default function NavbarMain({ status, onToggle }) {
+  const { classes, cx } = useStyles();
+
+  return (
+    <Navbar
+      p="md"
+      hiddenBreakpoint="sm"
+      height="100vh"
+      width={{ sm: 200, lg: 300 }}
+      hidden={status}
+    >
+      <Navbar.Section grow>
+        <Group className={classes.header} position="apart">
+          <Flex
+            direction="row"
+            align="center"
+            justify="space-between"
+            style={{ width: '100%' }}
+          >
+            <Flex direction="row" align="center" gap="sm">
+              <IconShoe size={30} strokeWidth={2} />
+              <Title order={3}>BDC Shoe</Title>
+            </Flex>
+
+            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+              <IconX size={30} strokeWidth={2} onClick={() => onToggle()} />
+            </MediaQuery>
+          </Flex>
+        </Group>
+
+        {links.map((item) => (
+          <NavLink
+            className={({ isActive }) =>
+              cx(classes.link, {
+                [classes.linkActive]: isActive,
+              })
+            }
+            to={item.link}
+            key={item.label}
+          >
+            <item.icon className={classes.linkIcon} stroke={1.5} />
+            <span>{item.label}</span>
+          </NavLink>
+        ))}
+      </Navbar.Section>
+
+      <Navbar.Section className={classes.footer}>
+        <a
+          href="#"
+          className={classes.link}
+          onClick={(event) => event.preventDefault()}
+        >
+          <IconLogout className={classes.linkIcon} stroke={1.5} />
+          <span>Logout</span>
+        </a>
+      </Navbar.Section>
+    </Navbar>
+  );
+}
diff --git a/src/components/navbar/style.js b/src/components/navbar/style.js
@@ -0,0 +1,57 @@
+import { createStyles, getStylesRef, rem } from '@mantine/core';
+
+export const useStyles = createStyles((theme) => ({
+  header: {
+    paddingBottom: theme.spacing.md,
+    marginBottom: `calc(${theme.spacing.md} * 1.5)`,
+    borderBottom: `${rem(1)} solid ${theme.colors.gray[2]}`,
+  },
+
+  footer: {
+    paddingTop: theme.spacing.md,
+    marginTop: theme.spacing.md,
+    borderTop: `${rem(1)} solid ${theme.colors.gray[2]}`,
+  },
+
+  link: {
+    ...theme.fn.focusStyles(),
+    display: 'flex',
+    alignItems: 'center',
+    textDecoration: 'none',
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.gray[7],
+    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+    borderRadius: theme.radius.sm,
+    fontWeight: 500,
+
+    '&:hover': {
+      backgroundColor: theme.colors.gray[0],
+      color: theme.black,
+
+      [`& .${getStylesRef('icon')}`]: {
+        color: theme.black,
+      },
+    },
+  },
+
+  linkIcon: {
+    ref: getStylesRef('icon'),
+    color: 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,
+      },
+    },
+  },
+}));
diff --git a/src/layouts/main.jsx b/src/layouts/main.jsx
@@ -1,5 +1,35 @@
-import { Outlet } from "react-router-dom";
+import { useState } from 'react';
+import { Outlet, useNavigation } from 'react-router-dom';
+import { AppShell, Container, LoadingOverlay } from '@mantine/core';
+
+import NavbarMain from '../components/navbar';
+import { HeaderMain } from '../components/header';
 
 export default function LayoutMain() {
-  return <Outlet />;
+  const navigation = useNavigation();
+
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <>
+      <LoadingOverlay
+        visible={navigation.state === 'loading'}
+        overlayBlur={2}
+      />
+
+      <AppShell
+        layout="alt"
+        navbarOffsetBreakpoint="sm"
+        asideOffsetBreakpoint="sm"
+        navbar={
+          <NavbarMain status={!opened} onToggle={() => setOpened(!opened)} />
+        }
+        header={<HeaderMain onToggle={() => setOpened(!opened)} />}
+      >
+        <Container size="xl">
+          <Outlet />
+        </Container>
+      </AppShell>
+    </>
+  );
 }
diff --git a/src/pages/category/create.jsx b/src/pages/category/create.jsx
@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { Button, Flex, Group, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+export default function PageCategoryCreate() {
+  return (
+    <>
+      <Flex direction="row" align="center" justify="space-between" mb="md">
+        <Title order={3} color="blue.5">
+          Add Category
+        </Title>
+
+        <Button
+          component={Link}
+          to="/category"
+          variant="outline"
+          leftIcon={<IconArrowBack />}
+        >
+          Back
+        </Button>
+      </Flex>
+
+      <form style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <TextInput
+          withAsterisk
+          size="md"
+          label="Name"
+          placeholder="Input category name"
+        />
+
+        <Group position="left" mt="md">
+          <Button type="submit">Submit</Button>
+        </Group>
+      </form>
+    </>
+  );
+}
diff --git a/src/pages/category/edit.jsx b/src/pages/category/edit.jsx
@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { Button, Flex, Group, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+export default function PageCategoryEdit() {
+  return (
+    <>
+      <Flex direction="row" align="center" justify="space-between" mb="md">
+        <Title order={3} color="blue.5">
+          Edit Category
+        </Title>
+
+        <Button
+          component={Link}
+          to="/category"
+          variant="outline"
+          leftIcon={<IconArrowBack />}
+        >
+          Back
+        </Button>
+      </Flex>
+
+      <form style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <TextInput
+          withAsterisk
+          size="md"
+          label="Name"
+          placeholder="Input category name"
+        />
+
+        <Group position="left" mt="md">
+          <Button type="submit">Submit</Button>
+        </Group>
+      </form>
+    </>
+  );
+}