enhanced the app bar collapse feature

package.json

@@ -103,6 +103,7 @@
     "eslint": "^8.56.0",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "prisma": "^5.18.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",

src/app/(main)/layout.tsx

@@ -1,15 +1,25 @@
+"use client";
 import { Appbar } from '@/components/Appbar';
+import { useRecoilValue } from 'recoil';
+import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
 }
 
-export default (props: Props) => {
+export default function Layout({children}: Props) {
+  const isCollapsed=useRecoilValue(isSideBarCollapsed);
   return (
     <div className="flex min-h-screen w-full">
       <Appbar />
-      <div className="wrapper w-full">{props.children}</div>
+      <main
+        className={`flex-1 transition-all duration-300 ${
+          isCollapsed ? 'ml-[5vw]' : 'ml-[21vw]'
+        }`}
+      >
+        {children}
+      </main>
     </div>
   );
-};
+}

src/app/courses/layout.tsx

@@ -1,15 +1,23 @@
+'use client';
 import { Appbar } from '@/components/Appbar';
+import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed';
 import React from 'react';
+import { useRecoilValue } from 'recoil';
 
 interface Props {
   children: React.ReactNode;
 }
 
 const CourseLayout = (props: Props) => {
+  const isCollapsed=useRecoilValue(isSideBarCollapsed);
   return (
     <div className="flex min-h-screen">
       <Appbar />
-      <div className="wrapper w-full">{props.children}</div>
+      <div className={`flex-1 transition-all duration-300 ${
+          isCollapsed ? 'ml-[5vw]' : 'ml-[21vw]'
+        }`}
+      >
+        {props.children}</div>
     </div>
   );
 };

src/components/Appbar.tsx

@@ -10,6 +10,8 @@ import {
 import { SidebarItems } from './ui/sidebar-items';
 import { useState, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
+import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed';
+import { useRecoilState } from 'recoil';
 
 export const menuOptions = [
   { id: 1, name: 'Home', Component: Home, href: '/home' },
@@ -45,6 +47,8 @@ export default useMediaQuery;
 
 export const Appbar = () => {
   const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isSidebarCollapsed,setIsSidebarCollapsed] = useRecoilState(isSideBarCollapsed);
+  setIsSidebarCollapsed(isCollapsed); 
   const [isMounted, setIsMounted] = useState(false);
   const isMediumToXL = useMediaQuery(
     '(min-width: 768px) and (max-width: 1535px)',
@@ -56,6 +60,7 @@ export const Appbar = () => {
     const handleClickOutside = (event: MouseEvent) => {
       if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
         setIsCollapsed(true);
+        setIsSidebarCollapsed(true);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
@@ -64,7 +69,10 @@ export const Appbar = () => {
     };   
   }, []);
 
-  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+  const toggleCollapse = () => {
+     setIsCollapsed(!isCollapsed);
+     setIsSidebarCollapsed(!isSidebarCollapsed);
+    };
 
   const sidebarVariants = {
     expanded: { width: '20vw' },
@@ -88,7 +96,7 @@ export const Appbar = () => {
         className="fixed left-0 top-0 z-[999] hidden h-full flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex min-w-16"
       >
         <div className="flex h-full flex-col gap-4">
-          <div className="flex w-full items-center border-b border-primary/10 px-2 py-4">
+          <div className="flex w-full items-center border-b border-primary/10 px-2 py-3">
             <div>
               <motion.button
                 onClick={toggleCollapse}

src/components/VideoPlayer2.tsx

@@ -111,9 +111,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   };
 
   const setupZoomFeatures = (player: any) => {
-
     if (typeof window === 'undefined' || typeof document === 'undefined') return;
-
     const videoEl = player.el().querySelector('video');
     const container = player.el();
 

src/components/posts/form/form-vote.tsx

@@ -54,7 +54,6 @@ const VoteForm: React.FC<IVoteFormProps> = ({
     );
   };
 
-
   const userVoted = Boolean(votesArr.length);
   const userVoteVal = votesArr[0];
 

src/store/atoms/isSideBarCollabsed.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isSideBarCollapsed = atom({
+  key: 'isSideBarCollapsed',
+  default: false,
+});