From ea3ee4d4552286fec7534803794e2093ca48d640 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 31 Oct 2025 04:58:58 +0100
Subject: [PATCH] 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
---
 src/components/Header.tsx | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d3e9e57..cc0bead 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -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"