From e559e2b5e8e8d50cbdcb025e99ec97d86e9bd009 Mon Sep 17 00:00:00 2001
From: tarunsoftprodigy <tarun_karki@softprodigy.com>
Date: Mon, 21 Oct 2024 21:18:47 +0530
Subject: [PATCH] made sidebar responsive

---
 mirror-2/app/home/components/sidebar.tsx | 30 ++++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/mirror-2/app/home/components/sidebar.tsx b/mirror-2/app/home/components/sidebar.tsx
index 13b2e8ef..9b50c30b 100644
--- a/mirror-2/app/home/components/sidebar.tsx
+++ b/mirror-2/app/home/components/sidebar.tsx
@@ -1,4 +1,6 @@
+'use client'
 import { cn } from '@/lib/utils'
+import { useEffect, useState } from 'react'
 
 import { Playlist } from '../data/playlists'
 import { Button } from '@/components/ui/button'
@@ -6,7 +8,6 @@ import Link from 'next/link'
 import { Axis3D, Gamepad2, PlusCircleIcon } from 'lucide-react'
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
@@ -69,7 +70,23 @@ const SidebarMenuForSmallScreen = () => {
   )
 }
 
-export function Sidebar({ className, playlists, style }: SidebarProps) {
+export function Sidebar({ className, style }: SidebarProps) {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [showSmallSideBar, setShowSmallSidebar] = useState(false)
+
+  const handleResize = () => setWindowWidth(window.innerWidth)
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  useEffect(() => {
+    if (windowWidth > 1024) {
+      setShowSmallSidebar(false)
+    }
+  }, [windowWidth])
+
   return (
     <>
       <div
@@ -149,9 +166,12 @@ export function Sidebar({ className, playlists, style }: SidebarProps) {
         </div>
       </div>
       {/* =========Sidebar button for smaller screens less than 1024px======= */}
-      <div className="space-y-4 py-4 mt-2 block sm:block md:block lg:hidden">
-        <Dialog>
-          <DialogTrigger>
+      <div className="space-y-4 py-4 mt-2 sm:block md:block lg:hidden sidebarMenuMobile">
+        <Dialog open={showSmallSideBar} onOpenChange={setShowSmallSidebar}>
+          <DialogTrigger
+            onClick={() => setShowSmallSidebar(true)}
+            className="p-2"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"