fix: mobile navbar positioning, initial theme load

LABIOQUIM · May 31, 2023 · e0daf89 · e0daf89
1 parent f55bd9c
commit e0daf89
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 41 deletions.
diff --git a/apps/client/src/components/general/layout/header.tsx b/apps/client/src/components/general/layout/header.tsx
@@ -23,7 +23,7 @@ export function Header() {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <header className="sticky top-0 z-50 h-14 bg-white py-4 transition-all duration-150 dark:bg-zinc-900 lg:relative lg:top-auto">
+    <header className="sticky top-0 z-50 h-20 bg-white py-4 transition-all duration-150 dark:bg-zinc-900 lg:relative lg:top-auto">
       <div className="container mx-auto flex h-full items-center justify-between gap-x-4 px-6 text-primary-600 dark:text-primary-300">
         {/* <!-- Mobile hamburger --> */}
         <button

diff --git a/apps/client/src/components/general/layout/index.tsx b/apps/client/src/components/general/layout/index.tsx
@@ -1,11 +1,17 @@
 import { useEffect, useState } from "react";
+import { getCookie } from "cookies-next";
 import Router from "next/router";
 
 import { Backdrop } from "@app/components/general/backdrop";
 import { Header } from "@app/components/general/layout/header";
 import { Sidebar } from "@app/components/general/sidebar";
 import { PageLoadingIndicator } from "@app/components/Loading/PageLoadingIndicator";
 import { SidebarProvider, useSidebar } from "@app/context/SidebarContext";
+import {
+  Theme,
+  themeCookieKey,
+  ThemeProvider
+} from "@app/context/ThemeContext";
 import { useSignOut } from "@app/hooks/use-sign-out";
 
 interface ILayout {
@@ -32,26 +38,30 @@ export function Layout({ children }: ILayout) {
     };
   }, []);
 
+  const defaultTheme = getCookie(themeCookieKey) ?? "light";
+
   return (
-    <SidebarProvider>
-      {isChangingRoute ? (
-        <Backdrop className="z-[100] transition-all duration-150">
-          <PageLoadingIndicator />
-        </Backdrop>
-      ) : null}
-      <div
-        className={`h-screen bg-zinc-50 transition-all duration-150 dark:bg-zinc-900 ${
-          isSidebarOpen && "overflow-hidden"
-        }`}
-      >
-        <Header />
-        <div className="flex h-[calc(100%-3.5rem)]">
-          <Sidebar />
-          <main className="w-full space-y-4 bg-zinc-100 p-4 text-zinc-800 transition-all duration-150 dark:bg-zinc-950 dark:text-zinc-100 lg:overflow-y-auto lg:rounded-tl-3xl lg:border-l lg:border-t lg:border-l-zinc-400 lg:border-t-zinc-400 lg:p-8 dark:lg:border-l-zinc-600 dark:lg:border-t-zinc-600">
-            {children}
-          </main>
+    <ThemeProvider defaultTheme={defaultTheme as Theme}>
+      <SidebarProvider>
+        {isChangingRoute ? (
+          <Backdrop className="z-[100] transition-all duration-150">
+            <PageLoadingIndicator />
+          </Backdrop>
+        ) : null}
+        <div
+          className={`h-screen bg-zinc-50 transition-all duration-150 dark:bg-zinc-900 ${
+            isSidebarOpen && "overflow-hidden"
+          }`}
+        >
+          <Header />
+          <div className="flex min-h-[calc(100%-5rem)]">
+            <Sidebar />
+            <main className="w-full space-y-4 bg-zinc-100 p-4 text-zinc-800 transition-all duration-150 dark:bg-zinc-950 dark:text-zinc-100 lg:overflow-y-auto lg:rounded-tl-3xl lg:border-l lg:border-t lg:border-l-zinc-400 lg:border-t-zinc-400 lg:p-8 dark:lg:border-l-zinc-600 dark:lg:border-t-zinc-600">
+              {children}
+            </main>
+          </div>
         </div>
-      </div>
-    </SidebarProvider>
+      </SidebarProvider>
+    </ThemeProvider>
   );
 }
diff --git a/apps/client/src/components/general/sidebar/mobile.tsx b/apps/client/src/components/general/sidebar/mobile.tsx
@@ -33,7 +33,7 @@ export function MobileSidebar() {
           <Backdrop onClick={closeSidebar} />
           <motion.aside
             key="nav-aside"
-            className="fixed inset-y-0 z-50 mt-[4.5rem] flex w-80 flex-shrink-0 flex-col gap-y-7 overflow-y-auto bg-white py-2.5 shadow-[0_0_0_-15px_rgba(0,0,0,0.3)] transition-all duration-150 dark:bg-zinc-900"
+            className="fixed inset-y-0 z-50 mt-20 flex w-80 flex-shrink-0 flex-col gap-y-7 overflow-y-auto bg-white py-2.5 shadow-[0_0_0_-15px_rgba(0,0,0,0.3)] transition-all duration-150 dark:bg-zinc-900"
             initial={{ x: -320 }}
             animate={{ x: 0 }}
             exit={{ x: -320 }}

diff --git a/apps/client/src/context/ThemeContext.tsx b/apps/client/src/context/ThemeContext.tsx
@@ -19,10 +19,10 @@ export const themeCookieKey = "VISUALDYNAMICS_THEME";
 
 export function ThemeProvider({ children, defaultTheme }: ProviderProps) {
   const [theme, setTheme] = useState<Theme>(defaultTheme);
+  console.log(theme);
 
   function toggleTheme() {
     setCookie(themeCookieKey, theme === "light" ? "dark" : "light", {
-      sameSite: "strict",
       path: "/",
       maxAge: 60 * 60 * 24 * 31 * 12
     });

diff --git a/apps/client/src/pages/_app.tsx b/apps/client/src/pages/_app.tsx
@@ -1,17 +1,11 @@
 import React from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { getCookie, hasCookie } from "cookies-next";
 import { type AppProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { SessionProvider } from "next-auth/react";
 
 import { PageLoadingIndicator } from "@app/components/Loading/PageLoadingIndicator";
-import {
-  Theme,
-  themeCookieKey,
-  ThemeProvider
-} from "@app/context/ThemeContext";
 import { queryClient } from "@app/lib/query-client";
 
 import "@app/styles/globals.css";
@@ -47,9 +41,6 @@ export default function App({
   pageProps: { session, ...pageProps }
 }: AppProps) {
   if (typeof window === "undefined") React.useLayoutEffect = React.useEffect;
-  const defaultTheme = hasCookie(themeCookieKey)
-    ? getCookie(themeCookieKey)
-    : "light";
 
   return (
     <>
@@ -61,16 +52,14 @@ export default function App({
       </Head>
       <SessionProvider session={session}>
         <QueryClientProvider client={queryClient}>
-          <ThemeProvider defaultTheme={defaultTheme as Theme}>
-            <NextNProgress
-              height={5}
-              color="#22c55e"
-              options={{ showSpinner: false }}
-            />
-            <Layout>
-              <Component {...pageProps} />
-            </Layout>
-          </ThemeProvider>
+          <NextNProgress
+            height={5}
+            color="#22c55e"
+            options={{ showSpinner: false }}
+          />
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
           {process.env.NODE_ENV === "development" ? (
             <ReactQueryDevtools />
           ) : null}