Made app responsive

pacholoamit · Jul 3, 2022 · 486a35e · 486a35e
1 parent 2046d33
commit 486a35e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 26 deletions.
diff --git a/web/components/layout/index.tsx b/web/components/layout/index.tsx
@@ -1,18 +1,31 @@
 import React from "react";
 import LayoutNavbar from "./layout-navbar";
 import LayoutHeader from "./layout-header";
-import { AppShell } from "@mantine/core";
+import { AppShell, useMantineTheme } from "@mantine/core";
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const theme = useMantineTheme();
+  const [opened, setOpened] = React.useState(false);
+  const styles = {
+    main: {
+      background:
+        theme.colorScheme === "dark"
+          ? theme.colors.dark[8]
+          : theme.colors.gray[0],
+    },
+  };
   return (
     <AppShell
       padding={"md"}
-      navbar={<LayoutNavbar />}
-      header={<LayoutHeader />}
+      navbar={<LayoutNavbar opened={opened} />}
+      header={<LayoutHeader opened={opened} setOpened={setOpened} />}
+      navbarOffsetBreakpoint="sm"
+      fixed
+      styles={styles}
     >
       {children}
     </AppShell>

diff --git a/web/components/layout/layout-header/index.tsx b/web/components/layout/layout-header/index.tsx
@@ -1,35 +1,27 @@
 import {
   ActionIcon,
+  Burger,
   Group,
   Header,
+  MediaQuery,
   Text,
   Title,
   useMantineColorScheme,
+  useMantineTheme,
 } from "@mantine/core";
 import Image from "next/image";
 import Link from "next/link";
 import { CSSProperties } from "react";
 import { Home, MoonStars, Sun } from "tabler-icons-react";
 
 const styles: { [key: string]: CSSProperties } = {
-  group: {
-    paddingLeft: 60,
-    paddingRight: 60,
-  },
-  title: {
-    paddingTop: 8,
+  container: {
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
   },
 };
 
-const HeaderTitle = () => {
-  return (
-    <Group spacing="xs" align={"center"}>
-      <Image src="/gopher.svg" alt="go logo" width="36" height="48" />
-      <Title style={styles.title}>GO TASK MGR</Title>
-    </Group>
-  );
-};
-
 const ColorSchemeToggle = () => {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const dark = colorScheme === "dark";
@@ -70,13 +62,35 @@ const HeaderOptions = () => {
     </Group>
   );
 };
-const LayoutHeader: React.FC = () => {
+
+interface LayoutHeaderProps {
+  opened: boolean;
+  setOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const LayoutHeader: React.FC<LayoutHeaderProps> = ({ opened, setOpened }) => {
+  const theme = useMantineTheme();
   return (
-    <Header height={72} p="xs">
-      <Group style={styles.group} position="apart">
-        <HeaderTitle />
-        <HeaderOptions />
-      </Group>
+    <Header height={72} p="md">
+      <div style={styles.container}>
+        <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+          <Burger
+            opened={opened}
+            onClick={() => setOpened((o) => !o)}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+          />
+        </MediaQuery>
+        <Group style={styles.group} position="apart">
+          <Group spacing="xs" align={"center"}>
+            <Image src="/gopher.svg" alt="go logo" width="36" height="48" />
+            <MediaQuery smallerThan={"xs"} styles={{ display: "none" }}>
+              <Title style={styles.title}>GO TASK MGR</Title>
+            </MediaQuery>
+          </Group>
+          <HeaderOptions />
+        </Group>
+      </div>
     </Header>
   );
 };

diff --git a/web/components/layout/layout-navbar/index.tsx b/web/components/layout/layout-navbar/index.tsx
@@ -2,9 +2,18 @@ import { Navbar, Space } from "@mantine/core";
 import ActionsSection from "./sections/actions.section";
 import ProjectsSection from "./sections/projects.section";
 
-const LayoutNavbar: React.FC = () => {
+interface LayoutNavbarProps {
+  opened: boolean;
+}
+
+const LayoutNavbar: React.FC<LayoutNavbarProps> = ({ opened }) => {
   return (
-    <Navbar width={{ base: 300 }} p="xs">
+    <Navbar
+      p="md"
+      hiddenBreakpoint="sm"
+      hidden={!opened}
+      width={{ sm: 200, lg: 300 }}
+    >
       <ActionsSection />
       <Space h="lg" />
       <ProjectsSection />