Fold in sidebar, fix images

src/components/banner/HeroBanner.js

@@ -32,7 +32,7 @@ const HeroBanner = () => {
     return (
         <div className="relative flex justify-center items-center">
             <Image
-                src="/plebdevs-banner.jpg"
+                src="/images/plebdevs-banner.png"
                 alt="Banner"
                 width={1920}
                 height={1080}

src/components/navbar/Navbar.js

@@ -20,7 +20,7 @@ const Navbar = () => {
             <div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
                 <Image
                     alt="logo"
-                    src="/plebdevs-guy.jpg"
+                    src="/images/plebdevs-guy.png"
                     width={50}
                     height={50}
                     className="rounded-full mr-2 max-tab:hidden max-mob:hidden"

src/components/sidebar/Sidebar.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import { useRouter } from 'next/router';
 import { useSession, signOut } from 'next-auth/react';
+import { Button } from 'primereact/button';
 import 'primeicons/primeicons.css';
 import styles from "./sidebar.module.css";
 
 const Sidebar = () => {
+    const [isExpanded, setIsExpanded] = useState(true);
     const router = useRouter();
 
     // Helper function to determine if the path matches the current route
@@ -15,8 +17,29 @@ const Sidebar = () => {
 
     const { data: session } = useSession();
 
+    useEffect(() => {
+        // Notify parent component about sidebar state change
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('sidebarToggle', { detail: { isExpanded } }));
+        }
+    }, [isExpanded]);
+
+    const toggleSidebar = () => {
+        setIsExpanded(!isExpanded);
+    };
+
     return (
-        <div className='max-sidebar:hidden w-[14vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
+        <div className={`max-sidebar:hidden bg-gray-800 p-2 fixed h-[100%] flex flex-col transition-all duration-300 ease-in-out ${isExpanded ? 'w-[14vw]' : 'w-[50px]'}`}>
+            <Button
+                onClick={toggleSidebar}
+                size='small' 
+                className={`p-0 px-2 mt-1 w-fit ${isExpanded ? 'self-end' : 'self-center'}`}
+                outlined
+                icon={<i className={`pi ${isExpanded ? 'pi-chevron-left' : 'pi-chevron-right'} text-xs`} />}
+            >
+            </Button>
+            <div className="flex-grow overflow-y-auto">
+                {isExpanded ? (
                     <div className="flex-grow overflow-y-auto">
                         <div onClick={() => router.push('/')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
                             <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
@@ -76,6 +99,19 @@ const Sidebar = () => {
                             </AccordionTab>
                         </Accordion>
                     </div>
+                ) : (
+                    // Collapsed sidebar content (icons only)
+                    <div className="flex flex-col items-center">
+                        <i className="pi pi-home my-4 cursor-pointer" onClick={() => router.push('/')} />
+                        <i className="pi pi-list my-4 cursor-pointer" onClick={() => router.push('/content')} />
+                        <i className="pi pi-plus my-4 cursor-pointer" onClick={() => router.push('/create')} />
+                        <i className="pi pi-star my-4 cursor-pointer" onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} />
+                        <i className="pi pi-users my-4 cursor-pointer" onClick={() => router.push('/feed')} />
+                    </div>
+                )}
+            </div>
+            <div className='mt-auto'>
+                {isExpanded ? (
                     <div className='mt-auto'>
                         <div onClick={() => router.push('/profile?tab=settings')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=settings') ? 'bg-gray-700' : ''}`}>
                             <i className="pi pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
@@ -88,6 +124,13 @@ const Sidebar = () => {
                             <i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
                         </div>
                     </div>
+                ) : (
+                    <div className="flex flex-col items-center">
+                        <i className="pi pi-cog my-4 cursor-pointer" onClick={() => router.push('/profile?tab=settings')} />
+                        <i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} my-4 cursor-pointer`} onClick={() => session ? signOut() : router.push('/auth/signin')} />
+                    </div>
+                )}
+            </div>
         </div>
     );
 };

src/pages/_app.js

@@ -1,5 +1,5 @@
 import { PrimeReactProvider } from 'primereact/api';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import Navbar from '@/components/navbar/Navbar';
 import { ToastProvider } from '@/hooks/useToast';
 import { SessionProvider } from "next-auth/react"
@@ -24,6 +24,20 @@ const queryClient = new QueryClient()
 export default function MyApp({
     Component, pageProps: { session, ...pageProps }
 }) {
+    const [sidebarExpanded, setSidebarExpanded] = useState(true);
+
+    useEffect(() => {
+        const handleSidebarToggle = (event) => {
+            setSidebarExpanded(event.detail.isExpanded);
+        };
+
+        window.addEventListener('sidebarToggle', handleSidebarToggle);
+
+        return () => {
+            window.removeEventListener('sidebarToggle', handleSidebarToggle);
+        };
+    }, []);
+
     return (
         <PrimeReactProvider>
             <SessionProvider session={session}>
@@ -36,7 +50,6 @@ export default function MyApp({
                                     <div className='flex'>
                                         <Sidebar />
                                         <div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
-                                {/* <div className='max-w-[100vw]'> */}
                                             <Component {...pageProps} />
                                         </div>
                                     </div>

src/styles/globals.css

@@ -137,3 +137,4 @@ code {
 .hljs-addition {
   color: #ce9178;
 }
+