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,105 +88,159 @@ const Navbar = () => {
           </div>
 
           {/* <!-- Right Side Menu (Logged Out) --> */}
-          <div className='hidden md:block md:ml-6'>
+          {!isLoggedIn && (
-            <div className='flex items-center'>
+            <div className='hidden md:block md:ml-6'>
-              <button className='flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'>
+              <div className='flex items-center'>
-                <i className='fa-brands fa-google text-white mr-2'></i>
+                <button className='flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'>
-                <span>Login or Register</span>
+                  <FaGoogle className='text-white mr-2' />
-              </button>
+                  <span>Login or Register</span>
-            </div>
-          </div>
-
-          {/* <!-- Right Side Menu (Logged In) --> */}
-          <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
-                type='button'
-                className='relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
-              >
-                <span className='absolute -inset-1.5'></span>
-                <span className='sr-only'>View notifications</span>
-                <svg
-                  className='h-6 w-6'
-                  fill='none'
-                  viewBox='0 0 24 24'
-                  strokeWidth='1.5'
-                  stroke='currentColor'
-                  aria-hidden='true'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    d='M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0'
-                  />
-                </svg>
-              </button>
-              <span className='absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full'>
-                2
-                {/* <!-- Replace with the actual number of notifications --> */}
-              </span>
-            </Link>
-            {/* <!-- Profile dropdown button --> */}
-            <div className='relative ml-3'>
-              <div>
-                <button
-                  type='button'
-                  className='relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
-                  id='user-menu-button'
-                  aria-expanded='false'
-                  aria-haspopup='true'
-                >
-                  <span className='absolute -inset-1.5'></span>
-                  <span className='sr-only'>Open user menu</span>
-                  <Image
-                    className='h-8 w-8 rounded-full'
-                    src={profileDefault}
-                    alt=''
-                  />
                 </button>
               </div>
+            </div>
+          )}
 
-              {/* <!-- Profile dropdown --> */}
+          {/* <!-- Right Side Menu (Logged In) --> */}
-              <div
+          {isLoggedIn && (
-                id='user-menu'
+            <div className='absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0'>
-                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'
+              <Link href='/messages' className='relative group'>
-                role='menu'
+                <button
-                aria-orientation='vertical'
+                  type='button'
-                aria-labelledby='user-menu-button'
+                  className='relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
-                tabIndex='-1'
-              >
-                <Link
-                  href='/profile'
-                  className='block px-4 py-2 text-sm text-gray-700'
-                  role='menuitem'
-                  tabIndex='-1'
-                  id='user-menu-item-0'
                 >
-                  Your Profile
+                  <span className='absolute -inset-1.5'></span>
-                </Link>
+                  <span className='sr-only'>View notifications</span>
-                <Link
+                  <svg
-                  href='properties/saved'
+                    className='h-6 w-6'
-                  className='block px-4 py-2 text-sm text-gray-700'
+                    fill='none'
-                  role='menuitem'
+                    viewBox='0 0 24 24'
-                  tabIndex='-1'
+                    strokeWidth='1.5'
-                  id='user-menu-item-2'
+                    stroke='currentColor'
-                >
+                    aria-hidden='true'
-                  Saved Properties
+                  >
-                </Link>
+                    <path
-                <Link
+                      strokeLinecap='round'
-                  href='#'
+                      strokeLinejoin='round'
-                  className='block px-4 py-2 text-sm text-gray-700'
+                      d='M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0'
-                  role='menuitem'
+                    />
-                  tabIndex='-1'
+                  </svg>
-                  id='user-menu-item-2'
+                </button>
-                >
+                <span className='absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full'>
-                  Sign Out
+                  2
-                </Link>
+                  {/* <!-- Replace with the actual number of notifications --> */}
+                </span>
+              </Link>
+              {/* <!-- Profile dropdown button --> */}
+              <div className='relative ml-3'>
+                <div>
+                  <button
+                    type='button'
+                    className='relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
+                    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>
+                    <Image
+                      className='h-8 w-8 rounded-full'
+                      src={profileDefault}
+                      alt=''
+                    />
+                  </button>
+                </div>
+
+                {/* <!-- Profile dropdown --> */}
+                {isProfileMenuOpen && (
+                  <div
+                    id='user-menu'
+                    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'
+                    tabIndex='-1'
+                  >
+                    <Link
+                      href='/profile'
+                      className='block px-4 py-2 text-sm text-gray-700'
+                      role='menuitem'
+                      tabIndex='-1'
+                      id='user-menu-item-0'
+                      onClick={() => {
+                        setIsProfileMenuOpen(false);
+                      }}
+                    >
+                      Your Profile
+                    </Link>
+                    <Link
+                      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>
+                    <Link
+                      href='#'
+                      className='block px-4 py-2 text-sm text-gray-700'
+                      role='menuitem'
+                      tabIndex='-1'
+                      id='user-menu-item-2'
+                    >
+                      Sign Out
+                    </Link>
+                  </div>
+                )}
               </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",