add nextjs app: yoga-app

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

@@ -0,0 +1,75 @@
+import {FC} from "react";
+import YogaImageComponent from "@/components/yoga.image.component";
+import clsx from "clsx";
+
+export interface MenuItem{
+    href?: string;
+    label: string;
+    children?: MenuItem[];
+    active?: boolean
+}
+export interface Props{
+    menuItems: MenuItem[];
+}
+
+const Nav: FC<Props> = ({menuItems}:Props) => {
+
+    return (
+        <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">
+                                {menuItems.map( menuItem => <MenuItemComponent menuItem={menuItem} />)}
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+interface MenuItemProps{
+    menuItem: MenuItem
+}
+const MenuItemComponent: FC<MenuItemProps>  = ({menuItem}: MenuItemProps) => {
+    if ( !menuItem ){
+        return (<></>);
+    }
+    if ( !menuItem.children || menuItem.children.length == 0 ){
+        return (
+            // <li className="nav-item active">
+            <li className={clsx("nav-item", {"active": menuItem.active})}>
+                <a className="nav-link" href={menuItem.href}>{menuItem.label}</a>
+            </li>
+        );
+    }
+
+    return (
+        <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>
+            <div className="dropdown-menu drop-down-content">
+                <ul className="list-unstyled drop-down-pages">
+                    {
+                        menuItem.children.map(item => <MenuItemComponent menuItem={item} />)
+                    }
+                </ul>
+            </div>
+        </li>
+    );
+}