underline on bars

This commit is contained in:
Emily Neighbour 2025-03-17 13:56:42 +00:00
parent 95ca59bc27
commit 0ce9d90d8d

View File

@ -2,10 +2,12 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from 'next/navigation'
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
export default function Navbar() { export default function Navbar() {
const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const pathname = usePathname()
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -39,25 +41,24 @@ export default function Navbar() {
<Link href="/"> <Link href="/">
<Image height={2000} width={2000} alt="Background Image" src="/logo.png"></Image> <Image height={2000} width={2000} alt="Background Image" src="/logo.png"></Image>
</Link> </Link>
{/* <p className="m-auto text-sm">Logo</p> */}
</div> </div>
<div className="flex"> <div className="flex">
<button className="px-6"> <button className="px-6 border-b-2 border-black">
<Link href="/earthquakes"> <Link href="/earthquakes">
Earthquakes Earthquakes
</Link> </Link>
</button> </button>
<button className="px-6"> <button className="px-6 border-b-2 border-black">
<Link href="/observatories"> <Link href="/observatories">
Observatories Observatories
</Link> </Link>
</button> </button>
<button className="px-6"> <button className="px-6 border-b-2 border-black">
<Link href="/warehouse"> <Link href="/warehouse">
Warehouse Warehouse
</Link> </Link>
</button> </button>
<button className="px-6"> <button className="px-6 border-b-2 border-black">
<Link href="/shop"> <Link href="/shop">
Shop Shop
</Link> </Link>
@ -84,7 +85,11 @@ export default function Navbar() {
</div> </div>
<div className="flex-grow"></div> <div className="flex-grow"></div>
<div className="my-2 mr-2 w-10 flex border rounded-full"> <div className="my-2 mr-2 w-10 flex border rounded-full">
<p className="m-auto text-sm">User</p> <p className="m-auto text-sm">
<Link href="/user">
User
</Link>
</p>
</div> </div>
</div> </div>
); );