admin/property-pulse-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar

Browse Source
This commit is contained in:
Brad Traversy
2024-07-09 08:39:03 -04:00
parent 5900231767
commit 1d7f6f4959
12 changed files with 206 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_theme_files/index.html
+4 -4
View File
@@ -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
href="#"
<button
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
+3 -3
View File
@@ -177,14 +177,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -173,14 +173,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -173,14 +173,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -173,14 +173,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -173,14 +173,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -178,14 +178,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -177,14 +177,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+3 -3
View File
@@ -173,14 +173,14 @@
id="user-menu-item-2"
>Saved Properties</a
>
<a
href="#"
<button
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
+165 -94
View File
@@ -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'>
<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>
<span>Login or Register</span>
</button>
</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=''
/>
{!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'>
<FaGoogle className='text-white mr-2' />
<span>Login or Register</span>
</button>
</div>
</div>
)}
{/* <!-- Profile dropdown --> */}
<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'
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'
{/* <!-- 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
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'
>
Your Profile
</Link>
<Link
href='properties/saved'
className='block px-4 py-2 text-sm text-gray-700'
role='menuitem'
tabIndex='-1'
id='user-menu-item-2'
>
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>
<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'
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
Generated
+11 -1
View File
@@ -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
+2 -1
View File
@@ -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",