add bootstrap.component.tsx, implement dynamic nav generation

yoga-app/src/components/nav.component.tsx

@@ -1,6 +1,8 @@
+"use client"
 import {FC} from "react";
 import YogaImageComponent from "@/components/yoga.image.component";
 import clsx from "clsx";
+import exp from "node:constants";
 
 export interface MenuItem{
     href?: string;
@@ -14,6 +16,8 @@ export interface Props{
 
 const Nav: FC<Props> = ({menuItems}:Props) => {
 
+
+
     return (
         <header>
             <div className="main_header">
@@ -43,9 +47,10 @@ const Nav: FC<Props> = ({menuItems}:Props) => {
 }
 
 interface MenuItemProps{
-    menuItem: MenuItem
+    menuItem: MenuItem,
+    dropdownItem?: boolean,
 }
-const MenuItemComponent: FC<MenuItemProps>  = ({menuItem}: MenuItemProps) => {
+const MenuItemComponent: FC<MenuItemProps>  = ({menuItem, dropdownItem}: MenuItemProps) => {
     if ( !menuItem ){
         return (<></>);
     }
@@ -53,7 +58,7 @@ const MenuItemComponent: FC<MenuItemProps>  = ({menuItem}: MenuItemProps) => {
         return (
             // <li className="nav-item active">
             <li className={clsx("nav-item", {"active": menuItem.active})}>
-                <a className="nav-link" href={menuItem.href}>{menuItem.label}</a>
+                <a className={clsx("nav-link", {"dropdown-item":dropdownItem})} href={menuItem.href}>{menuItem.label}</a>
             </li>
         );
     }
@@ -62,14 +67,17 @@ const MenuItemComponent: FC<MenuItemProps>  = ({menuItem}: MenuItemProps) => {
         <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"
-               aria-expanded="false"> Blog </a>
+               aria-expanded="false">{menuItem.label}</a>
             <div className="dropdown-menu drop-down-content">
                 <ul className="list-unstyled drop-down-pages">
                     {
-                        menuItem.children.map(item => <MenuItemComponent menuItem={item} />)
+                        menuItem.children.map(item => <MenuItemComponent menuItem={item}  dropdownItem={true}/>)
                     }
                 </ul>
             </div>
         </li>
     );
 }
+
+
+export default Nav;