Fixes for menus, sizing fixes general css finagling, added cool hamburger buttons

src/components/banner/HeroBanner.js

@@ -103,7 +103,7 @@ const HeroBanner = () => {
     };
 
     return (
-        <div className={`${getHeroHeight()} ${isTabView ? 'mx-0 w-full' : 'm-4'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl rounded-lg`}>
+        <div className={`${getHeroHeight()} ${isTabView ? 'mx-0 w-full' : 'mt-4 mx-12'} relative flex justify-center items-center overflow-hidden drop-shadow-2xl rounded-lg`}>
             <Image
                 src={HeroImage}
                 alt="Banner"

src/components/content/carousels/CoursesCarousel.js

@@ -18,7 +18,7 @@ const responsiveOptions = [
         numScroll: 1
     },
     {
-        breakpoint: '575px',
+        breakpoint: '675px',
         numVisible: 1,
         numScroll: 1
     }

src/components/content/carousels/DocumentsCarousel.js

@@ -20,7 +20,7 @@ const responsiveOptions = [
         numScroll: 1
     },
     {
-        breakpoint: '575px',
+        breakpoint: '675px',
         numVisible: 1,
         numScroll: 1
     }

src/components/content/carousels/VideosCarousel.js

@@ -20,7 +20,7 @@ const responsiveOptions = [
         numScroll: 1
     },
     {
-        breakpoint: '575px',
+        breakpoint: '675px',
         numVisible: 1,
         numScroll: 1
     }

src/components/navbar/Navbar.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import Image from 'next/image';
 import UserAvatar from './user/UserAvatar';
 import { Menubar } from 'primereact/menubar';
+import { Menu } from 'primereact/menu';
 import { useRouter } from 'next/router';
 import SearchBar from '../search/SearchBar';
 import 'primereact/resources/primereact.min.css';
@@ -14,6 +15,31 @@ const Navbar = () => {
     const windowWidth = useWindowWidth();
     const navbarHeight = '60px';
     const {ndk} = useNDKContext();
+    const [isHovered, setIsHovered] = useState(false);
+    const menu = useRef(null);
+
+    const menuItems = [
+        {
+            label: 'Content',
+            icon: 'pi pi-play-circle',
+            command: () => router.push('/content?tag=all')
+        },
+        {
+            label: 'Feeds',
+            icon: 'pi pi-comments',
+            command: () => router.push('/feeds?channel=global')
+        },
+        {
+            label: 'Subscribe',
+            icon: 'pi pi-star',
+            command: () => router.push('/subscribe')
+        },
+        {
+            label: 'About',
+            icon: 'pi pi-info-circle',
+            command: () => router.push('/about')
+        }
+    ];
 
     const start = (
         <div className='flex items-center'>
@@ -25,8 +51,28 @@ const Navbar = () => {
                     height={50}
                     className="rounded-full mr-2 max-tab:hidden max-mob:hidden"
                 />
-                <h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl">PlebDevs</h1>
+                <h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl pb-1">PlebDevs</h1>
             </div>
+            <div 
+                className={`ml-2 p-2 cursor-pointer transition-all duration-300 flex items-center justify-center ${isHovered ? 'bg-gray-700 rounded-full' : ''}`}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                onClick={(e) => menu.current.toggle(e)}
+                style={{ width: '40px', height: '40px' }}
+            >
+                <div className="flex flex-col items-center justify-center">
+                    {/* Show hamburger menu on mobile (< 600px) and up/down arrows on larger screens */}
+                    {windowWidth <= 600 ? (
+                        <i className="pi pi-bars text-white text-xl" />
+                    ) : (
+                        <>
+                            <i className="pi pi-angle-up text-white text-base" />
+                            <i className="pi pi-angle-down text-white text-base" />
+                        </>
+                    )}
+                </div>
+            </div>
+            <Menu model={menuItems} popup ref={menu} />
             {ndk && windowWidth > 600 && <SearchBar />}
         </div>
     );

src/components/navbar/user/UserAvatar.js

@@ -70,7 +70,7 @@ const UserAvatar = () => {
                     // Only show the "Create" option for admin users
                     ...(isAdmin ? [{
                         label: 'Create',
-                        icon: 'pi pi-book',
+                        icon: 'pi pi-file-edit',
                         command: () => router.push('/create')
                     }] : []),
                     {
@@ -84,14 +84,6 @@ const UserAvatar = () => {
         userAvatar = (
             <>
                 <div className='flex flex-row items-center justify-between'>
-                    <GenericButton
-                        outlined
-                        rounded
-                        label="About"
-                        className='mr-4'
-                        onClick={() => router.push('/about')}
-                        size={windowWidth < 768 ? 'small' : 'normal'}
-                    />
                     <div onClick={(event) => menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}>
                         <Image
                             alt="logo"
@@ -112,14 +104,6 @@ const UserAvatar = () => {
     } else {
         userAvatar = (
             <div className='flex flex-row items-center justify-between'>
-                <GenericButton
-                    outlined
-                    rounded
-                    label="About"
-                    className='mr-4'
-                    onClick={() => router.push('/about')}
-                    size={windowWidth < 768 ? 'small' : 'normal'}
-                />
                 <GenericButton
                     label="Login"
                     icon="pi pi-user"

src/components/search/SearchBar.js

@@ -10,7 +10,6 @@ import { useContentSearch } from '@/hooks/useContentSearch';
 import { useCommunitySearch } from '@/hooks/useCommunitySearch';
 import { useRouter } from 'next/router';
 import useWindowWidth from '@/hooks/useWindowWidth';
-import styles from './searchbar.module.css';
 
 const SearchBar = () => {
     const { searchContent, searchResults: contentResults } = useContentSearch();
@@ -77,7 +76,7 @@ const SearchBar = () => {
     }
 
     return (
-        <div className={`absolute ${windowWidth < 700 ? "left-[40%]" : "left-[50%]"} transform -translate-x-[50%]`}>
+        <div className={`absolute ${windowWidth < 950 ? "left-[55%]" : "left-[50%]"} transform -translate-x-[50%]`}>
             <IconField iconPosition="left">
                 <InputIcon className="pi pi-search"> </InputIcon>
                 <InputText 
@@ -101,7 +100,6 @@ const SearchBar = () => {
                             className: 'mx-0 px-0 shadow-lg'
                         }
                     }}
-                    className={styles.dropdown}
                     value={selectedSearchOption} 
                     onChange={(e) => setSelectedSearchOption(e.value)} 
                     options={searchOptions} 

src/components/search/searchbar.module.css

@@ -1,19 +0,0 @@
-/* .dropdown {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-.dropdown:focus,
-.dropdown:active,
-.dropdown:hover {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-} */
-
-/* Override any potential global styles */
-/* .dropdown * {
-    outline: none !important;
-    box-shadow: none !important;
-} */

src/pages/index.js

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import React, { useEffect, useState, useMemo } from 'react';
-// import GenericCarousel from '@/components/content/carousels/GenericCarousel';
 import CoursesCarousel from '@/components/content/carousels/CoursesCarousel';
 import VideosCarousel from '@/components/content/carousels/VideosCarousel';
 import DocumentsCarousel from '@/components/content/carousels/DocumentsCarousel';