Styling and url fixes for feeds

src/components/BottomBar.js

@@ -17,7 +17,7 @@ const BottomBar = () => {
             <div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-video text-2xl" />
             </div>
-            <div onClick={() => router.push('/feed')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/feed?channel=global')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-comments text-2xl" />
             </div>
         </div>

src/components/navbar/Navbar.js

@@ -12,69 +12,11 @@ import 'primeicons/primeicons.css';
 
 const Navbar = () => {
     const router = useRouter();
-    const [visible, setVisible] = useState(false);
-    const menu = useRef(null);
 
     const navbarHeight = '60px';
 
-    const menuItems = [
-        {
-            label: 'Home',
-            icon: 'pi pi-home',
-            command: () => {
-                // Add your edit functionality here
-            }
-        },
-        {
-            label: 'Content',
-            icon: 'pi pi-video',
-            command: () => {
-                // Add your delete functionality here
-            }
-        },
-        {
-            label: 'Chat',
-            icon: 'pi pi-comment',
-            items: [
-                {
-                    label: 'General',
-                    icon: 'pi pi-hashtag',
-                    command: () => {
-                        // Add your edit functionality here
-                    }
-                },
-                {
-                    label: 'Nostr',
-                    icon: 'pi pi-hashtag',
-                    command: () => {
-                        // Add your delete functionality here
-                    }
-                },
-                {
-                    label: 'Discord',
-                    icon: 'pi pi-hashtag',
-                    command: () => {
-                        // Add your delete functionality here
-                    }
-                },
-                {
-                    label: 'Stackernews',
-                    icon: 'pi pi-hashtag',
-                    command: () => {
-                        // Add your delete functionality here
-                    }
-                }
-            ]
-        }
-    ];
-
     const start = (
         <div className='flex items-center'>
-            {/* <div className='hidden max-tab:block max-mob:block max-tab:px-6 max-mob:px-6'>
-                <i className="pi pi-bars text-xl pt-1"
-                    onClick={(e) => menu.current.toggle(e)}></i>
-                <Menu model={menuItems} popup ref={menu} />
-            </div> */}
             <div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
                 <Image
                     alt="logo"

src/components/sidebar/Sidebar.js

@@ -13,7 +13,7 @@ const Sidebar = () => {
     };
 
     return (
-        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed z-10 h-[100%]'>
+        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed 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>
             </div>

src/pages/_app.js

@@ -6,6 +6,7 @@ import { SessionProvider } from "next-auth/react"
 import Layout from '@/components/Layout';
 import '@/styles/globals.css'
 import 'primereact/resources/themes/lara-dark-blue/theme.css'
+import '@/styles/custom-theme.css'; // custom theme
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 import "@uiw/react-md-editor/markdown-editor.css";

src/pages/feed/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
 import { InputText } from 'primereact/inputtext';
 import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 import NostrFeed from './nostr';
@@ -6,9 +7,15 @@ import DiscordFeed from './discord';
 import StackerNewsFeed from './stackernews';
 import GlobalFeed from './global';
 import { useRouter } from 'next/router';
+import { Message } from 'primereact/message';
+import { Tag } from 'primereact/tag';
+import StackerNewsIcon from '../../../public/sn.svg';
+import NostrIcon from '../../../public/nostr.png';
+
 const Feed = () => {
     const [selectedTopic, setSelectedTopic] = useState('global');
     const [searchQuery, setSearchQuery] = useState('');
+    const [title, setTitle] = useState('Community');
     const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
 
     const router = useRouter();
@@ -18,15 +25,47 @@ const Feed = () => {
         router.push(`/feed?channel=${topic}`);
     };
 
+    useEffect(() => {
+        setTitle(router.query.channel);
+    }, [router.query.channel]);
+
     // initialize the selected topic to the query parameter
     useEffect(() => {
         setSelectedTopic(router.query.channel);
     }, [router.query.channel]);
 
+    const getTagIcon = (topic) => {
+        switch (topic) {
+            case 'global':
+                return 'pi pi-globe';
+            case 'nostr':
+                return <Image src={NostrIcon} alt="Nostr" width={18} height={18} className='mr-1' />;
+            case 'discord':
+                return 'pi pi-discord';
+            case 'stackernews':
+                return <Image src={StackerNewsIcon} alt="StackerNews" width={20} height={20} className='mr-1' />;
+            default:
+                return 'pi pi-globe';
+        }
+    };
+
     return (
         <div className="bg-gray-900 h-full w-[100vw] 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>
+                <div className='mb-4 flex flex-row items-center'>
+                    <h1 className="text-3xl font-bold ml-1">Community</h1>
+                    <Tag 
+                        icon={getTagIcon(title)}
+                        className='ml-2 text-sm p-2 text-[#f8f8ff] flex items-center'
+                        severity={{
+                            'global': 'success',
+                            'discord': 'primary',
+                            'stackernews': 'warning',
+                            'nostr': 'info'
+                        }[title] || 'info'}
+                        value={`${title}`} 
+                    />
+                </div>
                 <InputText
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}

src/styles/custom-theme.css

@@ -0,0 +1,16 @@
+:root {
+    --green-500: #16a34a; /* Slightly darker green */
+    --green-600: #15803d; /* Corresponding darker shade */
+    --green-700: #166534; /* Corresponding even darker shade */
+  }
+  
+/* tags */
+.p-tag.p-tag-success {
+    background: var(--green-500);
+    color: #fff;
+  }
+  
+  .p-tag.p-tag-success:not(a) {
+    background: var(--green-500);
+    color: #fff;
+  }