From 96b5946eb55e5a8d1118607f85e26462e32e12f2 Mon Sep 17 00:00:00 2001
From: Schneider Roland <roland.schneider@extern.a1.at>
Date: Tue, 4 Mar 2025 21:14:33 +0100
Subject: [PATCH] Refactor main header component to use Nav component and
 update menu labels

---
 .../src/components/mainHeaderComponent.tsx    | 83 +------------------
 yoga-app/src/components/nav.component.tsx     |  2 +-
 yoga-app/src/util/const.ts                    |  2 +-
 3 files changed, 5 insertions(+), 82 deletions(-)

diff --git a/yoga-app/src/components/mainHeaderComponent.tsx b/yoga-app/src/components/mainHeaderComponent.tsx
index 1e4d5f7..eb9ecdf 100644
--- a/yoga-app/src/components/mainHeaderComponent.tsx
+++ b/yoga-app/src/components/mainHeaderComponent.tsx
@@ -1,5 +1,7 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import {YogaMainHeaderComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-main-header-component";
+import {MAIN_MENU} from "@/util/const";
+import Nav from "@/components/nav.component";
 export interface Props{
     config: YogaMainHeaderComponent_Plain
 }
@@ -14,86 +16,7 @@ const MainHeaderComponent = ({ config: {
     return (
         <div className="banner-section-outer">
             <header>
-                <div className="main_header">
-                    <div className="container-fluid">
-                        <nav className="navbar navbar-expand-lg navbar-light p-0">
-                            <a className="navbar-brand" href="/index"><figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
-                            <button className="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                                <span className="navbar-toggler-icon"></span>
-                                <span className="navbar-toggler-icon"></span>
-                                <span className="navbar-toggler-icon"></span>
-                            </button>
-                            <div className="collapse navbar-collapse" id="navbarSupportedContent">
-                                <ul className="navbar-nav">
-                                    <li className="nav-item active">
-                                        <a className="nav-link" href="/index">Home</a>
-                                    </li>
-                                    <li className="nav-item">
-                                        <a className="nav-link" href="/about">About Us</a>
-                                    </li>
-                                    <li className="nav-item">
-                                        <a className="nav-link" href="/services">Services</a>
-                                    </li>
-                                    <li className="nav-item dropdown">
-                                        <a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
-                                           aria-expanded="false"> Pages </a>
-                                        <div className="dropdown-menu drop-down-content">
-                                            <ul className="list-unstyled drop-down-pages">
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/pricing">Pricing</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/faq">Faq</a>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </li>
-                                    <li className="nav-item">
-                                        <a className="nav-link" href="/team">Team</a>
-                                    </li>
-                                    <li className="nav-item dropdown">
-                                        <a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true"
-                                           aria-expanded="false"> Blog </a>
-                                        <div className="dropdown-menu drop-down-content">
-                                            <ul className="list-unstyled drop-down-pages">
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/single-post">Single Post</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/infinite-scroll">Infinite Scroll</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/load-more">Load More</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/one-column">One Column</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/two-column">Two Column</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/three-column">Three Column</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/three-colum-sidbar">Three Column Sidebar</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/four-column">Four Column</a>
-                                                </li>
-                                                <li className="nav-item">
-                                                    <a className="dropdown-item nav-link" href="/six-column">Six Column</a>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </li>
-                                    <li className="nav-item">
-                                        <a className="nav-link contact_us" href="/contact">Contact Us</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </nav>
-                    </div>
-                </div>
+                <Nav menuItems={MAIN_MENU} />
             </header>
             {/*<!-- SOCIAL ICONS -->*/}
             <div className="social-icons left_icons float-left d-table" data-aos="fade-down">
diff --git a/yoga-app/src/components/nav.component.tsx b/yoga-app/src/components/nav.component.tsx
index f08512c..e1d12d7 100644
--- a/yoga-app/src/components/nav.component.tsx
+++ b/yoga-app/src/components/nav.component.tsx
@@ -23,7 +23,7 @@ const Nav: FC<Props> = ({menuItems}:Props) => {
             <div className="main_header">
                 <div className="container-fluid">
                     <nav className="navbar navbar-expand-lg navbar-light p-0">
-                        <a className="navbar-brand" href="/index">
+                        <a className="navbar-brand" href="/">
                             <figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/>
                             </figure>
                         </a>
diff --git a/yoga-app/src/util/const.ts b/yoga-app/src/util/const.ts
index 5927c18..3e6901e 100644
--- a/yoga-app/src/util/const.ts
+++ b/yoga-app/src/util/const.ts
@@ -2,7 +2,7 @@ import {MenuItem} from "@/components/nav.component";
 
 export const MAIN_MENU:MenuItem[] = [
     {
-        label: 'Home',
+        label: 'Kezdőoldal',
         href: '/'
     },
     {