Improving sidebar and feeds organization in the frontend, improved on some styles as well

src/components/menutab/CommunityMenuTab.js

@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import { Button } from 'primereact/button';
 import { TabMenu } from 'primereact/tabmenu';
 import Image from 'next/image';
@@ -7,6 +8,10 @@ import NostrIcon from '../../../public/nostr.png';
 const CommunityMenuTab = ({ selectedTopic, onTabChange }) => {
     const allItems = ['global', 'nostr', 'discord', 'stackernews'];
 
+    useEffect(() => {
+        console.log(selectedTopic);
+    }, [selectedTopic]);
+
     const menuItems = allItems.map((item, index) => {
         let icon;
         switch (item) {

src/components/sidebar/Sidebar.js

@@ -8,32 +8,38 @@ const Sidebar = () => {
 
     // Helper function to determine if the path matches the current route
     const isActive = (path) => {
-        return router.pathname === path;
+        const pathWithQuery = router.pathname + router.asPath.split(router.pathname)[1];
+        return pathWithQuery === path;
     };
 
     return (
         <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed z-10 h-[100%]'>
             <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">Home</p>
+                <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold">Home</p>
             </div>
             <div onClick={() => router.push('/content')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
-            <i className="pi pi-video pl-5" /> <p className="pl-2 rounded-md font-bold">Content</p>
+                <i className="pi pi-video pl-5" /> <p className="pl-2 rounded-md font-bold">Content</p>
             </div>
             <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" /> <p className="pl-2 rounded-md font-bold">Create</p>
+                <i className="pi pi-plus pl-5" /> <p className="pl-2 rounded-md font-bold">Create</p>
             </div>
             <Accordion activeIndex={0}>
-                <AccordionTab header={"Community"} headerClassName='hover:bg-gray-700 rounded-lg'>
-                    <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+                <AccordionTab pt={{
+                    headerAction: ({ context }) => ({
+                        className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`
+                    })
+                }}
+                    header={"Community"}>
+                    <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
                         <p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
                     </div>
-                    <div onClick={() => router.push('/feed/nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/nostr') ? 'bg-gray-700' : ''}`}>
+                    <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"><i className="pi pi-hashtag text-sm"></i> nostr</p>
                     </div>
-                    <div onClick={() => router.push('/feed/discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/discord') ? 'bg-gray-700' : ''}`}>
+                    <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"><i className="pi pi-hashtag text-sm"></i> discord</p>
                     </div>
-                    <div onClick={() => router.push('/feed/stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/stackernews') ? 'bg-gray-700' : ''}`}>
+                    <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"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
                     </div>
                 </AccordionTab>

src/pages/feed/discord.js

@@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
-import { InputText } from 'primereact/inputtext';
 import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
 import { useRouter } from 'next/router';
-import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 
 const DiscordFeed = () => {
-    const [selectedTopic, setSelectedTopic] = useState('global');
-    const [searchQuery, setSearchQuery] = useState('');
-    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
-
     const router = useRouter();
     const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
 
-    const handleTopicChange = (topic) => {
-        setSelectedTopic(topic);
-    };
-
     if (isLoading) {
         return (
             <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
@@ -40,9 +30,9 @@ const DiscordFeed = () => {
                 <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
             </div>
             <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
                 </div>
             </div>
         </div>
@@ -66,24 +56,6 @@ const DiscordFeed = () => {
 
     return (
         <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="w-fit mx-4 pt-4 flex flex-col items-start">
-                <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
-                <InputText
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search"
-                    icon="pi pi-search"
-                    className="w-full mb-2"
-                />
-            </div>
-            <div className="min-bottom-bar:hidden">
-                <CommunityMenuTab
-                    items={allTopics}
-                    selectedTopic={selectedTopic}
-                    onTabChange={handleTopicChange}
-                    className="max-w-[90%] mx-auto"
-                />
-            </div>
             <div className="mx-4 mt-4">
             {data && data.length > 0 ? (
                 data.map(message => (

src/pages/feed/global.js

@@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
-import { InputText } from 'primereact/inputtext';
 import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
 import { useRouter } from 'next/router';
-import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 
 const GlobalFeed = () => {
-    const [selectedTopic, setSelectedTopic] = useState('global');
-    const [searchQuery, setSearchQuery] = useState('');
-    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
-
     const router = useRouter();
     const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
 
-    const handleTopicChange = (topic) => {
-        setSelectedTopic(topic);
-    };
-
     if (isLoading) {
         return (
             <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
@@ -40,9 +30,9 @@ const GlobalFeed = () => {
                 <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
             </div>
             <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
                 </div>
             </div>
         </div>
@@ -66,24 +56,6 @@ const GlobalFeed = () => {
 
     return (
         <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="w-fit mx-4 pt-4 flex flex-col items-start">
-                <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
-                <InputText
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search"
-                    icon="pi pi-search"
-                    className="w-full mb-2"
-                />
-            </div>
-            <div className="min-bottom-bar:hidden">
-                <CommunityMenuTab
-                    items={allTopics}
-                    selectedTopic={selectedTopic}
-                    onTabChange={handleTopicChange}
-                    className="max-w-[90%] mx-auto"
-                />
-            </div>
             <div className="mx-4 mt-4">
             {data && data.length > 0 ? (
                 data.map(message => (

src/pages/feed/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
+import NostrFeed from './nostr';
+import DiscordFeed from './discord';
+import StackerNewsFeed from './stackernews';
+import GlobalFeed from './global';
+import { useRouter } from 'next/router';
+const Feed = () => {
+    const [selectedTopic, setSelectedTopic] = useState('global');
+    const [searchQuery, setSearchQuery] = useState('');
+    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const router = useRouter();
+
+    const handleTopicChange = (topic) => {
+        setSelectedTopic(topic);
+        router.push(`/feed?channel=${topic}`);
+    };
+
+    return (
+        <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
+            <div className="w-fit mx-4 pt-4 flex flex-col items-start">
+                <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
+                <InputText
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search"
+                    icon="pi pi-search"
+                    className="w-full mb-2"
+                />
+            </div>
+            <div className="min-bottom-bar:hidden">
+                <CommunityMenuTab
+                    items={allTopics}
+                    selectedTopic={selectedTopic}
+                    onTabChange={handleTopicChange}
+                    className="max-w-[90%] mx-auto"
+                />
+            </div>
+            {
+                selectedTopic === 'global' && <GlobalFeed />
+            }
+            {
+                selectedTopic === 'nostr' && <NostrFeed />
+            }
+            {
+                selectedTopic === 'discord' && <DiscordFeed />
+            }
+            {
+                selectedTopic === 'stackernews' && <StackerNewsFeed />
+            }
+        </div>
+    );
+};
+
+export default Feed;

src/pages/feed/nostr.js

@@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
-import { InputText } from 'primereact/inputtext';
 import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
 import { useRouter } from 'next/router';
-import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 
 const NostrFeed = () => {
-    const [selectedTopic, setSelectedTopic] = useState('global');
-    const [searchQuery, setSearchQuery] = useState('');
-    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
-
     const router = useRouter();
     const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
 
-    const handleTopicChange = (topic) => {
-        setSelectedTopic(topic);
-    };
-
     if (isLoading) {
         return (
             <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
@@ -40,9 +30,9 @@ const NostrFeed = () => {
                 <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
             </div>
             <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
                 </div>
             </div>
         </div>
@@ -66,24 +56,6 @@ const NostrFeed = () => {
 
     return (
         <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="w-fit mx-4 pt-4 flex flex-col items-start">
-                <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
-                <InputText
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search"
-                    icon="pi pi-search"
-                    className="w-full mb-2"
-                />
-            </div>
-            <div className="min-bottom-bar:hidden">
-                <CommunityMenuTab
-                    items={allTopics}
-                    selectedTopic={selectedTopic}
-                    onTabChange={handleTopicChange}
-                    className="max-w-[90%] mx-auto"
-                />
-            </div>
             <div className="mx-4 mt-4">
             {data && data.length > 0 ? (
                 data.map(message => (

src/pages/feed/stackernews.js

@@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
-import { InputText } from 'primereact/inputtext';
 import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
 import { useRouter } from 'next/router';
-import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
-
-const StackernewsFeed = () => {
-    const [selectedTopic, setSelectedTopic] = useState('global');
-    const [searchQuery, setSearchQuery] = useState('');
-    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
 
+const StackerNewsFeed = () => {
     const router = useRouter();
     const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
 
-    const handleTopicChange = (topic) => {
-        setSelectedTopic(topic);
-    };
-
     if (isLoading) {
         return (
             <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
@@ -40,9 +30,9 @@ const StackernewsFeed = () => {
                 <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
             </div>
             <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
                 </div>
             </div>
         </div>
@@ -66,24 +56,6 @@ const StackernewsFeed = () => {
 
     return (
         <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="w-fit mx-4 pt-4 flex flex-col items-start">
-                <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
-                <InputText
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search"
-                    icon="pi pi-search"
-                    className="w-full mb-2"
-                />
-            </div>
-            <div className="min-bottom-bar:hidden">
-                <CommunityMenuTab
-                    items={allTopics}
-                    selectedTopic={selectedTopic}
-                    onTabChange={handleTopicChange}
-                    className="max-w-[90%] mx-auto"
-                />
-            </div>
             <div className="mx-4 mt-4">
             {data && data.length > 0 ? (
                 data.map(message => (
@@ -104,4 +76,4 @@ const StackernewsFeed = () => {
     );
 };
 
-export default StackernewsFeed;
+export default StackerNewsFeed;

src/styles/globals.css

@@ -72,8 +72,8 @@ div {
   padding-bottom: 12px !important;
   padding-top: 12px !important;
   margin-bottom: 8px !important;
-  border-bottom-left-radius: 5px !important;
-  border-bottom-right-radius: 5px !important;
+  border-bottom-left-radius: 7px !important;
+  border-bottom-right-radius: 7px !important;
 }
 
 /* hero banner animation */