Merge pull request #141 from sinamics/inital_state

Improved DOM render on intial page load for small devices
sinamics · Sep 11, 2023 · 0628743 · 0628743
2 parents 1bc5017 + 350ec9e
commit 0628743
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 53 deletions.
diff --git a/src/components/layouts/layout.tsx b/src/components/layouts/layout.tsx
@@ -55,10 +55,14 @@ export const LayoutAuthenticated = ({ children }: Props): JSX.Element => {
 		<div className="outer-content">
 			<Header />
 			<div className="flex">
-				<aside className={`transition-all duration-150 ease-in ${open ? "w-64" : "w-0 opacity-0"}`}>
+				<aside className={`duration-150 ${open ? "w-64" : "w-0 opacity-0"}`}>
 					<Sidebar />
 				</aside>
-				<div className={`flex-grow custom-overflow custom-scrollbar ${!open ? "flex-grow" : ""}`}>
+				<div
+					className={`flex-grow custom-overflow custom-scrollbar ${
+						!open ? "flex-grow" : ""
+					}`}
+				>
 					{children}
 					<Footer />
 				</div>
@@ -77,10 +81,14 @@ export const LayoutAdminAuthenticated = ({ children, props }: Props): JSX.Elemen
 		<div className="outer-content">
 			<Header />
 			<div className="flex">
-				<aside className={`transition-all duration-150 ease-in ${open ? "w-64" : "w-0 opacity-0"}`}>
+				<aside className={`duration-150 ${open ? "w-64" : "w-0 opacity-0"}`}>
 					<Sidebar />
 				</aside>
-				<div className={`flex-grow custom-overflow custom-scrollbar ${!open ? "flex-grow" : ""}`}>
+				<div
+					className={`flex-grow custom-overflow custom-scrollbar ${
+						!open ? "flex-grow" : ""
+					}`}
+				>
 					{children}
 					<Footer />
 				</div>

diff --git a/src/components/layouts/sidebar.tsx b/src/components/layouts/sidebar.tsx
@@ -27,23 +27,14 @@ const useIsBelowMd = () => {
 };
 
 const Sidebar = (): JSX.Element => {
-	const { open, toggle, setOpenState } = useSidebarStore();
+	const { open, setOpenState } = useSidebarStore();
 	const { data: session } = useSession();
 	const { data: me } = api.auth.me.useQuery();
 	const t = useTranslations("sidebar");
 	const isBelowMd = useIsBelowMd();
 	const sidebarRef = useRef<HTMLDivElement>();
 	const router = useRouter();
 
-	// Automatically close the sidebar if the screen size is below 'md'
-	useEffect(() => {
-		if (isBelowMd && open) {
-			setOpenState(false);
-		} else if (!isBelowMd && !open) {
-			setOpenState(true);
-		}
-	}, [isBelowMd, toggle]);
-
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			if (isBelowMd && open) {
@@ -61,12 +52,11 @@ const Sidebar = (): JSX.Element => {
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, [isBelowMd, open, setOpenState, sidebarRef]);
-  // className={`overflow-y-auto fixed z-10 h-full transition-all duration-150 ease-in md:relative md:shadow
-  //   ${open ? "w-64 opacity-100" : "w-0 opacity-0"}`}
+
 	return (
 		<aside
 			ref={sidebarRef}
-			className={`overflow-y-auto fixed z-10 h-full bg-base-200 transition-transform duration-150 ease-in-out md:relative md:shadow
+			className={`overflow-y-auto fixed z-10 h-full bg-base-200 transition-transform duration-150 ease-in md:relative md:shadow
 			${open ? "w-64" : "w-0"}`}
 		>
 			<div className="sidebar-content px-4 py-3">
@@ -173,40 +163,6 @@ const Sidebar = (): JSX.Element => {
 									{t("admin")}
 								</span>
 							</li>
-							{/* <li className="my-px">
-								<Link
-									href="/admin?tab=site-setting"
-									className={`flex h-10 flex-row items-center rounded-lg px-3 
-              ${
-								router.pathname === "/admin" && router.query.tab === "site-setting"
-									? "bg-gray-100 text-gray-700"
-									: "hover:bg-slate-700"
-							}`}
-								>
-									<span className="flex items-center justify-center text-lg text-gray-400">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-											strokeWidth="1.5"
-											stroke="currentColor"
-											className="h-6 w-6"
-										>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
-											/>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-											/>
-										</svg>
-									</span>
-									<span className="ml-3">{t("settings")}</span>
-								</Link>
-							</li> */}
 							<li className="my-px">
 								<Link
 									href="/admin?tab=mail-setting"

diff --git a/src/hooks/useHandleResize.tsx b/src/hooks/useHandleResize.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useSidebarStore } from "~/utils/store";
+
+// Create a custom hook
+export const useHandleResize = () => {
+	const { setOpenState } = useSidebarStore();
+
+	useEffect(() => {
+		const handleResize = () => {
+			if (window.innerWidth >= 768) return setOpenState(true);
+
+			setOpenState(false);
+		};
+
+		// Initial check
+		handleResize();
+
+		window.addEventListener("resize", handleResize);
+
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { type AppType } from "next/app";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
-import { type ReactElement, type ReactNode } from "react";
+import { useState, type ReactElement, type ReactNode } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import { api } from "~/utils/api";
@@ -14,6 +13,7 @@ import Modal from "~/components/elements/modal";
 import { useEffect } from "react";
 import { NextIntlClientProvider } from "next-intl";
 import { useRouter } from "next/router";
+import { useHandleResize } from "~/hooks/useHandleResize";
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
@@ -29,6 +29,14 @@ const App: AppType<{ session: Session | null }> = ({
 	pageProps: { session, messages, ...pageProps },
 }: AppPropsWithLayout) => {
 	const { asPath, locale, push } = useRouter();
+	const [isClient, setIsClient] = useState(false);
+
+	useHandleResize();
+
+	// just wait for the client to be ready. We check screen size in the useHandleResize hook
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
 
 	useEffect(() => {
 		// On component initialization, retrieve the preferred language from local storage
@@ -51,6 +59,10 @@ const App: AppType<{ session: Session | null }> = ({
 		});
 	}, []);
 	const getLayout = Component.getLayout ?? ((page) => page);
+
+	if (!isClient) {
+		return null;
+	}
 	return (
 		<ThemeProvider defaultTheme="system">
 			<NextIntlClientProvider onError={() => {}} messages={messages}>