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

[yoga-15] add new service-list-page

Browse Source
This commit is contained in:
Schneider Roland
2025-07-28 11:31:49 +02:00
parent e9aa0e795e
commit 6acf79e23d
17 changed files with 355 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,22 @@
"use client"
import {FC} from "react";
import YogaImageComponent from "@/components/yoga.image.component";
import clsx from "clsx";
import Link from "next/link";
export interface MenuItem{
export interface MenuItem {
href?: string;
label: string;
children?: MenuItem[];
active?: boolean,
styleClass?: string;
}
export interface Props{
export interface Props {
menuItems: MenuItem[];
imageSrc?: string;
}
const Nav: FC<Props> = ({menuItems, imageSrc}:Props) => {
const Nav = ({menuItems, imageSrc}: Props) => {
return (
<header>
@@ -36,7 +36,8 @@ const Nav: FC<Props> = ({menuItems, imageSrc}:Props) => {
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav">
{menuItems.map( (menuItem,index) => <MenuItemComponent key={"nav"+menuItem.href+"_"+index} menuItem={menuItem} />)}
{menuItems.map((menuItem, index) => <MenuItemComponent
key={"nav" + menuItem.href + "_" + index} menuItem={menuItem}/>)}
</ul>
</div>
</nav>
@@ -46,32 +47,35 @@ const Nav: FC<Props> = ({menuItems, imageSrc}:Props) => {
);
}
interface MenuItemProps{
interface MenuItemProps {
menuItem: MenuItem,
dropdownItem?: boolean,
}
const MenuItemComponent: FC<MenuItemProps> = ({menuItem, dropdownItem}: MenuItemProps) => {
if ( !menuItem ){
const MenuItemComponent = ({menuItem, dropdownItem}: MenuItemProps) => {
if (!menuItem) {
return (<></>);
}
if ( !menuItem.children || menuItem.children.length == 0 ){
if (!menuItem.children || menuItem.children.length == 0) {
return (
// <li className="nav-item active">
<li className={clsx("nav-item", {"active": menuItem.active})}>
<a className={clsx("nav-link", {"dropdown-item":dropdownItem},menuItem.styleClass)} href={menuItem.href}>{menuItem.label}</a>
<a className={clsx("nav-link", {"dropdown-item": dropdownItem}, menuItem.styleClass)}
href={menuItem.href!}>{menuItem.label}</a>
</li>
);
}
return (
<li className={clsx("nav-item", "dropdown",{"active": menuItem.active})}>
<li className={clsx("nav-item", "dropdown", {"active": menuItem.active})}>
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#"
role="button" data-toggle="dropdown" aria-haspopup="true"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">{menuItem.label}</a>
<div className="dropdown-menu drop-down-content">
<ul className="list-unstyled drop-down-pages">
{
menuItem.children.map((item,index) => <MenuItemComponent key={"child_"+item.href+"_"+index} menuItem={item} dropdownItem={true}/>)
menuItem.children.map((item, index) => <MenuItemComponent
key={"child_" + item.href + "_" + index} menuItem={item} dropdownItem={true}/>)
}
</ul>
</div>