router.push(`/course/${course.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer">
+
router.push(`/course/${course.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8">
{course.title}
{course.summary}
Published: {formatTimestampToHowLongAgo(course.published_at)}
- {/*
-
-
-
*/}
);
@@ -51,7 +47,7 @@ export default function CoursesCarousel() {
return (
<>
-
Courses
+
courses
);
diff --git a/src/components/menutab/MenuTab.js b/src/components/menutab/MenuTab.js
new file mode 100644
index 0000000..240b665
--- /dev/null
+++ b/src/components/menutab/MenuTab.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function MenuTab({items}) {
+ return (
+
+ ({
+ className: 'bg-transparent border-none',
+ }),
+ action: ({ context }) => ({
+ className: 'bg-transparent border-none'
+ })
+ }
+ }}
+ />
+
+ )
+}
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
index 535cfe2..2a3c769 100644
--- a/src/components/navbar/Navbar.js
+++ b/src/components/navbar/Navbar.js
@@ -1,6 +1,7 @@
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
import Image from 'next/image';
import UserAvatar from './user/UserAvatar';
+import MenuTab from '../menutab/MenuTab';
import { Menubar } from 'primereact/menubar';
import { useRouter } from 'next/router';
import 'primereact/resources/primereact.min.css';
@@ -11,20 +12,22 @@ const Navbar = () => {
const router = useRouter();
const start = (
-
router.push('/')} className={styles.titleContainer}>
-
-
PlebDevs
+
+
router.push('/')} className={styles.titleContainer}>
+
+
PlebDevs
+
);
return (
-
+
);
};
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
new file mode 100644
index 0000000..3dbecc6
--- /dev/null
+++ b/src/components/sidebar/Sidebar.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { useRouter } from 'next/router';
+import 'primeicons/primeicons.css';
+
+const Sidebar = () => {
+ const router = useRouter();
+
+ return (
+
+
router.push('/')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
Home
+
+
router.push('/content')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
Content
+
+
+
({
+ className: 'border-none bg-transparent hover:bg-gray-700 rounded-lg',
+ }),
+ headerAction: ({ context }) => ({
+ className: 'border-none bg-transparent',
+ }),
+ content: { className: 'border-none bg-transparent pt-0' }
+ }
+ }}
+ >
+
+ router.push('/chat/general')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
general
+
router.push('/chat/nostr')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
nostr
+
router.push('/chat/discord')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
discord
+
router.push('/chat/stackernews')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'>
+
stackernews
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/components/resources/ResourcesCarousel.js b/src/components/workshops/WorkshopsCarousel.js
similarity index 94%
rename from src/components/resources/ResourcesCarousel.js
rename to src/components/workshops/WorkshopsCarousel.js
index b1a7d74..ce7aff2 100644
--- a/src/components/resources/ResourcesCarousel.js
+++ b/src/components/workshops/WorkshopsCarousel.js
@@ -7,7 +7,7 @@ import { useImageProxy } from '@/hooks/useImageProxy';
import { parseEvent } from '@/utils/nostr';
import { formatTimestampToHowLongAgo } from '@/utils/time';
-export default function ResourcesCarousel() {
+export default function WorkshopsCarousel() {
const resources = useSelector((state) => state.events.resources);
const [processedResources, setProcessedResources] = useState([]);
const { returnImageProxy } = useImageProxy();
@@ -24,7 +24,7 @@ export default function ResourcesCarousel() {
const resourceTemplate = (resource) => {
return (
-
router.push(`/resource/${resource.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer">
+
router.push(`/resource/${resource.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8">
- Resources
+ workshops
);
diff --git a/src/pages/_app.js b/src/pages/_app.js
index fe951eb..169b735 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -6,6 +6,7 @@ import { ToastProvider } from '@/hooks/useToast';
import Layout from '@/components/Layout';
import '@/styles/globals.css'
import 'primereact/resources/themes/lara-dark-indigo/theme.css';
+import Sidebar from '@/components/sidebar/Sidebar';
export default function MyApp({
Component, pageProps: { ...pageProps }
@@ -15,8 +16,15 @@ export default function MyApp({
-
-
+
diff --git a/src/pages/content.js b/src/pages/content.js
new file mode 100644
index 0000000..1646c18
--- /dev/null
+++ b/src/pages/content.js
@@ -0,0 +1,39 @@
+import Head from 'next/head'
+import React, {useCallback, useEffect, useState} from 'react';
+import CoursesCarousel from '@/components/courses/CoursesCarousel'
+import WorkshopsCarousel from '@/components/workshops/WorkshopsCarousel'
+import MenuTab from '@/components/menutab/MenuTab'
+import { useNostr } from '@/hooks/useNostr'
+
+const homeItems = [
+ { label: 'Top', icon: 'pi pi-star' },
+ { label: 'Courses', icon: 'pi pi-desktop' },
+ { label: 'Workshops', icon: 'pi pi-cog' },
+ { label: 'Resources', icon: 'pi pi-book' },
+ { label: 'Streams', icon: 'pi pi-video' }
+ ];
+
+export default function Content() {
+ const { fetchResources, fetchCourses } = useNostr();
+
+ useEffect(() => {
+ fetchResources();
+ fetchCourses();
+ }, [fetchResources, fetchCourses]);
+
+ return (
+ <>
+
+ Create Next App
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 3994652..b665f24 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,7 @@
import Head from 'next/head'
import React, {useCallback, useEffect, useState} from 'react';
import CoursesCarousel from '@/components/courses/CoursesCarousel'
-import ResourcesCarousel from '@/components/resources/ResourcesCarousel'
+import WorkshopsCarousel from '@/components/workshops/WorkshopsCarousel'
import { useNostr } from '@/hooks/useNostr'
export default function Home() {
@@ -22,7 +22,7 @@ export default function Home() {
-
+
)
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e653e5e..c210c64 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,4 +7,14 @@
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
-}
\ No newline at end of file
+}
+
+.p-tabmenu .p-tabmenu-nav {
+ background-color: transparent !important;
+ border: none !important;
+}
+
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ background-color: transparent !important;
+ border: none !important;
+}