mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-06 18:31:00 +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 (
|
return (
|
||||||
<div className="relative flex justify-center items-center">
|
<div className="relative flex justify-center items-center">
|
||||||
<Image
|
<Image
|
||||||
src="/plebdevs-banner.jpg"
|
src="/images/plebdevs-banner.png"
|
||||||
alt="Banner"
|
alt="Banner"
|
||||||
width={1920}
|
width={1920}
|
||||||
height={1080}
|
height={1080}
|
||||||
|
|||||||
@ -20,7 +20,7 @@ const Navbar = () => {
|
|||||||
<div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
|
<div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
|
||||||
<Image
|
<Image
|
||||||
alt="logo"
|
alt="logo"
|
||||||
src="/plebdevs-guy.jpg"
|
src="/images/plebdevs-guy.png"
|
||||||
width={50}
|
width={50}
|
||||||
height={50}
|
height={50}
|
||||||
className="rounded-full mr-2 max-tab:hidden max-mob:hidden"
|
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 { Accordion, AccordionTab } from 'primereact/accordion';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { useSession, signOut } from 'next-auth/react';
|
import { useSession, signOut } from 'next-auth/react';
|
||||||
|
import { Button } from 'primereact/button';
|
||||||
import 'primeicons/primeicons.css';
|
import 'primeicons/primeicons.css';
|
||||||
import styles from "./sidebar.module.css";
|
import styles from "./sidebar.module.css";
|
||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
|
const [isExpanded, setIsExpanded] = useState(true);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
// Helper function to determine if the path matches the current route
|
// Helper function to determine if the path matches the current route
|
||||||
@ -15,78 +17,119 @@ const Sidebar = () => {
|
|||||||
|
|
||||||
const { data: session } = useSession();
|
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 (
|
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 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' : ''}`}>
|
{isExpanded ? (
|
||||||
<i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
|
<div className="flex-grow overflow-y-auto">
|
||||||
</div>
|
<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' : ''}`}>
|
||||||
<Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
|
<i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
|
||||||
<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>
|
||||||
<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' : ''}`}>
|
<Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
|
<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>
|
||||||
<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' : ''}`}>
|
<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' : ''}`}>
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
|
<i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
|
||||||
</div>
|
</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' : ''}`}>
|
<Accordion activeIndex={0} className={styles['p-accordion']}>
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
|
<AccordionTab
|
||||||
</div>
|
pt={{
|
||||||
</AccordionTab>
|
headerAction: ({ context }) => ({
|
||||||
</Accordion>
|
className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
||||||
<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>
|
content: styles['p-accordion-content'],
|
||||||
</div>
|
header: 'text-lg'
|
||||||
<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>
|
header={"Community"}>
|
||||||
</div>
|
<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' : ''}`}>
|
||||||
<Accordion activeIndex={0} className={styles['p-accordion']}>
|
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
|
||||||
<AccordionTab
|
</div>
|
||||||
pt={{
|
<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' : ''}`}>
|
||||||
headerAction: ({ context }) => ({
|
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
|
||||||
className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
|
</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' : ''}`}>
|
||||||
content: styles['p-accordion-content'],
|
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
|
||||||
header: 'text-lg'
|
</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' : ''}`}>
|
||||||
header={"Community"}>
|
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
|
||||||
<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' : ''}`}>
|
</div>
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
|
</AccordionTab>
|
||||||
</div>
|
</Accordion>
|
||||||
<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' : ''}`}>
|
</div>
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
|
) : (
|
||||||
</div>
|
// Collapsed sidebar content (icons only)
|
||||||
<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' : ''}`}>
|
<div className="flex flex-col items-center">
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
|
<i className="pi pi-home my-4 cursor-pointer" onClick={() => router.push('/')} />
|
||||||
</div>
|
<i className="pi pi-list my-4 cursor-pointer" onClick={() => router.push('/content')} />
|
||||||
<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' : ''}`}>
|
<i className="pi pi-plus my-4 cursor-pointer" onClick={() => router.push('/create')} />
|
||||||
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
|
<i className="pi pi-star my-4 cursor-pointer" onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} />
|
||||||
</div>
|
<i className="pi pi-users my-4 cursor-pointer" onClick={() => router.push('/feed')} />
|
||||||
</AccordionTab>
|
</div>
|
||||||
</Accordion>
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className='mt-auto'>
|
<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' : ''}`}>
|
{isExpanded ? (
|
||||||
<i className="pi pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
|
<div className='mt-auto'>
|
||||||
</div>
|
<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' : ''}`}>
|
||||||
<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 pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
|
||||||
<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>
|
||||||
</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' : ''}`}>
|
||||||
{/* 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? */}
|
<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 onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
|
</div>
|
||||||
<i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
|
{/* 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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { PrimeReactProvider } from 'primereact/api';
|
import { PrimeReactProvider } from 'primereact/api';
|
||||||
import { useEffect } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import Navbar from '@/components/navbar/Navbar';
|
import Navbar from '@/components/navbar/Navbar';
|
||||||
import { ToastProvider } from '@/hooks/useToast';
|
import { ToastProvider } from '@/hooks/useToast';
|
||||||
import { SessionProvider } from "next-auth/react"
|
import { SessionProvider } from "next-auth/react"
|
||||||
@ -24,28 +24,41 @@ const queryClient = new QueryClient()
|
|||||||
export default function MyApp({
|
export default function MyApp({
|
||||||
Component, pageProps: { session, ...pageProps }
|
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 (
|
return (
|
||||||
<PrimeReactProvider>
|
<PrimeReactProvider>
|
||||||
<SessionProvider session={session}>
|
<SessionProvider session={session}>
|
||||||
<NDKProvider>
|
<NDKProvider>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<ToastProvider>
|
<ToastProvider>
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="flex flex-col min-h-screen">
|
<div className="flex flex-col min-h-screen">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div className='flex'>
|
<div className='flex'>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
|
<div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
|
||||||
{/* <div className='max-w-[100vw]'> */}
|
<Component {...pageProps} />
|
||||||
<Component {...pageProps} />
|
</div>
|
||||||
|
</div>
|
||||||
|
<BottomBar />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Layout>
|
||||||
<BottomBar />
|
</ToastProvider>
|
||||||
</div>
|
</QueryClientProvider>
|
||||||
</Layout>
|
</NDKProvider>
|
||||||
</ToastProvider>
|
|
||||||
</QueryClientProvider>
|
|
||||||
</NDKProvider>
|
|
||||||
</SessionProvider>
|
</SessionProvider>
|
||||||
</PrimeReactProvider>
|
</PrimeReactProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -136,4 +136,5 @@ code {
|
|||||||
.hljs-type,
|
.hljs-type,
|
||||||
.hljs-addition {
|
.hljs-addition {
|
||||||
color: #ce9178;
|
color: #ce9178;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user