From 3d8ba067e70bc27db80ad65456cadaa6be08fe15 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Sat, 15 Mar 2025 16:27:05 -0500 Subject: [PATCH] Remove sidebar, start centering pages and content --- src/components/sidebar/Sidebar.js | 151 ---------------------- src/components/sidebar/sidebar.module.css | 13 -- src/pages/_app.js | 17 +-- src/pages/feed.js | 25 ++-- 4 files changed, 13 insertions(+), 193 deletions(-) delete mode 100644 src/components/sidebar/Sidebar.js delete mode 100644 src/components/sidebar/sidebar.module.css diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js deleted file mode 100644 index 38c7576..0000000 --- a/src/components/sidebar/Sidebar.js +++ /dev/null @@ -1,151 +0,0 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { useRouter } from 'next/router'; -import { useSession, signOut } from 'next-auth/react'; -import { useIsAdmin } from '@/hooks/useIsAdmin'; -import { nip19 } from 'nostr-tools'; -import { useToast } from '@/hooks/useToast'; -import { useNDKContext } from '@/context/NDKContext'; -import 'primeicons/primeicons.css'; -import styles from "./sidebar.module.css"; -import { Divider } from 'primereact/divider'; - -const Sidebar = ({ course = false }) => { - const { isAdmin } = useIsAdmin(); - const [lessons, setLessons] = useState([]); - const router = useRouter(); - const { showToast } = useToast(); - const { ndk, addSigner } = useNDKContext(); - - // Helper function to determine if the path matches the current route - const isActive = (path) => { - if (path === '/content') { - return router.pathname === '/content'; - } - if (path === '/feed') { - return router.pathname === '/feed'; - } - return router.asPath === path; - }; - - const { data: session } = useSession(); - - useEffect(() => { - if (router.isReady) { - const { slug } = router.query; - - try { - if (slug && course) { - const { data } = nip19.decode(slug) - - if (!data) { - showToast('error', 'Error', 'Course not found'); - return; - } - - const id = data?.identifier; - const fetchCourse = async (id) => { - try { - await ndk.connect(); - - const filter = { - '#d': [id] - } - - const event = await ndk.fetchEvent(filter); - - if (event) { - // all a tags are lessons - const lessons = event.tags.filter(tag => tag[0] === 'a'); - const uniqueLessons = [...new Set(lessons.map(lesson => lesson[1]))]; - setLessons(uniqueLessons); - } - } catch (error) { - console.error('Error fetching event:', error); - } - }; - if (ndk && id) { - fetchCourse(id); - } - } - } catch (err) { - console.error(err); - } - } - }, [router.isReady, router.query, ndk, course]); - - const scrollToLesson = useCallback((index) => { - const lessonElement = document.getElementById(`lesson-${index}`); - if (lessonElement) { - lessonElement.scrollIntoView({ behavior: 'smooth' }); - } - }, []); - - useEffect(() => { - if (router.isReady && router.query.active) { - const activeIndex = parseInt(router.query.active); - scrollToLesson(activeIndex); - } - }, [router.isReady, router.query.active, scrollToLesson]); - - return ( -
-
- {course && lessons.length > 0 && ( -
-
router.push('/')} className="w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg"> -

Home

-
- {lessons.map((lesson, index) => ( -
{ - router.push(`/course/${router?.query?.slug}?active=${index}`, undefined, { shallow: true }); - scrollToLesson(index); - }} - className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive(`/course/${router?.query?.slug}?active=${index}`) ? 'bg-gray-700' : ''}`} - > -

Lesson {index + 1}

-
- ))} -
- )} - {!course && ( -
-
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' : ''}`}> -

Home

-
-
router.push('/content?tag=all')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''}`}> -

Content

-
-
router.push('/feed?channel=global')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}> -

Feeds

-
- {isAdmin && ( -
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' : ''}`}> -

Create

-
- )} -
session ? router.push('/profile?tab=subscribe') : router.push('/subscribe')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') || isActive('/subscribe') ? 'bg-gray-700' : ''}`}> -

Subscribe

-
-
- )} -
- -
-
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' : ''}`}> -

Settings

-
-
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' : ''}`}> -

{session ? 'Logout' : 'Login'}

-
- {/* 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? */} -
-

Logout

-
-
-
- ); -}; - -export default Sidebar; diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css deleted file mode 100644 index fa0da44..0000000 --- a/src/components/sidebar/sidebar.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.p-accordion .p-accordion-content { - border: none !important; - padding-top: 0px !important; - padding-bottom: 0px !important; -} -.p-accordion .p-accordion-header-link { - border: none !important; - padding-bottom: 12px !important; - padding-top: 12px !important; - margin-bottom: 8px !important; - border-bottom-left-radius: 7px !important; - border-bottom-right-radius: 7px !important; -} \ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index 496dc50..1c7dcb9 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -11,7 +11,6 @@ import 'primereact/resources/primereact.min.css'; import 'primeicons/primeicons.css'; import "@uiw/react-md-editor/markdown-editor.css"; import "@uiw/react-markdown-preview/markdown.css"; -import Sidebar from '@/components/sidebar/Sidebar'; import { useRouter } from 'next/router'; import { NDKProvider } from '@/context/NDKContext'; import { Analytics } from '@vercel/analytics/react'; @@ -26,13 +25,8 @@ const queryClient = new QueryClient() export default function MyApp({ Component, pageProps: { session, ...pageProps } }) { - const [isCourseView, setIsCourseView] = useState(false); const router = useRouter(); - useEffect(() => { - setIsCourseView(router.pathname.includes('course') && !router.pathname.includes('draft')); - }, [router.pathname]); - return ( @@ -42,13 +36,10 @@ export default function MyApp({
-
- -
- - -
-
+
+ + +
diff --git a/src/pages/feed.js b/src/pages/feed.js index 59f2ab7..4997c6b 100644 --- a/src/pages/feed.js +++ b/src/pages/feed.js @@ -30,7 +30,6 @@ const Feed = () => { setTitle(router.query.channel); }, [router.query.channel]); - // initialize the selected topic to the query parameter useEffect(() => { setSelectedTopic(router.query.channel); }, [router.query.channel]); @@ -51,8 +50,8 @@ const Feed = () => { }; return ( -
-
+
+

Feeds

{ items={allTopics} selectedTopic={selectedTopic} onTabChange={handleTopicChange} - className="max-w-[90%] mx-auto" + className="mb-4" /> - { - selectedTopic === 'global' && - } - { - selectedTopic === 'nostr' && - } - { - selectedTopic === 'discord' && - } - { - selectedTopic === 'stackernews' && - } +
+ {selectedTopic === 'global' && } + {selectedTopic === 'nostr' && } + {selectedTopic === 'discord' && } + {selectedTopic === 'stackernews' && } +
); };