Skip to content

Commit

Permalink
feat:Added styles and fixed header
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShreyasNimkar
ShreyasNimkar committed Jun 7, 2023
1 parent 5ea21c6 commit 46a5507
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 8 deletions.
196 changes: 196 additions & 0 deletions src/components/common/tracksHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import React, { useEffect, useState } from 'react';

import { GetServerSidePropsContext } from 'next';
import ReactGA from 'react-ga';
import Image from 'next/image';
import { useWindowHeight } from '@react-hook/window-size';
import { useRouter } from 'next/router';
import SDGNavModal from './SDGNavModal';

const TracksHeader = () => {
const [modalVisibility, setModalVisibility] = useState(false);

const [scrollPosition, setScrollPosition] = useState(0);

const router = useRouter();

useEffect(() => {
const handleScroll = () => {
setScrollPosition(window.scrollY);
};

window.addEventListener('scroll', handleScroll);

return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);

const handleMenuClick = (targetId: string) => {
console.log(targetId);
if (
router.asPath.startsWith('/sdg/team') &&
targetId !== 'about-section'
) {
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
router.push('/hack/#' + targetId);
} else if (router.asPath.startsWith('/sdg')) {
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
if (
router.asPath.split('/')[1].startsWith('event') &&
targetId !== 'events-section'
)
router.push(`/#${targetId}`);

if (router.asPath.split('/')[1].startsWith('team'))
router.push(`/#${targetId}`);

const targetElement = document.getElementById(targetId);
if (targetElement) {
const yOffset = 0; // Adjust the yOffset value as per your requirement
const y =
targetElement.getBoundingClientRect().top +
window.pageYOffset +
yOffset;
window.scrollTo({ top: y, behavior: 'smooth' });
}
};

const windowHeight = useWindowHeight();

const headerClass =
scrollPosition === 0
? 'opacity-100'
: scrollPosition > windowHeight - 100
? 'glassMorphism sticky top-0'
: scrollPosition > 50 //navbar length
? 'opacity-0'
: 'opacity-100';

// add active tab opacity

return (
<>
<div
className={`hidden lg:flex justify-between items-center w-full h-[4rem] px-16 text-white z-[100] transition-all duration-300 ease-in-out ${headerClass}`}
>
<div className="w-[20%] h-full flex justify-around items-center">
<Image
src="/vitLogo2.png"
alt="logo"
height={10000}
width={10000}
className="w-[15vw] px-5 h-auto object-cover cursor-pointer"
onClick={() => {
router.push('/');
}}
/>
</div>
<div className="w-[80%] h-full flex gap-10 items-center justify-end font-spaceGrotesk font-semibold text-lg">
<div
className="cursor-pointer hover-underline-animation"
onClick={() => router.push('/hack')}
>
YANTRA HACKATHON
</div>
<div
className="cursor-pointer hover-underline-animation"
onClick={() => router.push('/team')}
>
Team
</div>
<div
className="cursor-pointer hover-underline-animation"
onClick={() => handleMenuClick('contact-section')}
>
Contact Us
</div>
</div>
</div>

<div
className={`z-30 flex lg:hidden static justify-around items-center w-full h-[7.5vh] text-white ${headerClass}`}
>
<div
onClick={() => {
router.push('/');
}}
className="w-[20%] h-full flex justify-around items-center"
>
<Image
src="/vitLogoCircle.png"
alt="logo"
height={10000}
width={10000}
className="w-16 p-3 object-cover cursor-pointer"
onClick={() => {
router.push('/');
}}
/>
</div>
<div className="w-[60%] "></div>
<div
onClick={() => {
setModalVisibility(true);
}}
className="w-[20%] h-full flex justify-around items-center"
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28 13.3335H4"
stroke="#FFFFFF"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28 8H4"
stroke="#FFFFFF"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28 18.6665H4"
stroke="#FFFFFF"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28 24H4"
stroke="#FFFFFF"
strokeWidth="2.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
{modalVisibility !== false && (
<SDGNavModal
modalVisibility={setModalVisibility}
visible={true}
// setModalDataFunc={() => {
// setModalData();
// }}
/>
)}
</>
);
};

export default TracksHeader;
12 changes: 10 additions & 2 deletions src/components/uncommon/sdg-page-cards/trackCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,22 @@ const TrackCard = ({
statements,
}: Props) => {
const [modalVisibility, setModalVisibility] = useState(false);

const [hover, setHover] = useState(false);
return (
<>
<div
onMouseEnter={() => {
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
onClick={() => {
setModalVisibility(true);
}}
className="cursor-pointer relative max-sm:py-5 py-3 font-spaceGrotesk bg-[#252525] bg-opacity-40 text-white lg:w-[20vw] max-sm:h-[32.5vh] sm:h-[50vh] w-[70%] rounded-xl"
className={`cursor-pointer relative ${
hover ? 'content3 bg-[#252525] bg-opacity-40' : ''
} max-sm:py-5 py-3 font-spaceGrotesk bg-[#252525] bg-opacity-40 text-white lg:w-[20vw] max-sm:h-[32.5vh] sm:h-[50vh] w-[70%] rounded-xl`}
>
<div className="flex h-full w-full flex-col gap-1 sm:gap-3 px-4">
<Image
Expand Down
2 changes: 1 addition & 1 deletion src/components/uncommon/sdg-page-cards/trackModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const TrackModal = ({
onClick={() => {
router.push(`/hack/tracks/${rank}`);
}}
className="relative w-42 h-12 mt-4 flex items-center justify-center px-5 py-3 overflow-hidden font-bold rounded-full group"
className="relative cursor-pointer w-42 h-12 mt-4 flex items-center justify-center px-5 py-3 overflow-hidden font-bold rounded-full group"
>
<span className="w-96 h-96 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg-white opacity-[3%]"></span>
<span className="absolute top-0 left-0 w-56 h-56 -mt-1 transition-all duration-500 ease-in-out -translate-x-96 -translate-y-24 bg-white opacity-100 group-hover:-translate-x-8"></span>
Expand Down
96 changes: 91 additions & 5 deletions src/pages/hack/tracks/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
import React from 'react';
import { GetServerSidePropsContext } from 'next';
import SDGHeader from '@/components/common/sdgheader';
import { useState } from 'react';
import { useRouter } from 'next/router';
import TracksHeader from '@/components/common/tracksHeader';
interface Props {
id: string;
}
const TrackPage = ({ id }: Props) => {
const router = useRouter();
const [hooks, setHooks] = useState([
false,
false,
false,
false,
false,
false,
]);
const tracks = [
{
id: '1',
Expand Down Expand Up @@ -82,21 +94,95 @@ const TrackPage = ({ id }: Props) => {

return (
<>
<SDGHeader />
<TracksHeader />
<div className="h-max bg-events-bg font-spaceGrotesk bg-cover">
<div className="max-lg:h-max h-full w-full">
{tracks &&
tracks.map((el) => {
if (el.id == id) {
return (
<>
<div className="px-10 py-16 h-full min-h-[91vh]">
<div className="px-10 h-full min-h-[91vh]">
<div
className="w-full text-white text-center text-6xl uppercase py-5 mb-10 max-lg:py-0"
className="w-full h-[20vh] lg:h-[23.5vh] flex justify-around items-center text-white text-center text-6xl uppercase py-5 max-lg:py-0"
style={{ color: el.colour }}
>
{el.track}
</div>
<div className="py-7 w-full h-[4vh] flex justify-center gap-x-2 sm:gap-x-10 items-center">
<div
onClick={() => {
router.push(
'/hack/tracks/1'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#279B48',
}}
></div>
<div
onClick={() => {
router.push(
'/hack/tracks/2'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#C92639',
}}
></div>
<div
onClick={() => {
router.push(
'/hack/tracks/3'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#FF8945',
}}
></div>
<div
onClick={() => {
router.push(
'/hack/tracks/4'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#FF4FA9',
}}
></div>
<div
onClick={() => {
router.push(
'/hack/tracks/5'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#FF9F03',
}}
></div>
<div
onClick={() => {
router.push(
'/hack/tracks/6'
);
}}
className={`rounded-full h-6 w-6 cursor-pointer content3 opacity-60`}
style={{
backgroundColor:
'#E48E16',
}}
></div>
</div>
{!el.isOpen ? (
<div className="flex h-full justify-around flex-col items-center mb-10">
{el.paragraphs &&
Expand All @@ -115,7 +201,7 @@ const TrackPage = ({ id }: Props) => {
backgroundColor:
el.colour,
}}
className="text-white max-lg:text-sm max-lg:p-6 w-5/6 content group-hover:scale-105 font-bold text-4xl flex justify-center items-center py-2 rounded-xl border-white px-2 text-center transition-all duration-300 opacity-50 ease-in-out"
className="text-white max-lg:text-sm max-lg:p-6 w-5/6 content group-hover:scale-105 font-bold text-4xl flex justify-center items-center py-2 rounded-xl border-white px-2 text-center transition-all duration-300 opacity-60 ease-in-out"
>
<p className="opacity-0">
{
Expand All @@ -139,7 +225,7 @@ const TrackPage = ({ id }: Props) => {
backgroundColor:
el.colour,
}}
className="text-white max-lg:text-sm max-lg:p-6 w-5/6 content group-hover:scale-105 font-bold text-4xl flex justify-center items-center py-2 rounded-xl border-white px-2 text-center transition-all duration-300 opacity-50 ease-in-out"
className="text-white max-lg:text-sm max-lg:p-6 w-5/6 content group-hover:scale-105 font-bold text-4xl flex justify-center items-center py-2 rounded-xl border-white px-2 text-center transition-all duration-300 opacity-60 ease-in-out"
>
<p className="opacity-0">
This is an Open
Expand Down
13 changes: 13 additions & 0 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,20 @@ html {
background-position: 0 0;
animation: slide 1s linear infinite;
}
.content3 {
background-color: #252525;

background-image: linear-gradient(
to bottom right,
hsla(0, 0%, 0%, 1) 0%,
hsla(0, 0%, 0%, 1) 25%,
hsla(0, 0%, 100%, 0) 25%,
hsla(0, 0%, 100%, 0) 75%
);
background-size: 16px 16px;
background-position: 0 0;
animation: slide 1s linear infinite;
}
@keyframes slide {
to {
background-position: 16px 16px;
Expand Down

0 comments on commit 46a5507

Please sign in to comment.