feat: add dynamic header navigation with current page tracking

- Added useLocation hook to detect and display current page in header dropdown
- Extracted cloud navigation items into separate constant for reusability
- Implemented getCurrentPageName function to determine active page based on URL path
- Updated dropdown button to dynamically show current section instead of static "Cloud" text
This commit is contained in:
2025-10-31 04:58:58 +01:00
parent 24f6da37ed
commit ea3ee4d455

View File

@@ -1,11 +1,30 @@
import { Link } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import { Dropdown } from './ui/Dropdown'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import { Container } from './Container'
import { Button } from './Button'
import pmyceliumLogo from '../images/logos/logo_1.png'
const cloudNavItems = [
{ name: 'Cloud', href: '/cloud' },
{ name: 'Compute', href: '/compute' },
{ name: 'Storage', href: '/storage' },
{ name: 'GPU', href: '/gpu' },
]
export function Header() {
const location = useLocation()
const getCurrentPageName = () => {
const currentPath = location.pathname;
if (currentPath.startsWith('/compute')) return 'Compute';
if (currentPath.startsWith('/storage')) return 'Storage';
if (currentPath.startsWith('/gpu')) return 'GPU';
if (currentPath.startsWith('/cloud')) return 'Cloud';
return 'Cloud';
};
return (
<header>
<nav>
@@ -18,16 +37,11 @@ export function Header() {
<Dropdown
buttonContent={
<>
Cloud
{getCurrentPageName()}
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
</>
}
items={[
{ name: 'Cloud', href: '/cloud' },
{ name: 'Compute', href: '/compute' },
{ name: 'Storage', href: '/storage' },
{ name: 'GPU', href: '/gpu' },
]}
items={cloudNavItems}
/>
<Link
to="/network"