Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: navbar #57

Closed
wants to merge 2 commits into from
Closed

refactor: navbar #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9067df
refactor: navbar
SANTHSIM22 Oct 31, 2024
a3d140d
fix:build error
SANTHSIM22 Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { StarsCanvas } from "@/components/ui/stars";
import Navbar from "@/components/navbar";
import Nav from "@/components/widget/header";
// import ScrollProgress from "@/components/ui/progressBar";
const inter = Inter({ subsets: ["latin"] });

Expand Down Expand Up @@ -38,7 +38,7 @@ export default function RootLayout({
</head>
<body className={(inter.className = "overflow-x-hidden")}>
<div className="fixed top-0 w-full h-24 z-50 backdrop-blur-md head-5 bg-black/5" />
<Navbar />
<Nav />
<StarsCanvas />
<Providers>{children} </Providers>
</body>
Expand Down
10 changes: 6 additions & 4 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,30 @@ export default function Home() {
<div className="h-full mt-20 mb-52" id="about">
<About />
</div>
<div>
<div id="speakers" className="">
<Speakers />
</div>

<div>
<h1 className="md:text-8xl mb-[40px] text-4xl text-center font-black text-redTheme px-10">
<h1 id="performers" className="md:text-8xl mb-[40px] text-4xl mt-20 text-center font-black text-redTheme px-10">
The Performers
</h1>
<Performers />
</div>
<div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme to-blackTheme to-95%">
<PreviousEdition />
</div>
<div className="bg-blackTheme mb-[100vh] h-fit mt-14">
<div id="team" className="bg-blackTheme mb-[100vh] h-fit mt-14">
<h1 className="md:text-8xl text-4xl text-center font-black text-redTheme px-10">
The Team
</h1>
<Team />
<Team />
<CtaSection />
</div>
</div>
<div id="contact">
<ParallaxFooter />
</div>
</>
);
}
2 changes: 1 addition & 1 deletion src/components/edil-ozi/text-glitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
)}
>
<span className="invisible whitespace-nowrap">{textOne}</span>
<span className="absolute left-0 top-0 text-whiteTheme transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
<span className="absolute left-0 top-0 text-blackTheme transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
{textOne}
</span>
<span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
Expand Down
12 changes: 6 additions & 6 deletions src/components/navbar/full-page-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ const FullPageMenu = () => {
</div>
<nav className="relative z-10 flex flex-row w-full">
<ul className="main-menu mt-10">
<NavItem href="/contact" textOne="ABOUT" textTwo="ABOUT" />
<NavItem href="/contact" textOne="SPEAKERS" textTwo="SPEAKERS" />
<NavItem textOne="ABOUT" textTwo="ABOUT" />
<NavItem textOne="SPEAKERS" textTwo="SPEAKERS" />
<NavItem
href="/contact"

textOne="PERFORMERS"
textTwo="PERFORMERS"
/>
<NavItem href="/contact" textOne="TEAM" textTwo="TEAM" />
<NavItem href="/contact" textOne="GALLERY" textTwo="GALLERY" />
<NavItem href="/contact" textOne="CONTACT" textTwo="CONTACT" />
<NavItem textOne="TEAM" textTwo="TEAM" />
<NavItem textOne="GALLERY" textTwo="GALLERY" />
<NavItem textOne="CONTACT" textTwo="CONTACT" />
<li className="list-none listo overflow-hidden leading-[1] font-bold text-white mt-[30px]">
<RegisterButton />
</li>
Expand Down
20 changes: 8 additions & 12 deletions src/components/navbar/nav-items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
import Link from "next/link";
import TextGlitch from "../edil-ozi/text-glitch";

type NavItemProps = {
href: string;
textOne: string;
textTwo: string;
onClick?: () => void; // Add onClick prop
};

const NavItem = ({ href, textOne, textTwo }: NavItemProps) => {
const NavItem = ({ textOne, textTwo, onClick }: NavItemProps) => {
return (
<li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black text-[35px] md:text-[43px]">
<Link
href={href}
className=" my-2 text-xl font-bold text-[35px] md:text-[43px]"
rel="noopener noreferrer"
target="_blank"
<li className="listo list-none overflow-hidden leading-[1] font-bold text-black text-[35px] md:text-[43px]">
<button
className="my-2 text-xl font-bold text-[35px] md:text-[43px] bg-transparent border-none cursor-pointer"
onClick={onClick} // Assign onClick to the button
>
<TextGlitch
textOne={textOne}
textTwo={textTwo}
className="font-bold text-black text-[35px] md:text-[43px] leading-tight"
className="font-bold text-black text-[35px] md:text-[43px] leading-tight"
/>
</Link>
</button>
</li>
);
};


export default NavItem;
102 changes: 38 additions & 64 deletions src/components/widget/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,17 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
import { tedxsjecAssetsPrefix } from "@/lib/utils";
import React from "react";
import Link from "next/link";
import NavItem from "../navbar/nav-items";
import SocialLinks from "../common/social-links";
import NavItem from "../navbar/nav-items";


//this component has been split into different components for better readability in navbar. donnot use this component, as its not in use
const Nav = () => {
gsap.registerPlugin(ScrollTrigger);

const menuToggle = useRef(null);

const menuBar = gsap.timeline({ paused: true });
const tl = gsap.timeline({ paused: true });

useGSAP(() => {
// ScrollTrigger.create({
// trigger: ".aboute",
// markers: true,
// toggleClass: "about",
// start: "top 50%",
// end: "+=9999", // Prevents it from ending
// });

menuBar
.to(
".bar-1",
Expand All @@ -55,7 +44,7 @@ const Nav = () => {
);

tl.to(".logo", { x: -300 }, "go")
.to(".reg", { y: -300 }, "go")
.to(".head-5", { y: -300 }, "go")
.to(".fullpage-menu", {
duration: 0,
display: "block",
Expand Down Expand Up @@ -85,32 +74,32 @@ const Nav = () => {
"-=0.5"
)
.from(".hero-icon", { scale: 0, duration: 0.5 }, "end")
.from(".life", { x: 800, duration: 0.5 }, "end");

// gsap.to('.hero-icon', {
// repeat: -1,
// keyframes: [
// { translateX: 10, translateY: 10, duration: 0.5 },
// { translateX: 10, translateY: -10, duration: 0.5 },
// { translateX: -10, translateY: 10, duration: 0.5 },
// { translateX: 10, translateY: -10, duration: 0.5 }
// ],
// yoyo: true
// });
.from(".life", { x: 1000, duration: 0.5 }, "end");

menuBar.reverse();
tl.reverse();
}, [menuBar, tl]);

const handleClick = () => {
const handleClick = (targetId: string) => {
menuBar.reversed(!menuBar.reversed());
tl.reversed(!tl.reversed());

if (targetId) {
const targetElement = document.getElementById(targetId);
if (targetElement) {
const offset = targetElement.getBoundingClientRect().top + window.scrollY - (window.innerHeight * 0.1);
window.scrollTo({
top: offset,
behavior: "smooth",
});
}
}
};

return (
<>
<header className="fixed z-[100] aboute left-0 top-0 w-screen">
<div className="header-1 flex md:py-[20px] md:px-[30px] p-[30px] justify-between items-center ">
<header className="fixed z-[100] aboute left-0 top-0 w-screen">
<div className="header-1 flex md:py-[20px] md:px-[30px] p-[30px] justify-between items-center">
<div className="logo">
<Link href="/">
<Image
Expand All @@ -123,18 +112,13 @@ const Nav = () => {
/>
</Link>
</div>
<div className="flex justify-between items-center ">
<li className="list-none overflow-hidden leading-[1] font-bold text-white reg">
<Link href="/register">
<button className="px-3 shadow-sm py-4 lg:block hidden mr-7 rounded-md bg-[#EB0028]">
REGISTER
</button>
</Link>
<div className="flex justify-between items-center">
<li className="list-none overflow-hidden leading-[1] font-bold text-white reg">
</li>
<button
id="menuToggle"
ref={menuToggle}
onClick={handleClick}
onClick={() => handleClick("")}
className="menu-toggle bg-transparent border-none cursor-pointer"
>
<svg
Expand All @@ -161,8 +145,8 @@ const Nav = () => {
</div>
</header>

<section className="fullpage-menu hidden fixed left-0 top-0 w-screen z-50 h-screen ">
<div className="header-2 fixed left-0 top-0 w-full flex md:py-[20px] md:px-[30px] p-[30px] z-[60] justify-between items-center">
<section className="fullpage-menu hidden fixed left-0 top-0 w-screen z-50 h-screen">
<div className="header-2 fixed left-0 top-0 w-full flex md:py-[20px] md:px-[30px] p-[30px] z-[60] justify-between items-center">
<Image
src={`${tedxsjecAssetsPrefix}/logo/blackLogo.webp`}
height={200}
Expand All @@ -172,32 +156,23 @@ const Nav = () => {
priority={true}
/>
</div>
<div className="fullpage-menu-inner flex items-center h-full px-[50px] py-[10px] md:px-[80px] md:py-[40px]">
<div className="menu-bg h-full w-full absolute left-0 top-0">
<span className="bg-white block back w-full h-[34%]"></span>
<span className="bg-white block back w-full h-[34%]"></span>
<span className="bg-white block back w-full h-[34%]"></span>
<div className="fullpage-menu-inner flex items-center h-full px-[50px] py-[10px] md:px-[80px] md:py-[40px]">
<div className="menu-bg h-full w-full absolute left-0 top-0">
<span className="bg-white block back w-full h-[34%]"></span>
<span className="bg-white block back w-full h-[34%]"></span>
<span className="bg-white block back w-full h-[34%]"></span>
</div>
<nav className=" relative z-10 flex flex-row w-full">
<nav className="relative z-10 flex flex-row w-full">
<div>
<ul className="main-menu mt-10">
<NavItem href="/contact" textOne="ABOUT" textTwo="ABOUT" />
<NavItem
href="/contact"
textOne="SPEAKERS"
textTwo="SPEAKERS"
/>
<NavItem
href="/contact"
textOne="PERFORMERS"
textTwo="PERFORMERS"
/>
<NavItem href="/contact" textOne="TEAM" textTwo="TEAM" />
<NavItem href="/contact" textOne="GALLERY" textTwo="GALLERY" />
<NavItem href="/contact" textOne="CONTACT" textTwo="CONTACT" />
<li className="list-none listo overflow-hidden leading-[1] font-bold text-white mt-[30px]">
<NavItem textOne="ABOUT" textTwo="ABOUT" onClick={() => handleClick('about')} />
<NavItem textOne="SPEAKERS" textTwo="SPEAKERS" onClick={() => handleClick('speakers')} />
<NavItem textOne="PERFORMERS" textTwo="PERFORMERS" onClick={() => handleClick('performers')} />
<NavItem textOne="TEAM" textTwo="TEAM" onClick={() => handleClick('team')} />
<NavItem textOne="CONTACT" textTwo="CONTACT" onClick={() => handleClick('contact')} />
<li className="list-none listo overflow-hidden leading-[1] font-bold text-white mt-[30px]">
<Link href="/">
<button className="px-8 shadow-sm py-5 rounded-md bg-[#EB0028]">
<button className="px-8 shadow-sm py-5 rounded-md bg-[#EB0028]">
REGISTER
</button>
</Link>
Expand All @@ -206,7 +181,7 @@ const Nav = () => {
</div>
</nav>
<div className="w-full flex flex-col items-center">
<div className="lg:self-center lg:flex hidden lg:flex-col">
<div className="lg:self-center lg:flex hidden lg:flex-col">
<Image
className="mt-10 hero-icon"
src={`${tedxsjecAssetsPrefix}/logo/ActualLogo.PNG`}
Expand All @@ -215,13 +190,12 @@ const Nav = () => {
alt="logo"
/>
</div>
<div className="lg:flex hidden text-nowrap text-4xl relative bottom-32 justify-center items-center text-center">
<div className="lg:flex hidden text-nowrap text-4xl relative bottom-32 justify-center items-center text-center">
<h1 className="life uppercase font-bold text-black">
Life - Explore What&#39;s Worth Living
Life - Explore What&#39;s Worth Living
</h1>
</div>
</div>
<SocialLinks />
</div>
</section>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/widget/performers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const performerSections: PerformerSection[] = [
"Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her “Vidwath” exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including “Natya Sammohini,” “Yuva Kala Prashasti,” and the “Kalashree Award,” excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a ‘B’ grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.",
images: [
`${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`,
`${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`,
`${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`,
// `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`,
// `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`,
// `${tedxsjecAssetsPrefix}/performers/Yukthi2.avif`,
],
},
Expand Down
Loading