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
+77 -6
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,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
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",