navbar changes done

gdsc-nits-org · Apr 7, 2024 · b5a8702 · b5a8702
1 parent 995bd18
commit b5a8702
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 36 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,15 +1,14 @@
 import { Routes, Route } from "react-router-dom";
 
-
 import { Home, Error, Artist, Gallery, Team } from "./Pages";
 
 
 import { Navbar, Footer } from "./Components";
 
 const App = () => {
+
   return (
     <>
-      <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/artist" element={<Artist />} />

diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -2,9 +2,9 @@ import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import styles from "./Navbar.module.scss";
 
-const Navbar = () => {
+const Navbar = ({isHome = false}) => {
   const [nav, setNav] = useState(false);
-  const [navVissible , setNavVissible ] = useState(false)
+  const [navVissible , setNavVissible ] = useState(!isHome)
   const menuRef = useRef();
   const hamburger = {
     inactive:
@@ -40,7 +40,12 @@ const Navbar = () => {
       if (window.scrollY >= 400) {
         setNavVissible(true);
       } else {
-        setNavVissible(false);
+        if(isHome){
+          setNavVissible(false);
+        }
+        else{
+          setNavVissible(true);
+        }
       }
     };
 

diff --git a/src/Pages/Artist/Artist.jsx b/src/Pages/Artist/Artist.jsx
@@ -8,10 +8,12 @@ import fluter from "../../../public/artist_assets/flute_right.svg";
 import artistimg from "../../../public/artist_assets/artist_img.svg";
 import framel from "../../../public/artist_assets/frame_left.svg";
 import framer from "../../../public/artist_assets/frame_right.svg";
+import { Navbar } from "../../Components";
 
 const Artist = () => {
   return (
     <div className={styles.artist_page}>
+      <Navbar/>
       <img
         alt="tmg"
         className={styles.bg_img}

diff --git a/src/Pages/Error/Error.jsx b/src/Pages/Error/Error.jsx
@@ -1,7 +1,13 @@
+import { Navbar } from "../../Components";
 import style from "./Error.module.scss";
 
 const Error = () => {
-  return <div className={style.error}>Error</div>;
+  return (
+    <div>
+      <Navbar />
+      <div className={style.error}>Error</div>
+    </div>
+  );
 };
 
 export default Error;
diff --git a/src/Pages/Gallery/Gallery.jsx b/src/Pages/Gallery/Gallery.jsx
@@ -1,56 +1,65 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
-import 'swiper/css/effect-coverflow';
-import 'swiper/css/pagination';
-import './styles.css';
-import { EffectCoverflow, Pagination, Autoplay } from 'swiper/core';
-let img1 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image1"
-let img2 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image2"
-let img3 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image3"
-import GalleryHeader from './GalleryHeader/GalleryHeader';
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "./styles.css";
+import { EffectCoverflow, Pagination, Autoplay } from "swiper/core";
+let img1 =
+  "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image1";
+let img2 =
+  "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image2";
+let img3 =
+  "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image3";
+import GalleryHeader from "./GalleryHeader/GalleryHeader";
+import { Navbar } from "../../Components";
 
-
-
-const Gallery = ()=> {
+const Gallery = () => {
   return (
-    <div className='galleryPage-container'>  
+    <div className="galleryPage-container">
+      <Navbar />
 
-     <GalleryHeader />
+      <GalleryHeader />
 
       <Swiper
-        effect={'coverflow'}
+        effect={"coverflow"}
         loop={true}
         grabCursor={true}
         spaceBetween={0}
         centeredSlides={true}
-        slidesPerView={'auto'}
+        slidesPerView={"auto"}
         coverflowEffect={{
           rotate: 50,
           stretch: 0,
           depth: 100,
           modifier: 1,
           slideShadows: false,
         }}
-
         autoplay={{
           delay: 1500,
           disableOnInteraction: false,
         }}
-
         pagination={true}
         modules={[EffectCoverflow, Pagination, Autoplay]}
         className="mySwiper"
       >
-      <SwiperSlide><img src={img1} alt='Carousel photos'></img></SwiperSlide>
-      <SwiperSlide><img src={img2} alt='Carousel photos'></img></SwiperSlide>
-      <SwiperSlide><img src={img3} alt='Carousel photos'></img></SwiperSlide>
-      <SwiperSlide><img src={img1} alt='Carousel photos'></img></SwiperSlide>
-      <SwiperSlide><img src={img2} alt='Carousel photos'></img></SwiperSlide>
-
+        <SwiperSlide>
+          <img src={img1} alt="Carousel photos"></img>
+        </SwiperSlide>
+        <SwiperSlide>
+          <img src={img2} alt="Carousel photos"></img>
+        </SwiperSlide>
+        <SwiperSlide>
+          <img src={img3} alt="Carousel photos"></img>
+        </SwiperSlide>
+        <SwiperSlide>
+          <img src={img1} alt="Carousel photos"></img>
+        </SwiperSlide>
+        <SwiperSlide>
+          <img src={img2} alt="Carousel photos"></img>
+        </SwiperSlide>
       </Swiper>
-</div>
+    </div>
   );
-}
-
+};
 
-export default Gallery;
+export default Gallery;
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
@@ -1,9 +1,10 @@
 import styles from "./Home.module.scss";
-import {Gallery, Sponsors, AboutUs, AboutNits} from '../../Components'
+import {Gallery, Sponsors, AboutUs, AboutNits, Navbar} from '../../Components'
 import Hero from "../../Components/Hero/Hero";
 const Home = () => {
   return (
     <main className={styles.home}>
+      <Navbar isHome={true}/>
       <Hero/>
       <AboutUs />
       <AboutNits />

diff --git a/src/Pages/Team/Team.jsx b/src/Pages/Team/Team.jsx
@@ -10,6 +10,7 @@ import drumLeft from "./drum right.json";
 
 import "swiper/css";
 import "swiper/css/effect-coverflow";
+import { Navbar } from "../../Components";
 const Team = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false);
 
@@ -72,6 +73,7 @@ const Team = () => {
 
   return (
     <div className={styles.wrapper}>
+      <Navbar/>
       <img
         alt="tmg"
         className={styles.bg_img}