Sidebar is back

src/components/BottomBar.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import 'primeicons/primeicons.css';
+
+const BottomBar = () => {
+    const router = useRouter();
+
+    const isActive = (path) => {
+        return router.pathname === path;
+    };
+
+    return (
+        <div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
+            <div onClick={() => router.push('/')} className={`cursor-pointer p-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+                <i className="pi pi-home" />
+            </div>
+            <div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
+                <i className="pi pi-video" />
+            </div>
+            <div onClick={() => router.push('/feed')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+                <i className="pi pi-comments" />
+            </div>
+        </div>
+    );
+};
+
+export default BottomBar;

src/components/sidebar/Sidebar.js

@@ -12,7 +12,7 @@ const Sidebar = () => {
     };
 
     return (
-        <div className='max-mob:hidden max-tab:hidden w-[15vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
+        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
             <div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
                 <p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
             </div>
@@ -35,8 +35,8 @@ const Sidebar = () => {
                 }}
                 className="unstyled border-none bg-transparent">
                 <AccordionTab header={"Chat"}>
-                    <div onClick={() => router.push('/chat/general')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/general') ? 'bg-gray-700' : ''}`}>
+                    <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
-                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> general</p>
+                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> global</p>
                     </div>
                     <div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}>
                         <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> nostr</p>

src/pages/_app.js

@@ -16,6 +16,7 @@ import {
     QueryClient,
     QueryClientProvider,
 } from '@tanstack/react-query'
+import BottomBar from '@/components/BottomBar';
 
 const queryClient = new QueryClient()
 
@@ -31,13 +32,14 @@ export default function MyApp({
                         <Layout>
                             <div className="flex flex-col min-h-screen">
                                 <Navbar />
-                                {/* <div className='flex'> */}
+                                <div className='flex'>
-                                {/* <Sidebar /> */}
+                                <Sidebar />
-                                {/* <div className='max-w-[100vw] pl-[15vw]'> */}
+                                <div className='max-w-[100vw] pl-[13vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
-                                <div className='max-w-[100vw]'>
+                                {/* <div className='max-w-[100vw]'> */}
                                     <Component {...pageProps} />
                                 </div>
-                                {/* </div> */}
+                                </div>
+                                <BottomBar />
                             </div>
                         </Layout>
                     </ToastProvider>

src/pages/feed.js

@@ -1,10 +1,53 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card } from 'primereact/card';
 import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { useQuery } from '@tanstack/react-query';
+import { TabMenu } from 'primereact/tabmenu';
+import { InputText } from 'primereact/inputtext';
+
+const MenuTab = ({ items, selectedTopic, onTabChange }) => {
+    const allItems = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const menuItems = allItems.map((item, index) => {
+        let icon = 'pi pi-tag';
+
+        return {
+            label: (
+                <Button
+                    className={`${selectedTopic === item ? 'bg-primary text-white' : ''}`}
+                    onClick={() => onTabChange(item)}
+                    outlined={selectedTopic !== item}
+                    rounded
+                    size='small'
+                    label={item}
+                    icon={icon}
+                />
+            ),
+            command: () => onTabChange(item)
+        };
+    });
+
+    return (
+        <div className="w-full">
+            <TabMenu
+                model={menuItems}
+                activeIndex={allItems.indexOf(selectedTopic)}
+                onTabChange={(e) => onTabChange(allItems[e.index])}
+                pt={{
+                    menu: { className: 'bg-transparent border-none ml-2 my-4' },
+                    action: ({ context, parent }) => ({
+                        className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
+                        style: { top: '2px' }
+                    }),
+                    menuitem: { className: 'mr-0' }
+                }}
+            />
+        </div>
+    );
+}
 
 const fetchDiscordMessages = async () => {
     const response = await fetch('/api/discord-messages');
@@ -15,6 +58,14 @@ const fetchDiscordMessages = async () => {
 };
 
 const Feed = () => {
+    const [selectedTopic, setSelectedTopic] = useState('global');
+    const [searchQuery, setSearchQuery] = useState('');
+    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const handleTopicChange = (topic) => {
+        setSelectedTopic(topic);
+    };
+
     const { data, error, isLoading } = useQuery({
         queryKey: ['discordMessages'],
         queryFn: fetchDiscordMessages,
@@ -30,9 +81,6 @@ const Feed = () => {
         return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
     }
 
-    // Destructure messages from data
-    // const messages = data?.messages || [];
-
     const header = (message) => (
         <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
             <div className="flex flex-row items-center">
@@ -65,7 +113,25 @@ const Feed = () => {
     );
 
     return (
-        <div className="gap-4 p-4 bg-gray-900">
+        <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">
+                <MenuTab
+                    items={allTopics}
+                    selectedTopic={selectedTopic}
+                    onTabChange={handleTopicChange}
+                    className="max-w-[90%] mx-auto"
+                />
+            </div>
             {data && data.map(message => (
                 <Card
                     key={message.id}

tailwind.config.js

@@ -14,6 +14,8 @@ module.exports = {
         'max-mob': {'max': '475px'},
         'max-tab': {'max': '768px'},
         'max-lap': {'max': '1440px'},
+        'max-sidebar': {'max': '1285px'},
+        'min-bottom-bar': {'min': '1285px'},
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',