fixing appshell custom issues

leochoo · Mar 12, 2022 · 10c3aa9 · 10c3aa9
1 parent 81fc7e2
commit 10c3aa9
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/logo-only.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vocal Journal</title>
   </head>

diff --git a/src/assets/logo-only.png b/src/assets/logo-only.png
diff --git a/src/components/CustomHeader.tsx b/src/components/CustomHeader.tsx
@@ -0,0 +1,47 @@
+import {
+  Header,
+  MediaQuery,
+  Burger,
+  Group,
+  ThemeIcon,
+  Text,
+  NavbarProps,
+} from "@mantine/core";
+import { useMantineTheme } from "@mantine/core";
+
+export const CustomHeader = (
+  props: Omit<NavbarProps, "children">,
+  {
+    opened,
+    setOpened,
+  }: {
+    opened: boolean;
+    setOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  }
+) => {
+  const theme = useMantineTheme();
+
+  return (
+    <Header height={70} p="md">
+      {/* Handle other responsive styles with MediaQuery component or createStyles function */}
+      <div style={{ display: "flex", alignItems: "center", height: "100%" }}>
+        <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+          <Burger
+            opened={opened}
+            onClick={() => setOpened((o) => !o)}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+          />
+        </MediaQuery>
+
+        <Group>
+          <ThemeIcon variant="light" color="orange">
+            🎙
+          </ThemeIcon>
+          <Text>Mantine AppShell with React Router</Text>
+        </Group>
+      </div>
+    </Header>
+  );
+};
diff --git a/src/components/CustomNavBar.tsx b/src/components/CustomNavBar.tsx
@@ -11,6 +11,7 @@ import {
   SwitchHorizontal,
   Logout,
 } from "tabler-icons-react";
+import { Link } from "react-router-dom";
 import VocalJournalDarkLogo from "../assets/logo-light.png";
 
 const useStyles = createStyles((theme, _params, getRef) => {
@@ -25,7 +26,6 @@ const useStyles = createStyles((theme, _params, getRef) => {
           : theme.colors.gray[2]
       }`,
     },
-
     footer: {
       paddingTop: theme.spacing.md,
       marginTop: theme.spacing.md,
@@ -77,55 +77,66 @@ const useStyles = createStyles((theme, _params, getRef) => {
         backgroundColor:
           theme.colorScheme === "dark"
             ? theme.fn.rgba(theme.colors[theme.primaryColor][8], 0.25)
-            : theme.colors[theme.primaryColor][0],
+            : theme.colors.orange[0],
         color:
-          theme.colorScheme === "dark"
-            ? theme.white
-            : theme.colors[theme.primaryColor][7],
+          theme.colorScheme === "dark" ? theme.white : theme.colors.orange[7],
         [`& .${icon}`]: {
-          color:
-            theme.colors[theme.primaryColor][
-              theme.colorScheme === "dark" ? 5 : 7
-            ],
+          color: theme.colors.orange[theme.colorScheme === "dark" ? 5 : 7],
         },
       },
     },
   };
 });
 
 const data = [
-  { link: "", label: "Notifications", icon: BellRinging },
-  { link: "", label: "Billing", icon: Receipt2 },
-  { link: "", label: "Security", icon: Fingerprint },
+  { link: "/dashboard", label: "Dahsboard", icon: BellRinging },
+  { link: "/new-recording", label: "New Recording", icon: Receipt2 },
+  { link: "/calendar", label: "Calendar", icon: Fingerprint },
   { link: "", label: "SSH Keys", icon: Key },
   { link: "", label: "Databases", icon: DatabaseImport },
   { link: "", label: "Authentication", icon: TwoFA },
   { link: "", label: "Other Settings", icon: Settings },
 ];
 
-export function CustomNavBar() {
+interface Props {
+  opened: boolean;
+}
+
+export function CustomNavBar({ opened }: Props): JSX.Element {
   const { classes, cx } = useStyles();
   const [active, setActive] = useState("Billing");
 
   const links = data.map((item) => (
-    <a
+    <Link
+      to={item.link}
       className={cx(classes.link, {
         [classes.linkActive]: item.label === active,
       })}
       href={item.link}
       key={item.label}
       onClick={(event) => {
-        event.preventDefault();
+        // event.preventDefault();
         setActive(item.label);
       }}
     >
       <item.icon className={classes.linkIcon} />
       <span>{item.label}</span>
-    </a>
+    </Link>
   ));
 
   return (
-    <Navbar height={700} width={{ sm: 300 }} p="md">
+    // <Navbar height={700} width={{ sm: 300 }} p="md">
+    <Navbar
+      p="md"
+      // Breakpoint at which navbar will be hidden if hidden prop is true
+      hiddenBreakpoint="sm"
+      // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
+      hidden={!opened}
+      // when viewport size is less than theme.breakpoints.sm navbar width is 100%
+      // viewport size > theme.breakpoints.sm – width is 300px
+      // viewport size > theme.breakpoints.lg – width is 400px
+      width={{ sm: 300, lg: 400 }}
+    >
       <Navbar.Section grow>
         <Group className={classes.header} position="apart">
           <Image width={150} src={VocalJournalDarkLogo} alt="Vocal Journal" />

diff --git a/src/pages/WrapperPage.tsx b/src/pages/WrapperPage.tsx
@@ -12,6 +12,8 @@ import {
   ThemeIcon,
   UnstyledButton,
   useMantineTheme,
+  Image,
+  Code,
 } from "@mantine/core";
 import {
   CalendarIcon,
@@ -20,13 +22,22 @@ import {
   RocketIcon,
 } from "@radix-ui/react-icons";
 import { useLocation, Link } from "react-router-dom";
+import { CustomHeader } from "../components/CustomHeader";
 import { CustomNavBar } from "../components/CustomNavBar";
+import VocalJournalDarkLogo from "../assets/logo-light.png";
 
 interface Props {
   children: boolean | ReactChild | ReactFragment | ReactPortal;
 }
 
 const useStyles = createStyles((theme) => ({
+  header: {
+    paddingBottom: theme.spacing.md,
+    marginBottom: theme.spacing.md * 1.5,
+    borderBottom: `1px solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]
+    }`,
+  },
   button: {
     display: "block",
     width: "100%",
@@ -75,33 +86,59 @@ const WrapperPage = ({ children }: Props): JSX.Element => {
       // fixed prop on AppShell will be automatically added to Header and Navbar
       fixed
       header={
-        <Header height={70} p="md">
-          {/* Handle other responsive styles with MediaQuery component or createStyles function */}
-          <div
-            style={{ display: "flex", alignItems: "center", height: "100%" }}
-          >
-            <MediaQuery largerThan="sm" styles={{ display: "none" }}>
-              <Burger
-                opened={opened}
-                onClick={() => setOpened((o) => !o)}
-                size="sm"
-                color={theme.colors.gray[6]}
-                mr="xl"
-              />
-            </MediaQuery>
-            <Link to="/" className={classes.link}>
-              <Group>
-                <ThemeIcon variant="light" color="orange">
-                  🎙
-                </ThemeIcon>
-                <Text>Vocal Journal</Text>
-              </Group>
-            </Link>
-          </div>
-        </Header>
+        // <Header height={70} p="md">
+        //   {/* Handle other responsive styles with MediaQuery component or createStyles function */}
+        //   <div
+        //     style={{ display: "flex", alignItems: "center", height: "100%" }}
+        //   >
+        //     <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+        //       <Burger
+        //         opened={opened}
+        //         onClick={() => setOpened((o) => !o)}
+        //         size="sm"
+        //         color={theme.colors.gray[6]}
+        //         mr="xl"
+        //       />
+        //     </MediaQuery>
+
+        //     <Group>
+        //       <ThemeIcon variant="light" color="orange">
+        //         🎙
+        //       </ThemeIcon>
+        //       <Text>Mantine AppShell with React Router</Text>
+        //     </Group>
+        //   </div>
+        // </Header>
+        <CustomHeader opened={opened} setOpened={setOpened} />
+        // <Header height={70} p="md">
+        //   {/* Handle other responsive styles with MediaQuery component or createStyles function */}
+        //   <div
+        //     style={{ display: "flex", alignItems: "center", height: "100%" }}
+        //   >
+        //     <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+        //       <Burger
+        //         opened={opened}
+        //         onClick={() => setOpened((o) => !o)}
+        //         size="sm"
+        //         color={theme.colors.gray[6]}
+        //         mr="xl"
+        //       />
+        //     </MediaQuery>
+        //     <Link to="/" className={classes.link}>
+        //       <Group className={classes.header} position="apart">
+        //         <Image
+        //           width={150}
+        //           src={VocalJournalDarkLogo}
+        //           alt="Vocal Journal"
+        //         />
+        //         <Code sx={{ fontWeight: 700 }}>v0.1.0</Code>
+        //       </Group>
+        //     </Link>
+        //   </div>
+        // </Header>
       }
       navbar={
-        <CustomNavBar />
+        <CustomNavBar opened={opened} />
         // <Navbar
         //   padding="md"
         //   // Breakpoint at which navbar will be hidden if hidden prop is true
@@ -143,7 +180,6 @@ const WrapperPage = ({ children }: Props): JSX.Element => {
         //         <ThemeIcon variant="light" color="red">
         //           <RadiobuttonIcon />
         //         </ThemeIcon>
-
         //         <Text size="sm">New Recording</Text>
         //       </Group>
         //     </UnstyledButton>
@@ -161,7 +197,6 @@ const WrapperPage = ({ children }: Props): JSX.Element => {
         //         <ThemeIcon variant="light" color="orange">
         //           <CalendarIcon />
         //         </ThemeIcon>
-
         //         <Text size="sm">Calendar</Text>
         //       </Group>
         //     </UnstyledButton>