Basic non functional search bar

src/components/navbar/Navbar.js

@@ -3,18 +3,38 @@ import Image from 'next/image';
 import UserAvatar from './user/UserAvatar';
 import MenuTab from '../menutab/MenuTab';
 import { Menubar } from 'primereact/menubar';
-import { Menu } from 'primereact/menu';
 import { useRouter } from 'next/router';
-import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
-import { Dialog } from 'primereact/dialog';
+import { InputIcon } from 'primereact/inputicon';
+import { IconField } from 'primereact/iconfield';
+import { Dropdown } from 'primereact/dropdown';
+import styles from './navbar.module.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 
 const Navbar = () => {
     const router = useRouter();
+    const [selectedSearchOption, setSelectedSearchOption] = useState({ name: 'Content', code: 'content', icon: 'pi pi-video' });
+    const searchOptions = [
+        { name: 'Content', code: 'content', icon: 'pi pi-video' },
+        { name: 'Community', code: 'community', icon: 'pi pi-users' },
+    ];
 
     const navbarHeight = '60px';
 
+    const selectedOptionTemplate = (option, props) => {
+        console.log(option, props);
+        if (!props?.placeholder) {
+            return (
+                <div className="flex items-center">
+                    <i className={option.icon + ' mr-2'}></i>
+                    <span>{option.code}</span>
+                </div>
+            );
+        }
+        return <span>{option.code}</span>
+    };
+
     const start = (
         <div className='flex items-center'>
             <div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
@@ -27,6 +47,37 @@ const Navbar = () => {
                 />
                 <h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl">PlebDevs</h1>
             </div>
+            <div className='absolute left-[50%] transform -translate-x-[50%]'>
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search"> </InputIcon>
+                    <InputText className='w-[300px]' v-model="value1" placeholder="Search" pt={{
+                        root: {
+                            className: 'border-none rounded-tr-none rounded-br-none focus:border-none focus:ring-0 pr-0'
+                        }
+                    }} />
+
+                    <Dropdown 
+                        pt={{
+                            root: {
+                                className: 'border-none rounded-tl-none rounded-bl-none'
+                            },
+                            input: {
+                                className: 'mx-0 px-0'
+                            }
+                        }}
+                        className={styles.dropdown}
+                        value={selectedSearchOption} 
+                        onChange={(e) => setSelectedSearchOption(e.value)} 
+                        options={searchOptions} 
+                        optionLabel="name" 
+                        placeholder="Search"
+                        dropdownIcon={selectedSearchOption.icon}
+                        valueTemplate={selectedOptionTemplate}
+                        itemTemplate={selectedOptionTemplate}
+                        required
+                    />
+                </IconField>
+            </div>
         </div>
     );
 

src/components/navbar/navbar.module.css

@@ -20,3 +20,23 @@
     font-size: 1.5rem;
     font-weight: 600;
 }
+
+.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/components/navbar/user/UserAvatar.js

@@ -85,7 +85,6 @@ const UserAvatar = () => {
         userAvatar = (
             <>
                 <div className='flex flex-row items-center justify-between'>
-                    <div onClick={(event) => menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}>
                     <GenericButton
                         severity='help'
                         rounded
@@ -94,6 +93,7 @@ const UserAvatar = () => {
                         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"
                             src={returnImageProxy(user.avatar, user.pubkey)}