fix sidebar styling issues, add useMemo to createClient & update depe…

…ndencies
AmanVarshney01 · Mar 17, 2024 · 9ab9179 · 9ab9179
1 parent 9e4c154
commit 9ab9179
Show file tree

Hide file tree

Showing 13 changed files with 421 additions and 413 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,5 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["Supabase"],
-  "deno.enablePaths": ["supabase/functions"],
-  "deno.lint": true,
-  "deno.unstable": true
+  "cSpell.words": ["Supabase"]
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,8 +2,6 @@ import { Inter as FontSans } from "next/font/google";
 import "@/app/globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ReactQueryClientProvider } from "@/components/ReactQueryClientProvider";
-import { createClient } from "@/utils/supabase/server";
-import { cookies } from "next/headers";
 
 import { cn } from "@/lib/utils";
 import type { Viewport } from "next";
@@ -32,21 +30,16 @@ export const metadata = {
   description: "A project tracker for GLA students",
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const cookieStore = cookies();
-  const supabase = createClient(cookieStore);
-  const {
-    data: { session },
-  } = await supabase.auth.getSession();
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
-          "min-h-svh bg-background font-sans antialiased",
+          " bg-background font-sans antialiased",
           fontSans.variable,
         )}
       >
@@ -57,17 +50,13 @@ export default async function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            {session ? (
-              <main className="min-h-svh font-sans">
-                <Navbar />
-                <section className="flex flex-row">
-                  <Sidebar />
-                  {children}
-                </section>
-              </main>
-            ) : (
-              <main className="min-h-svh font-sans">{children}</main>
-            )}
+            <main className="flex h-svh flex-col md:flex-row">
+              <Navbar />
+              <Sidebar />
+              <section className="h-svh w-full overflow-y-auto">
+                {children}
+              </section>
+            </main>
           </ThemeProvider>
         </ReactQueryClientProvider>
       </body>

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -27,7 +27,7 @@ export default async function Login({
   }
 
   return (
-    <section className="flex min-h-svh w-full items-center justify-center bg-background">
+    <section className="fixed left-0 top-0 flex min-h-svh w-full items-center justify-center bg-background/90">
       <Card>
         <CardHeader>
           <CardTitle className=" text-xl">GLA Project Tracker</CardTitle>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,17 @@
+import { createClient } from "@/utils/supabase/server";
+import { cookies } from "next/headers";
+
 export default async function Index() {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+  // const { data, error } = await supabase.from("users").select("email");
+  // console.log("� ~ Index ~ data:", data);
+  // console.log("� ~ Index ~ error:", error);
+
   return (
-    <div className="">
+    <div>
       <h1>Project Dashboard</h1>
+
     </div>
   );
 }
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
@@ -31,7 +31,7 @@ export default async function AuthButton() {
 
   return (
     user && (
-      <div className="flex items-center justify-center">
+      <div className="flex items-center justify-center ">
         <DropdownMenu>
           <DropdownMenuTrigger className="flex items-center justify-center">
             <div className="flex flex-row items-center justify-between gap-2 ">

diff --git a/components/MobileSidebar.tsx b/components/MobileSidebar.tsx
@@ -11,11 +11,13 @@ import {
 export default function MobileSidebar() {
   return (
     <Sheet>
-      <SheetTrigger className=" block md:hidden">
+      <SheetTrigger>
         <HamburgerMenuIcon />
       </SheetTrigger>
       <SheetContent className="w-52" side={"left"}>
-        <SheetHeader>Project</SheetHeader>
+        <SheetHeader>
+          <SheetTitle>Project</SheetTitle>
+        </SheetHeader>
       </SheetContent>
     </Sheet>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -3,7 +3,7 @@ import MobileSidebar from "./MobileSidebar";
 
 export default function Navbar() {
   return (
-    <nav className="flex w-full flex-row justify-between border-b px-4 py-2">
+    <nav className=" flex w-full flex-row justify-between border-b px-4 py-2 md:hidden">
       <div className="flex flex-row gap-4">
         <MobileSidebar />
         <h1 className=" text-lg font-medium">GLA Project Tracker</h1>

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -1,12 +1,16 @@
-import { Button } from "./ui/button";
+import AuthButton from "./AuthButton";
+import MobileSidebar from "./MobileSidebar";
 
 export default function Sidebar() {
   return (
-    <aside className="hidden min-h-svh w-52 flex-col items-start gap-2 border-r md:flex">
-      <section className="p-4">
-        <h2>Your Project</h2>
-        {/* <Button variant="link">Project</Button> */}
-      </section>
+    <aside className=" hidden h-full min-w-52 flex-col items-start gap-2 border-r p-2 md:flex">
+      <h1 className=" self-center text-lg font-medium">GLA Project Tracker</h1>
+      <div className=" flex h-full w-full flex-col justify-between">
+        <div className=" p-4">
+          <h2>Your Project</h2>
+        </div>
+        <AuthButton />
+      </div>
     </aside>
   );
 }
diff --git a/middleware.ts b/middleware.ts
@@ -11,6 +11,7 @@ export async function middleware(request: NextRequest) {
     data: { session },
   } = await supabase.auth.getSession();
 
+  // FIXME - unprotected routes
   if (!session && pathname === "/") {
     return NextResponse.redirect(new URL("/login", request.url));
   }

diff --git a/package.json b/package.json
@@ -14,33 +14,33 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/ssr": "^0.1.0",
-    "@supabase/supabase-js": "^2.39.7",
-    "@tanstack/react-query": "^5.22.2",
-    "autoprefixer": "10.4.17",
+    "@supabase/supabase-js": "^2.39.8",
+    "@tanstack/react-query": "^5.28.4",
+    "autoprefixer": "10.4.18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "next": "^14.1.0",
-    "next-themes": "^0.2.1",
+    "next": "^14.1.3",
+    "next-themes": "^0.3.0",
     "postcss": "8.4.35",
     "postgres": "^3.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.50.1",
-    "tailwind-merge": "^2.2.1",
+    "react-hook-form": "^7.51.1",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.20.1",
-    "@tanstack/react-query-devtools": "^5.24.0",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
+    "@tanstack/eslint-plugin-query": "^5.27.7",
+    "@tanstack/react-query-devtools": "^5.28.4",
+    "@types/node": "20.11.28",
+    "@types/react": "18.2.66",
+    "@types/react-dom": "18.2.22",
     "encoding": "^0.1.13",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "supabase": "^1.145.4"
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "supabase": "^1.148.6"
   }
 }