rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Refactor main header component to use Nav component and update menu labels

Browse Source
This commit is contained in:
Schneider Roland 2025-03-04 21:14:33 +01:00
parent 0cd6f8c0ba
commit 96b5946eb5
3 changed files with 5 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
yoga-app/src/components/mainHeaderComponent.tsx
View File

@ -1,5 +1,7 @@
import YogaImageComponent from "@/components/yoga.image.component"; import YogaImageComponent from "@/components/yoga.image.component";
import {YogaMainHeaderComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-main-header-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{ export interface Props{
config: YogaMainHeaderComponent_Plain config: YogaMainHeaderComponent_Plain
} }
@ -14,86 +16,7 @@ const MainHeaderComponent = ({ config: {
return ( return (
<div className="banner-section-outer"> <div className="banner-section-outer">
<header> <header>
<div className="main_header"> <Nav menuItems={MAIN_MENU} />
<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>
</header> </header>
{/*<!-- SOCIAL ICONS -->*/} {/*<!-- SOCIAL ICONS -->*/}
<div className="social-icons left_icons float-left d-table" data-aos="fade-down"> <div className="social-icons left_icons float-left d-table" data-aos="fade-down">

2
yoga-app/src/components/nav.component.tsx
View File

@ -23,7 +23,7 @@ const Nav: FC<Props> = ({menuItems}:Props) => {
<div className="main_header"> <div className="main_header">
<div className="container-fluid"> <div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light p-0"> <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 className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/>
</figure> </figure>
</a> </a>

2
yoga-app/src/util/const.ts
View File

@ -2,7 +2,7 @@ import {MenuItem} from "@/components/nav.component";
export const MAIN_MENU:MenuItem[] = [ export const MAIN_MENU:MenuItem[] = [
{ {
label: 'Home', label: 'Kezdőoldal',
href: '/' href: '/'
}, },
{ {