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

add bootstrap.component.tsx, implement dynamic nav generation

Browse Source
This commit is contained in:
Schneider Roland
2025-01-10 22:23:49 +01:00
parent f059417376
commit 85587489f5
13 changed files with 180 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
yoga-app/src/app/about/page.tsx
View File

@@ -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 />
</>
);

29
yoga-app/src/app/faq/page.tsx Normal file
View File

@@ -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 />
</>
);
}

2
yoga-app/src/app/layout.tsx
View File

@@ -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"*/}

2
yoga-app/src/app/page.tsx
View File

@@ -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 />
</>
);

29
yoga-app/src/app/prices/page.tsx Normal file
View File

@@ -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 />
</>
);
}

29
yoga-app/src/app/services/page.tsx Normal file
View File

@@ -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 />
</>
);
}

11
yoga-app/src/components/bootstrap.component.tsx Normal file
View File

@@ -0,0 +1,11 @@
"use client";
import { useEffect } from "react";
export default function BootstrapComponent()
{
useEffect(()=>{
// @ts-ignore
import( "bootstrap/dist/js/bootstrap.bundle")
},[])
return <></>
}

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

@@ -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;

85
yoga-app/src/components/subHeader.component.tsx
View File

@@ -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">

2
yoga-app/src/styles/style.scss
View File

@@ -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;
}

37
yoga-app/src/util/const.ts Normal file
View File

@@ -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: '/'
},
];