added a layout skeleton component

Gaucho-Racing · May 7, 2024 · d0d8b99 · d0d8b99
1 parent 1ada44c
commit d0d8b99
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 56 deletions.
diff --git a/dashboard/src/components/DashboardHeader.tsx → dashboard/src/components/Header.tsx b/dashboard/src/components/DashboardHeader.tsx → dashboard/src/components/Header.tsx
@@ -17,13 +17,13 @@ interface HeaderProps {
   style?: React.CSSProperties;
 }
 
-const DashboardHeader = (props: HeaderProps) => {
+const Header = (props: HeaderProps) => {
   const navigate = useNavigate();
 
   return (
     <nav
-      className={`bg- fixed top-0 w-full items-center justify-start ${props.className}`}
-      style={props.style}
+      className={`fixed top-0 z-10 w-full items-center justify-start bg-green-800 transition-all duration-200 ${props.className}`}
+      style={{ ...props.style }}
     >
       <div className="flex flex-row items-center justify-between">
         <div className="flex flex-row items-center p-4">
@@ -75,4 +75,4 @@ const DashboardHeader = (props: HeaderProps) => {
   );
 };
 
-export default DashboardHeader;
+export default Header;
diff --git a/dashboard/src/components/Layout.tsx b/dashboard/src/components/Layout.tsx
@@ -0,0 +1,84 @@
+import React, { PropsWithChildren } from "react";
+import { Loader2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { checkCredentials } from "@/lib/auth";
+import Header from "@/components/Header";
+import Sidebar from "@/components/Sidebar";
+
+const Layout: React.FC<PropsWithChildren> = ({ children }) => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = React.useState(true);
+
+  const [isSidebarExpanded, setSidebarExpanded] = React.useState(true);
+  const [sidebarWidth, setSidebarWidth] = React.useState(300);
+
+  React.useEffect(() => {
+    init();
+  }, []);
+
+  const init = async () => {
+    const currentRoute = window.location.pathname + window.location.search;
+    const status = await checkCredentials();
+    if (status != 0) {
+      navigate(`/auth/register?route=${currentRoute}`);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const expandSidebar = () => {
+    setSidebarExpanded(true);
+    setSidebarWidth(300);
+  };
+
+  const collapseSidebar = () => {
+    setSidebarExpanded(false);
+    setSidebarWidth(100);
+  };
+
+  const toggleSidebar = () => {
+    if (isSidebarExpanded) {
+      collapseSidebar();
+    } else {
+      expandSidebar();
+    }
+  };
+
+  const LoadingComponent = () => {
+    return (
+      <div className="mx-auto h-screen bg-black text-center">
+        <div className="flex h-full flex-col items-center justify-center p-32">
+          <Loader2 className="mr-2 h-8 w-8 animate-spin" />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {loading ? (
+        <LoadingComponent />
+      ) : (
+        <div className="flex">
+          <Sidebar
+            selectedPage="dashboard"
+            isSidebarExpanded={isSidebarExpanded}
+            sidebarWidth={sidebarWidth}
+            toggleSidebar={toggleSidebar}
+          />
+          <div className="w-full bg-red-900">
+            <Header style={{ left: sidebarWidth }} />
+            <div
+              className="mt-24 p-4 transition-all duration-200"
+              style={{ marginLeft: sidebarWidth }}
+            >
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Layout;
diff --git a/dashboard/src/components/Sidebar.tsx b/dashboard/src/components/Sidebar.tsx
@@ -0,0 +1,46 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "./ui/separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { currentUser } from "@/consts/config";
+import { SHA256 } from "crypto-js";
+import { useNavigate } from "react-router-dom";
+import { logout } from "@/lib/auth";
+import React, { createContext, useState, useContext } from "react";
+
+interface SidebarProps {
+  selectedPage: string;
+  className?: string;
+  style?: React.CSSProperties;
+  isSidebarExpanded: boolean;
+  sidebarWidth: number;
+  toggleSidebar: () => void;
+}
+
+const Sidebar = (props: SidebarProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <nav
+      className={`fixed left-0 top-0 z-10 bg-sky-800 transition-all duration-200 ${props.className}`}
+      style={{
+        height: "100vh",
+        width: props.sidebarWidth,
+        ...props.style,
+      }}
+      onClick={props.toggleSidebar}
+    >
+      <div className="flex h-full flex-col items-start justify-between">
+        <div>sidebar</div>
+        <div>user</div>
+      </div>
+    </nav>
+  );
+};
+
+export default Sidebar;
diff --git a/dashboard/src/pages/dashboard/DashboardPage.tsx b/dashboard/src/pages/dashboard/DashboardPage.tsx
@@ -1,65 +1,49 @@
-import React from "react";
-import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
-import { checkCredentials } from "@/lib/auth";
-import DashboardHeader from "@/components/DashboardHeader";
 import GR24PedalLiveWidget from "../gr24/pedal/PedalLiveWidget";
 import { Card } from "@/components/ui/card";
+import Layout from "@/components/Layout";
 
 function DashboardPage() {
   const navigate = useNavigate();
-  const [loading, setLoading] = React.useState(true);
-
-  React.useEffect(() => {
-    init();
-  }, []);
-
-  const init = async () => {
-    const status = await checkCredentials();
-    if (status != 0) {
-      navigate("/auth/register");
-    } else {
-      setLoading(false);
-    }
-  };
-
-  const LoadingComponent = () => {
-    return (
-      <div className="mx-auto h-screen bg-black text-center">
-        <div className="flex h-full flex-col items-center justify-center p-32">
-          <Loader2 className="mr-2 h-8 w-8 animate-spin" />
-        </div>
-      </div>
-    );
-  };
 
   return (
     <>
-      {loading ? (
-        <LoadingComponent />
-      ) : (
-        <div className="mt-24 w-full items-center justify-center">
-          <DashboardHeader />
-          <div className="m-4">
-            <h1>Dashboard</h1>
-            <p className="mt-2 text-neutral-400">I love singlestore</p>
-            <Button
-              className="mt-4 w-full"
-              onClick={() => navigate("/pedal")}
-              variant="outline"
-            >
-              Pedals
-            </Button>
-            <Card
-              className="m-2 overflow-hidden bg-background"
-              style={{ width: "300px", height: "300px" }}
-            >
-              <GR24PedalLiveWidget />
-            </Card>
-          </div>
-        </div>
-      )}
+      <Layout>
+        <h1>Dashboard</h1>
+        <p className="mt-2 text-neutral-400">I love singlestore</p>
+        <Button
+          className="mt-4 w-full"
+          onClick={() => navigate("/pedal")}
+          variant="outline"
+        >
+          Pedals
+        </Button>
+        <Card
+          className="m-2 overflow-hidden bg-background"
+          style={{ width: "300px", height: "300px" }}
+        >
+          <GR24PedalLiveWidget />
+        </Card>
+        <Card
+          className="m-2 overflow-hidden bg-background"
+          style={{ width: "300px", height: "300px" }}
+        >
+          <GR24PedalLiveWidget />
+        </Card>
+        <Card
+          className="m-2 overflow-hidden bg-background"
+          style={{ width: "300px", height: "300px" }}
+        >
+          <GR24PedalLiveWidget />
+        </Card>
+        <Card
+          className="m-2 overflow-hidden bg-background"
+          style={{ width: "300px", height: "300px" }}
+        >
+          <GR24PedalLiveWidget />
+        </Card>
+      </Layout>
     </>
   );
 }