add bootstrap.component.tsx, implement dynamic nav generation

2025-01-10 22:23:49 +01:00 · 2025-01-10 22:23:49 +01:00 · 85587489f5
commit 85587489f5
parent f059417376
13 changed files with 180 additions and 91 deletions
--- a/yoga-app/package-lock.json
+++ b/yoga-app/package-lock.json
@ -12,6 +12,7 @@
        "@types/aos": "^3.0.7",
        "@types/bcrypt": "^5.0.2",
        "@types/bcryptjs": "^2.4.6",
+        "@types/bootstrap": "^5.2.10",
        "@types/pg": "^8.11.10",
        "aos": "^2.3.4",
        "bcryptjs": "^2.4.3",
@ -1076,6 +1077,16 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@rtsao/scc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@ -1121,6 +1132,15 @@
      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
      "dev": true
    },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
--- a/yoga-app/package.json
+++ b/yoga-app/package.json
@ -13,9 +13,9 @@
    "@types/aos": "^3.0.7",
    "@types/bcrypt": "^5.0.2",
    "@types/bcryptjs": "^2.4.6",
+    "@types/bootstrap": "^5.2.10",
    "@types/pg": "^8.11.10",
    "aos": "^2.3.4",
-    "bcryptjs": "2.4.3",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^4.6.2",
    "clsx": "^2.1.1",
--- a/yoga-app/src/app/about/page.tsx
+++ b/yoga-app/src/app/about/page.tsx
@ -9,10 +9,13 @@ import QuotesComponent from "@/components/quotes.component";
 import BlogPostsComponent from "@/components/blog.posts.component";
 import FooterComponent from "@/components/footer.component";
 import SubscribeComponent from "@/components/subscribe.component";
+import SubHeaderComponent from "@/components/subHeader.component";
+import BootstrapComponent from "@/components/bootstrap.component";

 export default function About() {
    return (
        <>
+            <SubHeaderComponent />
            <OurServicesComponent />
            <AboutUsComponent />
            <OurSpecialitiesComponent />
@ -23,6 +26,8 @@ export default function About() {
            <SubscribeComponent />
            <FooterComponent />
            <AosComponent />
+            <BootstrapComponent />
+
        </>

    );
--- a/yoga-app/src/app/faq/page.tsx
+++ b/yoga-app/src/app/faq/page.tsx
@ -0,0 +1,29 @@
+import React from "react";
+import AosComponent from "@/components/aos.component";
+import OurServicesComponent from "@/components/our.services.component";
+import AboutUsComponent from "@/components/about.us.component";
+import OurSpecialitiesComponent from "@/components/our.specialities.component";
+import ContactUsComponent from "@/components/contact.us.component";
+import PricingComponent from "@/components/pricing.component";
+import QuotesComponent from "@/components/quotes.component";
+import BlogPostsComponent from "@/components/blog.posts.component";
+import FooterComponent from "@/components/footer.component";
+import SubscribeComponent from "@/components/subscribe.component";
+
+export default function About() {
+    return (
+        <>
+            <OurServicesComponent />
+            <AboutUsComponent />
+            <OurSpecialitiesComponent />
+            <ContactUsComponent />
+            <PricingComponent />
+            <QuotesComponent />
+            <BlogPostsComponent />
+            <SubscribeComponent />
+            <FooterComponent />
+            <AosComponent />
+        </>
+
+    );
+}
--- a/yoga-app/src/app/layout.tsx
+++ b/yoga-app/src/app/layout.tsx
@ -1,8 +1,6 @@
 import type {Metadata, Viewport} from "next";
 import "./globals.scss";
 import {IconDescriptor} from "next/dist/lib/metadata/types/metadata-types";
-import MainHeaderComponent from "@/components/mainHeaderComponent";
-

 const generateIconDescriptor = (rel: string, sizes: string, url: string): IconDescriptor => {
    // <link rel="apple-touch-icon" sizes="76x76"*/}
--- a/yoga-app/src/app/page.tsx
+++ b/yoga-app/src/app/page.tsx
@ -10,6 +10,7 @@ import BlogPostsComponent from "@/components/blog.posts.component";
 import FooterComponent from "@/components/footer.component";
 import SubscribeComponent from "@/components/subscribe.component";
 import MainHeaderComponent from "@/components/mainHeaderComponent";
+import BootstrapComponent from "@/components/bootstrap.component";

 export default function Home() {
  return (
@ -25,6 +26,7 @@ export default function Home() {
          <SubscribeComponent />
          <FooterComponent />
          <AosComponent />
+          <BootstrapComponent />
      </>

  );
--- a/yoga-app/src/app/prices/page.tsx
+++ b/yoga-app/src/app/prices/page.tsx
@ -0,0 +1,29 @@
+import React from "react";
+import AosComponent from "@/components/aos.component";
+import OurServicesComponent from "@/components/our.services.component";
+import AboutUsComponent from "@/components/about.us.component";
+import OurSpecialitiesComponent from "@/components/our.specialities.component";
+import ContactUsComponent from "@/components/contact.us.component";
+import PricingComponent from "@/components/pricing.component";
+import QuotesComponent from "@/components/quotes.component";
+import BlogPostsComponent from "@/components/blog.posts.component";
+import FooterComponent from "@/components/footer.component";
+import SubscribeComponent from "@/components/subscribe.component";
+
+export default function About() {
+    return (
+        <>
+            <OurServicesComponent />
+            <AboutUsComponent />
+            <OurSpecialitiesComponent />
+            <ContactUsComponent />
+            <PricingComponent />
+            <QuotesComponent />
+            <BlogPostsComponent />
+            <SubscribeComponent />
+            <FooterComponent />
+            <AosComponent />
+        </>
+
+    );
+}
--- a/yoga-app/src/app/services/page.tsx
+++ b/yoga-app/src/app/services/page.tsx
@ -0,0 +1,29 @@
+import React from "react";
+import AosComponent from "@/components/aos.component";
+import OurServicesComponent from "@/components/our.services.component";
+import AboutUsComponent from "@/components/about.us.component";
+import OurSpecialitiesComponent from "@/components/our.specialities.component";
+import ContactUsComponent from "@/components/contact.us.component";
+import PricingComponent from "@/components/pricing.component";
+import QuotesComponent from "@/components/quotes.component";
+import BlogPostsComponent from "@/components/blog.posts.component";
+import FooterComponent from "@/components/footer.component";
+import SubscribeComponent from "@/components/subscribe.component";
+
+export default function About() {
+    return (
+        <>
+            <OurServicesComponent />
+            <AboutUsComponent />
+            <OurSpecialitiesComponent />
+            <ContactUsComponent />
+            <PricingComponent />
+            <QuotesComponent />
+            <BlogPostsComponent />
+            <SubscribeComponent />
+            <FooterComponent />
+            <AosComponent />
+        </>
+
+    );
+}
--- a/yoga-app/src/components/bootstrap.component.tsx
+++ b/yoga-app/src/components/bootstrap.component.tsx
@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+export default function BootstrapComponent()
+{
+    useEffect(()=>{
+        // @ts-ignore
+        import( "bootstrap/dist/js/bootstrap.bundle")
+    },[])
+    return <></>
+}
--- a/yoga-app/src/components/nav.component.tsx
+++ b/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;
--- a/yoga-app/src/components/subHeader.component.tsx
+++ b/yoga-app/src/components/subHeader.component.tsx
@ -1,90 +1,11 @@
 import YogaImageComponent from "@/components/yoga.image.component";
+import Nav from "@/components/nav.component";
+import {MAIN_MENU} from "@/util/const";

 const SubHeaderComponent = () =>{
    return (
        <div className="sub-banner-section">
-            <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">
-                                        <a className="nav-link" href="/index">Home</a>
-                                    </li>
-                                    <li className="nav-item active">
-                                        <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>
+             <Nav menuItems={MAIN_MENU} />
            <section className="banner-section">
                <div className="container">
                    <div className="row">
--- a/yoga-app/src/styles/style.scss
+++ b/yoga-app/src/styles/style.scss
@ -148,7 +148,7 @@ p{
 .navbar-nav .dropdown{
    margin: 0 15px 0 20px;
 }
-.navbar-nav .nav-item .dropdown-item{
+    .navbar-nav .nav-item .dropdown-item{
    color: var(--e-global-color-primary) !important;
    transition: all 0.3s ease-in-out;
 }
--- a/yoga-app/src/util/const.ts
+++ b/yoga-app/src/util/const.ts
@ -0,0 +1,37 @@
+import {MenuItem} from "@/components/nav.component";
+
+export const MAIN_MENU:MenuItem[] = [
+    {
+        label: 'Home',
+        href: '/'
+    },
+    {
+        label: 'Rólunk',
+        href: '/about'
+    },
+    {
+        label: 'Szolgáltatásaink',
+        href: '/services'
+    },
+    {
+        label: 'Oldalak',
+        children: [
+            {
+                label: 'Áraink',
+                href: '/prices'
+            },
+            {
+                label: 'FAQ',
+                href: '/faq'
+            },
+        ]
+    },
+    {
+        label: 'Team',
+        href: '/team'
+    },
+    {
+        label: 'Blog',
+        href: '/'
+    },
+];