From 71d9a82a0e85686d1252dfb0a263e566f83cb3c0 Mon Sep 17 00:00:00 2001
From: asim-shrestha <asim.shrestha@hotmail.com>
Date: Thu, 8 Jun 2023 15:20:58 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Fix=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next/src/layout/sidebar.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/next/src/layout/sidebar.tsx b/next/src/layout/sidebar.tsx
index 3edc8c27ab..92fe7bb018 100644
--- a/next/src/layout/sidebar.tsx
+++ b/next/src/layout/sidebar.tsx
@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from "react";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { useAuth } from "../hooks/useAuth";
 import type { Session } from "next-auth";
@@ -59,7 +59,7 @@ const LinkItem = (props: {
 const SidebarLayout = (props: Props) => {
   const router = useRouter();
   const { session, signIn, signOut, status } = useAuth();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [t] = useTranslation("drawer");
 
   const [showSettings, setShowSettings] = useState(false);
@@ -69,6 +69,20 @@ const SidebarLayout = (props: Props) => {
   });
   const userAgents = query.data ?? [];
 
+  useEffect(() => {
+    const handleResize = () => {
+      const isDesktop = window.innerWidth >= 1280
+      setSidebarOpen(isDesktop);
+    };
+    handleResize(); // Initial check on open
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+
   return (
     <div>
       <Transition.Root show={sidebarOpen} as={Fragment}>
@@ -192,7 +206,7 @@ const SidebarLayout = (props: Props) => {
       <main
         className={clsx("bg-gradient-to-b from-[#2B2B2B] to-[#1F1F1F]", sidebarOpen && "lg:pl-60")}
       >
-        <DottedGridBackground className="min-w-screenx">
+        <DottedGridBackground className="min-w-screen min-h-screen">
           <div>{props.children}</div>
         </DottedGridBackground>
       </main>