mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Fold in sidebar, fix images
This commit is contained in:
austinkelsay
parent
c776567cf3
commit
beb908c7f5
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@ -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}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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,78 +17,119 @@ 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">
|
||||
<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>
|
||||
</div>
|
||||
<Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
|
||||
<AccordionTab
|
||||
pt={{
|
||||
headerAction: ({ context }) => ({
|
||||
className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
||||
}),
|
||||
content: styles['p-accordion-content'],
|
||||
header: 'text-lg'
|
||||
}}
|
||||
header={'Content'}>
|
||||
<div onClick={() => router.push('/content?tag=all')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=all') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-eye text-sm pr-1"></i> All</p>
|
||||
{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>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
|
||||
<Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
|
||||
<AccordionTab
|
||||
pt={{
|
||||
headerAction: ({ context }) => ({
|
||||
className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
||||
}),
|
||||
content: styles['p-accordion-content'],
|
||||
header: 'text-lg'
|
||||
}}
|
||||
header={'Content'}>
|
||||
<div onClick={() => router.push('/content?tag=all')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=all') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-eye text-sm pr-1"></i> All</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=workshops')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=workshops') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=resources')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=resources') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
|
||||
</div>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
<div onClick={() => router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=workshops')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=workshops') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
|
||||
<div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/content?tag=resources')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=resources') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
|
||||
</div>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
<div onClick={() => router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
|
||||
</div>
|
||||
<div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
|
||||
</div>
|
||||
<Accordion activeIndex={0} className={styles['p-accordion']}>
|
||||
<AccordionTab
|
||||
pt={{
|
||||
headerAction: ({ context }) => ({
|
||||
className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
||||
}),
|
||||
content: styles['p-accordion-content'],
|
||||
header: 'text-lg'
|
||||
}}
|
||||
header={"Community"}>
|
||||
<div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=nostr') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=discord') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=stackernews') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
|
||||
</div>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
<Accordion activeIndex={0} className={styles['p-accordion']}>
|
||||
<AccordionTab
|
||||
pt={{
|
||||
headerAction: ({ context }) => ({
|
||||
className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
||||
}),
|
||||
content: styles['p-accordion-content'],
|
||||
header: 'text-lg'
|
||||
}}
|
||||
header={"Community"}>
|
||||
<div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=nostr') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=discord') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed?channel=stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=stackernews') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
|
||||
</div>
|
||||
</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'>
|
||||
<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>
|
||||
</div>
|
||||
<div onClick={() => session ? signOut() : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/auth/signin') ? 'bg-gray-700' : ''}`}>
|
||||
<i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
|
||||
</div>
|
||||
{/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
|
||||
<div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
|
||||
<i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
|
||||
</div>
|
||||
{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>
|
||||
</div>
|
||||
<div onClick={() => session ? signOut() : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/auth/signin') ? 'bg-gray-700' : ''}`}>
|
||||
<i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
|
||||
</div>
|
||||
{/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
|
||||
<div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -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,28 +24,41 @@ 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}>
|
||||
<NDKProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ToastProvider>
|
||||
<Layout>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
<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} />
|
||||
<ToastProvider>
|
||||
<Layout>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
<div className='flex'>
|
||||
<Sidebar />
|
||||
<div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar />
|
||||
</div>
|
||||
</div>
|
||||
<BottomBar />
|
||||
</div>
|
||||
</Layout>
|
||||
</ToastProvider>
|
||||
</QueryClientProvider>
|
||||
</NDKProvider>
|
||||
</Layout>
|
||||
</ToastProvider>
|
||||
</QueryClientProvider>
|
||||
</NDKProvider>
|
||||
</SessionProvider>
|
||||
</PrimeReactProvider>
|
||||
);
|
||||
|
||||
@ -136,4 +136,5 @@ code {
|
||||
.hljs-type,
|
||||
.hljs-addition {
|
||||
color: #ce9178;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user