add appshell layout

AliAkrem · Aug 30, 2024 · 3e90559 · 3e90559
1 parent da915ab
commit 3e90559
Show file tree

Hide file tree

Showing 14 changed files with 413 additions and 459 deletions.
diff --git a/app/(admin)/layout.module.css b/app/(admin)/layout.module.css
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
@@ -1,12 +1,14 @@
 import React, { ReactNode } from "react";
 import { Header } from "../../component/navbar";
-import { Container,  Flex,  } from "@mantine/core";
-import { NavbarNested } from "../../component/sidbar";
+
 import { createClient } from "../../utils/supabase/server";
-import { redirect, usePathname } from "next/navigation";
+import { redirect } from "next/navigation";
 import PageTitle from "../../component/pageTitle";
 
-import classes from "./layout.module.css";
+
+
+import AppShellLayout from "../../component/AppShellLayout";
+import { AppShellMain } from "@mantine/core";
 
 export default async function AdminLayout({
   children,
@@ -22,30 +24,13 @@ export default async function AdminLayout({
 
   return (
     <>
-      <div
-        style={{
-          zIndex : 'calc(var(--mantine-z-index-max) + 1)',
-          position: "sticky",
-          top: 0,
-          backgroundColor : 'var(--mantine-color-default)'
-        }}
-      >
-        <Header />
-      </div>
-
-      <Flex w={"100%"} justify={"space-between"}  >
-        <div className={classes.sidbar}>
-          <NavbarNested />
-
-        </div>
-
-        <Container fluid className={classes.pages}>
-          <div style={{ marginTop: "40px" }}>
-            <PageTitle />
-            {children}
-          </div>
-        </Container>
-      </Flex>
+      <AppShellLayout>
+
+        <AppShellMain>
+          <PageTitle />
+          {children}
+        </AppShellMain>
+      </AppShellLayout>
     </>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { LoginCard } from "../../component/loginCard";
-import { Alert } from "@mantine/core";
+import { Alert, AppShell, AppShellMain } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { createClient } from "../../utils/supabase/server";
 import { redirect } from "next/navigation";
@@ -25,9 +25,12 @@ export default async function LoginPage({ searchParams }: Props) {
           {searchParams.error}
         </Alert>
       ) : null}
-
-      <Header/>
-      <LoginCard />
+      <AppShell header={{ height: 60 }} padding="md">
+        <Header  />
+        <AppShellMain>
+          <LoginCard />
+        </AppShellMain>
+      </AppShell>
     </>
   );
 }
diff --git a/component/linkGroups/index.tsx b/component/linkGroups/index.tsx
@@ -34,7 +34,7 @@ export function LinksGroup({
   const [opened, setOpened] = useState(initiallyOpened || false);
   const items = (hasLinks ? links : []).map((link) => (
     <Text
-      fz={'md'}
+      fz={"sm"}
       component={Link}
       href={link.link}
       className={classes.link}
@@ -47,6 +47,7 @@ export function LinksGroup({
   return (
     <>
       <UnstyledButton
+        variant="transparent"
         component={Link}
         href={link ?? "#"}
         className={classes.control}
@@ -56,7 +57,9 @@ export function LinksGroup({
             <ThemeIcon variant="light" size={30}>
               <Icon style={{ width: rem(18), height: rem(18) }} />
             </ThemeIcon>
-            <Box ml="md"><Text fz={'lg'} >{label}</Text> </Box>
+            <Box ml="md">
+              <Text fz={"sm"}>{label}</Text>
+            </Box>
           </Box>
         </Group>
       </UnstyledButton>
@@ -65,20 +68,20 @@ export function LinksGroup({
   );
 }
 
-const mockdata = {
-  label: "Releases",
-  icon: IconCalendarStats,
-  links: [
-    { label: "Upcoming releases", link: "/" },
-    { label: "Previous releases", link: "/" },
-    { label: "Releases schedule", link: "/" },
-  ],
-};
+// const mockdata = {
+//   label: "Releases",
+//   icon: IconCalendarStats,
+//   links: [
+//     { label: "Upcoming releases", link: "/" },
+//     { label: "Previous releases", link: "/" },
+//     { label: "Releases schedule", link: "/" },
+//   ],
+// };
 
-export function NavbarLinksGroup() {
-  return (
-    <Box mih={220} p="md">
-      <LinksGroup {...mockdata} />
-    </Box>
-  );
-}
+// export function NavbarLinksGroup() {
+//   return (
+//     <Box mih={220} p="md">
+//       <LinksGroup {...mockdata} />
+//     </Box>
+//   );
+// }
diff --git a/component/navbar/index.tsx b/component/navbar/index.tsx
@@ -1,5 +1,14 @@
 "use client";
-import { Group, Burger, Title, Drawer, Text, useMantineColorScheme, useComputedColorScheme } from "@mantine/core";
+import {
+  Group,
+  Burger,
+  Title,
+  Drawer,
+  Text,
+  useMantineColorScheme,
+  useComputedColorScheme,
+  AppShellHeader,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import classes from "./navbar.module.css";
 import { ScrollArea } from "@mantine/core";
@@ -21,34 +30,31 @@ import { useEffect, useState } from "react";
 import { Session, User } from "@supabase/supabase-js";
 import { modals } from "@mantine/modals";
 
-export function Header() {
-  const [opened, { toggle }] = useDisclosure(false);
+type Props = {
+  opened?: boolean;
+  toggle?: () => void;
+};
+
+export function Header({ opened, toggle }: Props) {
+  // const [opened, { toggle }] = useDisclosure(false);
 
   const pathname = usePathname();
 
   const leading =
     pathname.split("/")[1] !== "login" ? (
-      <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
+      <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
     ) : (
       <ColorSchemeButton />
     );
 
   return (
     <>
-      <div className={classes.header}>
-        <div className={classes.inner}>
-          <Group align="center">
-            {leading}
-            <Title order={4}>Student Management System</Title>
-          </Group>
-        </div>
-      </div>
-
-      {pathname.split("/")[1] !== "login" && (
-        <Drawer withCloseButton={false} opened={opened} onClose={toggle}>
-          <NavbarNested toggle={toggle} />
-        </Drawer>
-      )}
+      <AppShellHeader>
+        <Group h="100%" px="md">
+          {leading}
+          <Title order={4}>Student Management System</Title>
+        </Group>
+      </AppShellHeader>
     </>
   );
 }
@@ -91,43 +97,40 @@ export function NavbarNested({ toggle }: { toggle: () => void }) {
     </div>
   ));
 
-
-
   const { setColorScheme } = useMantineColorScheme();
   const computedColorScheme = useComputedColorScheme("light", {
     getInitialValueInEffect: true,
   });
 
-
   const openLogoutModal = () =>
     modals.openConfirmModal({
       title: "Sign-out",
       centered: true,
       children: <Text size="sm">Are you sure you want to sign-out?</Text>,
       labels: { confirm: "Sign-out", cancel: "Cancel" },
       confirmProps: { color: "red" },
-      onConfirm:  async () => {
+      onConfirm: async () => {
         await supabase.auth.signOut();
         router.refresh();
       },
     });
 
   return (
     <nav>
-      <ScrollArea pt={"40px"}>
+      <ScrollArea>
         <div>
           {links}
 
           <div onClick={openLogoutModal}>
             <LinksGroup {...{ label: "Logout", icon: IconLogout }} />
           </div>
-          <div 
-               onClick={() =>
-                setColorScheme(computedColorScheme === "light" ? "dark" : "light")
-              }
-            >
-              <LinksGroup {...{ label: "Theme", icon: ColorSchemeButton }} />
-            </div>
+          <div
+            onClick={() =>
+              setColorScheme(computedColorScheme === "light" ? "dark" : "light")
+            }
+          >
+            <LinksGroup {...{ label: "Theme", icon: ColorSchemeButton }} />
+          </div>
         </div>
       </ScrollArea>
     </nav>

diff --git a/component/navbar/navbar.module.css b/component/navbar/navbar.module.css
@@ -1,5 +1,5 @@
 .header {
-    height: rem(56px);
+    /* height: rem(56px); */
     width: 100%;
     z-index: calc(var(--mantine-z-index-max) );
 
@@ -10,7 +10,7 @@
 
   .inner {
 
-    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    /* border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); */
     height: rem(56px);
     display: flex;
     justify-content: space-between;

diff --git a/component/sidbar/index.tsx b/component/sidbar/index.tsx
@@ -1,6 +1,11 @@
 "use client";
 
-import { ScrollArea, Text, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import {
+  ScrollArea,
+  Text,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
 import {
   IconNotes,
   IconCalendarStats,
@@ -37,13 +42,20 @@ const mockdata = [
   { label: "account", icon: IconSettings, link: "/account" },
 ];
 
-export function NavbarNested() {
+export function NavbarNested({ toggle }: { toggle?: () => void }) {
   const supabase = createClient();
 
   const router = useRouter();
 
   const links = mockdata.map((item) => (
-    <LinksGroup {...item} key={item.label} />
+    <div
+      key={item.label}
+      onClick={() => {
+        toggle && toggle();
+      }}
+    >
+      <LinksGroup {...item} key={item.label} />
+    </div>
   ));
 
   const openLogoutModal = () =>
@@ -59,35 +71,32 @@ export function NavbarNested() {
       },
     });
 
-
-
-
-    const { setColorScheme } = useMantineColorScheme();
-    const computedColorScheme = useComputedColorScheme("light", {
-      getInitialValueInEffect: true,
-    });
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light", {
+    getInitialValueInEffect: true,
+  });
 
   return (
     <>
       <nav className={classes.navbar}>
-        <ScrollArea className={classes.links}>
-          <div className={classes.linksInner}>
+        <ScrollArea>
+          <div className={classes.links}>
             {links}
             <div onClick={openLogoutModal}>
               <LinksGroup {...{ label: "Logout", icon: IconLogout }} />
             </div>
 
-            <div 
-               onClick={() =>
-                setColorScheme(computedColorScheme === "light" ? "dark" : "light")
+            <div
+              onClick={() =>
+                setColorScheme(
+                  computedColorScheme === "light" ? "dark" : "light"
+                )
               }
             >
               <LinksGroup {...{ label: "Theme", icon: ColorSchemeButton }} />
             </div>
           </div>
         </ScrollArea>
-
-        <div className={classes.footer}></div>
       </nav>
     </>
   );