feat(src): ✨ Reorder entire dashboard to be unified

Remove different navbars, single nav, single layout
BuildTheEarth · Jul 31, 2024 · 3e14839 · 3e14839
1 parent 944ca03
commit 3e14839
Show file tree

Hide file tree

Showing 18 changed files with 130 additions and 209 deletions.
diff --git a/src/components/core/card/RawCard.tsx b/src/components/core/card/RawCard.tsx
@@ -95,7 +95,7 @@ export function RawCard({
                   color="gray"
                   aria-label="Edit Field"
                   component={Link}
-                  href={`/t/edit?fld=${props.id}`}
+                  href={`/team/edit?fld=${props.id}`}
                 >
                   <IconPencil
                     style={{ width: "70%", height: "70%" }}

diff --git a/src/components/layout/admin/navbar.tsx b/src/components/layout/admin/navbar.tsx
diff --git a/src/components/layout/buildTeam/navbar.tsx b/src/components/layout/buildTeam/navbar.tsx
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -1,15 +1,11 @@
 import { AppShell, Box, ScrollArea } from "@mantine/core";
 
-import AdminNavbar from "./admin/navbar";
-import BuildTeamNavbar from "./buildTeam/navbar";
-import ToolsNavbar from "./tools/navbar";
+import { default as Navbar } from "./navbar";
 
 export interface LayoutProps {
   children: React.ReactNode;
   currentLink: string;
-  tools?: boolean;
-  admin?: boolean;
-  team?: boolean;
+  currentSpace: "me" | "team";
   isLoading?: boolean;
   loader?: React.ReactNode;
 }
@@ -18,16 +14,6 @@ export interface LayoutProps {
  * Root layout of BuildTeam Pages
  */
 export default function Layout(props: LayoutProps) {
-  const Navbar = props.team
-    ? BuildTeamNavbar
-    : props.tools
-      ? ToolsNavbar
-      : props.admin
-        ? AdminNavbar
-        : () => {
-            return <></>;
-          };
-
   return (
     <AppShell
       navbar={{
@@ -38,7 +24,10 @@ export default function Layout(props: LayoutProps) {
       h="100vh"
     >
       <AppShell.Navbar p={0}>
-        <Navbar currentLink={props.currentLink} />
+        <Navbar
+          currentLink={props.currentLink}
+          currentSpace={props.currentSpace}
+        />
       </AppShell.Navbar>
 
       <AppShell.Main h="100vh" style={{ overflow: "hidden" }}>

diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { AppShellNavbar, Group, Image, Text } from "@mantine/core";
+import { IconLogout, IconSwitchHorizontal } from "@tabler/icons-react";
+
+import classes from "@/styles/Navbar.module.css";
+import { navLinks } from "@/util/links";
+import { signOut } from "next-auth/react";
+import Anchor from "../core/Anchor";
+
+export interface ToolsNavbar {
+  currentLink: string;
+  currentSpace: "me" | "team";
+}
+
+/**
+ * Main Navbar
+ */
+export default function ToolsNavbar(props: ToolsNavbar) {
+  const links = navLinks[props.currentSpace].map((item) => (
+    <a
+      className={classes.navbarLink}
+      data-active={item.link == props.currentLink}
+      href={item.link}
+      key={item.label}
+    >
+      <item.icon className={classes.navbarLinkIcon} stroke={1.5} />
+      <span>{item.label}</span>
+    </a>
+  ));
+
+  return (
+    <AppShellNavbar p={"sm"} h="100%">
+      <div className={classes.navbarTop}>
+        <Group className={classes.navbarHead} justify="space-between">
+          <Group>
+            <Image src="/logo.png" h={32} alt="BuildTheEarth Logo" />
+            <Text fw="bold" fz="xl" lineClamp={1}>
+              MyBuildTheEarth
+            </Text>
+          </Group>
+        </Group>
+
+        <div className={classes.navbarLinks}>{links}</div>
+      </div>
+      <div className={classes.navbarBottom}>
+        {props.currentSpace == "team" ? (
+          <Anchor href="/" className={classes.navbarLink} underline="never">
+            <IconSwitchHorizontal
+              className={classes.navbarLinkIcon}
+              stroke={1.5}
+            />
+            <span>My Dashboard</span>
+          </Anchor>
+        ) : (
+          <Anchor href="/team" className={classes.navbarLink} underline="never">
+            <IconSwitchHorizontal
+              className={classes.navbarLinkIcon}
+              stroke={1.5}
+            />
+            <span>Team Dashboard</span>
+          </Anchor>
+        )}
+
+        <a className={classes.navbarLink} onClick={() => signOut()}>
+          <IconLogout className={classes.navbarLinkIcon} stroke={1.5} />
+          <span>Logout</span>
+        </a>
+      </div>
+    </AppShellNavbar>
+  );
+}
diff --git a/src/components/layout/tools/navbar.tsx b/src/components/layout/tools/navbar.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -61,7 +61,10 @@ export default function Debug() {
             fz="sm"
             c="dimmed"
             onClick={() =>
-              signIn("keycloak", { callbackUrl: "/t/select", redirect: true })
+              signIn("keycloak", {
+                callbackUrl: "/team/select",
+                redirect: true,
+              })
             }
             style={{ cursor: "pointer" }}
           >

diff --git a/src/pages/t/index.tsx → src/pages/team/index.tsx b/src/pages/t/index.tsx → src/pages/team/index.tsx
@@ -24,7 +24,12 @@ export default function Home() {
   const { data, isLoading } = useBuildTeamData("/");
 
   return (
-    <Layout currentLink="/" team isLoading={isLoading} loader={<Loader />}>
+    <Layout
+      currentLink="/team"
+      currentSpace="team"
+      isLoading={isLoading}
+      loader={<Loader />}
+    >
       <Grid>
         <GridCol span={6}>
           <TextCard
@@ -197,7 +202,7 @@ export default function Home() {
                 </Anchor>
               </RawCard>
             </GridCol>
-          ),
+          )
         )}
       </Grid>
       <Divider mt="xl" mb="xs" />
@@ -244,7 +249,7 @@ export default function Home() {
               fw="bold"
               className="xl2"
               lineClamp={1}
-              href={`/t/members/${data?.creatorId}`}
+              href={`/team/members/${data?.creatorId}`}
               target="_blank"
             >
               {isLoading

diff --git a/src/pages/t/members/[id].tsx → src/pages/team/members/[id].tsx b/src/pages/t/members/[id].tsx → src/pages/team/members/[id].tsx
@@ -59,7 +59,7 @@ export default function Home() {
   );
 
   return (
-    <Layout currentLink="/members" team>
+    <Layout currentLink="/team/members" currentSpace="team">
       <Group mb="md" justify="space-between">
         <Group gap="xs">
           <ActionIcon variant="default" aria-label="Go back">
@@ -292,7 +292,7 @@ export default function Home() {
                           disabled={
                             application.buildteam.id != activeBuildTeam?.id
                           }
-                          href={`/t/applications/${application.id}`}
+                          href={`/team/applications/${application.id}`}
                         >
                           <IconEye size={16} />
                         </ActionIcon>

diff --git a/src/pages/t/members/index.tsx → src/pages/team/members/index.tsx b/src/pages/t/members/index.tsx → src/pages/team/members/index.tsx
@@ -27,7 +27,7 @@ export default function Home() {
   const { data, isLoading } = useBuildTeamData(`/members?page=${page}`);
 
   return (
-    <Layout currentLink="/members" team>
+    <Layout currentLink="/team/members" currentSpace="team">
       <DataTable
         withTableBorder
         borderRadius="sm"
@@ -101,7 +101,7 @@ export default function Home() {
                   variant="subtle"
                   color="gray"
                   component={Link}
-                  href={`/t/members/${record.id}`}
+                  href={`/team/members/${record.id}`}
                 >
                   <IconEye size={16} />
                 </ActionIcon>

diff --git a/src/pages/t/select.tsx → src/pages/team/select.tsx b/src/pages/t/select.tsx → src/pages/team/select.tsx
diff --git a/src/pages/t/tools.tsx → src/pages/team/tools.tsx b/src/pages/t/tools.tsx → src/pages/team/tools.tsx
@@ -20,20 +20,20 @@ export default function Home() {
       "/teams/[team]/manage/settings",
     ].map(
       (route) =>
-        "/" + lang + route.replaceAll("[team]", activeBuildTeam?.slug || ""),
-    ),
+        "/" + lang + route.replaceAll("[team]", activeBuildTeam?.slug || "")
+    )
   );
   const [loading, setLoading] = useState(false);
 
   const handleRerender = async () => {
     setLoading(true);
     await fetch(`/api/rerender?routes=${JSON.stringify(routes)}`).then((res) =>
-      setLoading(false),
+      setLoading(false)
     );
   };
 
   return (
-    <Layout currentLink="/tools" team>
+    <Layout currentLink="/team/tools" currentSpace="team">
       <Grid>
         <GridCol span={3}>
           <RawCard