Navbar

_theme_files/index.html

@@ -166,21 +166,21 @@
                   >Your Profile</a
                 >
                 <a
-                  href="saved-properties.html"
+                  href="/saved-properties.html"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/login.html

@@ -177,14 +177,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/messages.html

@@ -173,14 +173,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/not-found.html

@@ -173,14 +173,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/profile.html

@@ -173,14 +173,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/properties.html

@@ -173,14 +173,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/property.html

@@ -178,14 +178,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/register.html

@@ -177,14 +177,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

_theme_files/saved-properties.html

@@ -173,14 +173,14 @@
                   id="user-menu-item-2"
                   >Saved Properties</a
                 >
-                <a
+                <button
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700"
                   role="menuitem"
                   tabindex="-1"
                   id="user-menu-item-2"
-                  >Sign Out</a
                 >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>

components/Navbar.jsx

@@ -1,9 +1,19 @@
+'use client';
+import { useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { FaGoogle } from 'react-icons/fa';
 import logo from '@/assets/images/logo-white.png';
 import profileDefault from '@/assets/images/profile.png';
 
 const Navbar = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const pathname = usePathname();
+
   return (
     <nav className='bg-blue-700 border-b border-blue-500'>
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
@@ -16,6 +26,7 @@ const Navbar = () => {
               className='relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'
               aria-controls='mobile-menu'
               aria-expanded='false'
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             >
               <span className='absolute -inset-0.5'></span>
               <span className='sr-only'>Open main menu</span>
@@ -50,19 +61,25 @@ const Navbar = () => {
               <div className='flex space-x-2'>
                 <Link
                   href='/'
-                  className='text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                  className={`${
+                    pathname === '/' ? 'bg-black' : ''
+                  } text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2`}
                 >
                   Home
                 </Link>
                 <Link
                   href='/properties'
-                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                  className={`${
+                    pathname === '/properties' ? 'bg-black' : ''
+                  } text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2`}
                 >
                   Properties
                 </Link>
                 <Link
                   href='/properties/add'
-                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                  className={`${
+                    pathname === '/properties/add' ? 'bg-black' : ''
+                  } text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2`}
                 >
                   Add Property
                 </Link>
@@ -71,16 +88,19 @@ const Navbar = () => {
           </div>
 
           {/* <!-- Right Side Menu (Logged Out) --> */}
+          {!isLoggedIn && (
             <div className='hidden md:block md:ml-6'>
               <div className='flex items-center'>
                 <button className='flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'>
-                <i className='fa-brands fa-google text-white mr-2'></i>
+                  <FaGoogle className='text-white mr-2' />
                   <span>Login or Register</span>
                 </button>
               </div>
             </div>
+          )}
 
           {/* <!-- Right Side Menu (Logged In) --> */}
+          {isLoggedIn && (
             <div className='absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0'>
               <Link href='/messages' className='relative group'>
                 <button
@@ -118,6 +138,7 @@ const Navbar = () => {
                     id='user-menu-button'
                     aria-expanded='false'
                     aria-haspopup='true'
+                    onClick={() => setIsProfileMenuOpen((prev) => !prev)}
                   >
                     <span className='absolute -inset-1.5'></span>
                     <span className='sr-only'>Open user menu</span>
@@ -130,9 +151,10 @@ const Navbar = () => {
                 </div>
 
                 {/* <!-- Profile dropdown --> */}
+                {isProfileMenuOpen && (
                   <div
                     id='user-menu'
-                className='hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+                    className='absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
                     role='menu'
                     aria-orientation='vertical'
                     aria-labelledby='user-menu-button'
@@ -144,15 +166,21 @@ const Navbar = () => {
                       role='menuitem'
                       tabIndex='-1'
                       id='user-menu-item-0'
+                      onClick={() => {
+                        setIsProfileMenuOpen(false);
+                      }}
                     >
                       Your Profile
                     </Link>
                     <Link
-                  href='properties/saved'
+                      href='saved-properties.html'
                       className='block px-4 py-2 text-sm text-gray-700'
                       role='menuitem'
                       tabIndex='-1'
                       id='user-menu-item-2'
+                      onClick={() => {
+                        setIsProfileMenuOpen(false);
+                      }}
                     >
                       Saved Properties
                     </Link>
@@ -166,10 +194,53 @@ const Navbar = () => {
                       Sign Out
                     </Link>
                   </div>
+                )}
               </div>
             </div>
+          )}
         </div>
       </div>
+      {/* <!-- Mobile menu, show/hide based on menu state. --> */}
+      {isMobileMenuOpen && (
+        <div id='mobile-menu'>
+          <div className='space-y-1 px-2 pb-3 pt-2'>
+            <Link
+              href='/'
+              className={`${
+                pathname === '/' ? 'bg-black' : ''
+              } text-white block rounded-md px-3 py-2 text-base font-medium`}
+            >
+              Home
+            </Link>
+            <Link
+              href='/properties'
+              className={`${
+                pathname === '/properties' ? 'bg-black' : ''
+              } text-white block rounded-md px-3 py-2 text-base font-medium`}
+            >
+              Properties
+            </Link>
+            <Link
+              href='/properties/add'
+              className={`${
+                pathname === '/properties/add' ? 'bg-black' : ''
+              } text-white block rounded-md px-3 py-2 text-base font-medium`}
+            >
+              Add Property
+            </Link>
+            {!isLoggedIn && (
+              <div className='block md:ml-6'>
+                <div className='flex items-center'>
+                  <button className='flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-3'>
+                    <FaGoogle className='text-white mr-2' />
+                    <span>Login or Register</span>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </nav>
   );
 };

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "14.2.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^5.2.1"
       },
       "devDependencies": {
         "postcss": "^8",
@@ -1359,6 +1360,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.4"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "postcss": "^8",