forked from emre/www_projectmycelium_com
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:
@@ -1,11 +1,30 @@
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link, useLocation } from 'react-router-dom'
|
||||||
import { Dropdown } from './ui/Dropdown'
|
import { Dropdown } from './ui/Dropdown'
|
||||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||||
import { Container } from './Container'
|
import { Container } from './Container'
|
||||||
import { Button } from './Button'
|
import { Button } from './Button'
|
||||||
import pmyceliumLogo from '../images/logos/logo_1.png'
|
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() {
|
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 (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
@@ -18,16 +37,11 @@ export function Header() {
|
|||||||
<Dropdown
|
<Dropdown
|
||||||
buttonContent={
|
buttonContent={
|
||||||
<>
|
<>
|
||||||
Cloud
|
{getCurrentPageName()}
|
||||||
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
items={[
|
items={cloudNavItems}
|
||||||
{ name: 'Cloud', href: '/cloud' },
|
|
||||||
{ name: 'Compute', href: '/compute' },
|
|
||||||
{ name: 'Storage', href: '/storage' },
|
|
||||||
{ name: 'GPU', href: '/gpu' },
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
to="/network"
|
to="/network"
|
||||||
|
|||||||
Reference in New Issue
Block a user