thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New tabbar drop-downs

Browse Source
This commit is contained in:
Emily Neighbour 2025-03-10 13:27:47 +00:00
parent db500fb147
commit e4ff4f7c37
6 changed files with 79 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 MiB

BIN
public/lava.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 KiB

BIN
public/lava_flows.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

8
src/app/page.tsx
View File

@ -1,13 +1,13 @@
import Image from "next/image";
import Navbar from "@/components/tabbar";
import Navbar from "@/components/tabbar_dd";
export default function Home() {
return (
<main className="min-h-screen bg-white text-black">
<main className="min-h-screen bg-white text-black">
<Navbar></Navbar>
<div className="w-full h-[70vh] relative overflow-hidden">
<div className="w-full h-[90vh] relative overflow-hidden">
<div className="">
<Image height={2000} width={2000} alt="Background Image" src="/image.png"></Image>
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></Image>
</div>
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80"></div>
<div className="flex inset-0 w-full absolute mt-24 float">

4
src/components/tabbar.tsx
View File

@ -5,9 +5,11 @@ export default function Navbar(){
<p className="m-auto text-sm">Logo</p>
</div>
<div className="flex">
<button className="px-6">Earthquake</button>
<button className="px-6">Earthquakes</button>
<button className="px-6">Observatories</button>
<button className="px-6">Warehouse</button>
<button className="px-6">Shop</button>
<button className="px-6">About Us</button>
</div>
<div className="flex-grow"></div>
<div className="my-2 mr-2 w-10 flex border rounded-full">

70
src/components/tabbar_dd.tsx Normal file
View File

@ -0,0 +1,70 @@
"use client"
import { useState, useEffect, useRef} from "react";
export default function Navbar() {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsDropdownOpen(false);
}
};
const handleEscapeKey = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setIsDropdownOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleEscapeKey);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleEscapeKey);
};
}, []);
return (
<div className="w-full flex h-14 border-b border-neutral-300 text-black">
<div className="my-2 w-20 flex border border-neutral-300 rounded-xl ml-2 mr-6">
<p className="m-auto text-sm">Logo</p>
</div>
<div className="flex">
<button className="px-6">Earthquakes</button>
<button className="px-6">Observatories</button>
<button className="px-6">Warehouse</button>
<button className="px-6">Shop</button>
<div className="my-auto relative">
<button
className="px-6"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
About Us
</button>
{isDropdownOpen && (
<div ref={dropdownRef} className="absolute top-full left-0 mt-4 w-40 bg-white border border-neutral-300 rounded-lg shadow-lg z-50">
<ul>
<li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Our Mission</li>
<li className="px-4 py-2 hover:bg-neutral-100 cursor-pointer">The Team</li>
<li className="px-4 py-2 hover:bg-neutral-100 rounded-lg cursor-pointer">Contact Us</li>
</ul>
</div>
)}
</div>
</div>
<div className="flex-grow"></div>
<div className="my-2 mr-2 w-10 flex border rounded-full">
<p className="m-auto text-sm">User</p>
</div>
</div>
);
}