From d302729b0448badfee6cac89ccdc896eff742ec0 Mon Sep 17 00:00:00 2001
From: Vipul_Lakum <lakumvipul6351@gmail.com>
Date: Wed, 12 Jun 2024 07:50:16 +0530
Subject: [PATCH] Dark / Default + Scroll to top added

---
 src/App.js                                |  4 +-
 src/components/ScrollToTopButton.css      | 29 ++++++++++
 src/components/ScrollToTopButton.js       | 43 ++++++++++++++
 src/components/page1/Home.js              |  3 +
 src/components/page2/notice.js            |  2 +
 src/components/page3/1Year.js             |  2 +
 src/components/page3/2Year.js             |  2 +
 src/components/page3/3Year.js             |  2 +
 src/components/page3/4Year.js             |  3 +-
 src/components/page4/lecture.js           |  2 +
 src/components/page4/notes.js             |  2 +
 src/components/page4/pyq.js               |  2 +
 src/components/page4/syllabus.js          |  2 +
 src/components/page4/timetable.js         |  3 +
 src/components/page4/trdquantum.js        |  2 +
 src/components/page5(1st)/fstlecture.js   |  2 +
 src/components/page5(1st)/fstpyq.js       |  2 +
 src/components/page5(1st)/fstquantum.js   |  2 +
 src/components/page5(1st)/fstsyllabus.js  |  2 +
 src/components/page5(1st)/fsttimetable.js |  3 +-
 src/components/page6(2nd)/sndlecture.js   |  2 +
 src/components/page6(2nd)/sndquantum.js   |  2 +
 src/components/page6(2nd)/sndsyllabus.js  |  2 +
 src/components/page7(4yr)/frthquantum.js  |  2 +
 src/components/page7(4yr)/frthsyllabus.js |  2 +
 src/components/page8(3yr)/trdsyllabus.js  |  2 +
 src/index.css                             |  8 +++
 src/pages/header.css                      | 31 ++++++++++
 src/pages/header.js                       | 70 ++++++++++++++++-------
 29 files changed, 210 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ScrollToTopButton.css
 create mode 100644 src/components/ScrollToTopButton.js

diff --git a/src/App.js b/src/App.js
index f0724d7..e26ad5b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ import Footer from "./pages/footer";
 import Home from "./components/page1/Home";
 import Notice from "./components/page2/notice";
 import LoginSignup from './components/login/LoginSignup';
+import ScrollToTopButton from './components/ScrollToTopButton';
+
 
 // import { ThemeProvider } from './components/ThemeContext';
 // const ThemeContext = createContext();
@@ -30,7 +32,7 @@ function App() {
          {/* <Timetable /> */}
          <Home />
         <Footer/>
-        
+        <ScrollToTopButton />
     {/* </div> */}
     {/* </ThemeContext.Provider> */}
 
diff --git a/src/components/ScrollToTopButton.css b/src/components/ScrollToTopButton.css
new file mode 100644
index 0000000..5b17ad3
--- /dev/null
+++ b/src/components/ScrollToTopButton.css
@@ -0,0 +1,29 @@
+/* src/components/ScrollToTopButton.css */
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.scroll-to-top-button {
+    /* background-color: #007bff; */
+    /* color: rgb(0, 0, 0); */
+    border: none;
+    border-radius: 10%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    font-size: larger;
+    /* font-weight: bolder; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.5s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.scroll-to-top-button:hover {
+    transform: scale(1.1);
+}
+
diff --git a/src/components/ScrollToTopButton.js b/src/components/ScrollToTopButton.js
new file mode 100644
index 0000000..ebc7f2d
--- /dev/null
+++ b/src/components/ScrollToTopButton.js
@@ -0,0 +1,43 @@
+// src/components/ScrollToTopButton.js
+import React, { useState, useEffect } from 'react';
+import './ScrollToTopButton.css'; // Create a CSS file for styling
+import { FaArrowCircleUp } from 'react-icons/fa';
+
+const ScrollToTopButton = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Show button when page is scrolled down
+    const toggleVisibility = () => {
+        if (window.scrollY > 0) {
+            setIsVisible(true);
+        } else {
+            setIsVisible(false);
+        }
+    };
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', toggleVisibility);
+        return () => window.removeEventListener('scroll', toggleVisibility);
+    }, []);
+
+    return (
+        <div className="scroll-to-top">
+            {isVisible && (
+
+                < FaArrowCircleUp onClick={scrollToTop} className="scroll-to-top-button" />
+                // <button onClick={scrollToTop} className="scroll-to-top-button">
+
+                // </button>
+            )}
+        </div>
+    );
+};
+
+export default ScrollToTopButton;
diff --git a/src/components/page1/Home.js b/src/components/page1/Home.js
index 1f8274a..77c5b2b 100644
--- a/src/components/page1/Home.js
+++ b/src/components/page1/Home.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import '../page1/Home.css';
 import {Link} from 'react-router-dom';
+import ScrollToTopButton from '../ScrollToTopButton';
+
 function Home() {
   return (
     <div>
@@ -46,6 +48,7 @@ function Home() {
 
 
      </div>
+     <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page2/notice.js b/src/components/page2/notice.js
index 232a9f2..b952dfc 100644
--- a/src/components/page2/notice.js
+++ b/src/components/page2/notice.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import '../page2/notice.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 function notice() {
   return (
     <div className='notices'>
       <span>Get you syllabus notes timetable quantum and many more</span>
+      <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page3/1Year.js b/src/components/page3/1Year.js
index b5259c8..5e577c7 100644
--- a/src/components/page3/1Year.js
+++ b/src/components/page3/1Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function fstYear() {
   return (
 <div>
@@ -68,6 +69,7 @@ function fstYear() {
 </div>
 
 </div>
+<ScrollToTopButton />
 </div>
   )
 }
diff --git a/src/components/page3/2Year.js b/src/components/page3/2Year.js
index 0354ef4..f112be6 100644
--- a/src/components/page3/2Year.js
+++ b/src/components/page3/2Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function sndYear() {
   return (
     <div>
@@ -67,6 +68,7 @@ function sndYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
   </div>
   )
diff --git a/src/components/page3/3Year.js b/src/components/page3/3Year.js
index a8a34da..4f16325 100644
--- a/src/components/page3/3Year.js
+++ b/src/components/page3/3Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 function TrdYear() {
@@ -69,6 +70,7 @@ function TrdYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
     </div>
   )
diff --git a/src/components/page3/4Year.js b/src/components/page3/4Year.js
index b0bffe3..7abc9e1 100644
--- a/src/components/page3/4Year.js
+++ b/src/components/page3/4Year.js
@@ -10,6 +10,7 @@ import timetable from '../../assets/sec-3A.jpg';
 import syllabus from '../../assets/syllabuswt.jpg';
 
 import ComingSoon from '../../pages/cs.js'
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fothYear() {
@@ -44,7 +45,7 @@ function fothYear() {
 
   </div>
   </div>
-
+<ScrollToTopButton />
   </div>
 
     )
diff --git a/src/components/page4/lecture.js b/src/components/page4/lecture.js
index 184e725..aa364cd 100644
--- a/src/components/page4/lecture.js
+++ b/src/components/page4/lecture.js
@@ -11,6 +11,7 @@ import oops from '../../assets/oops.jpg';
 import wt from '../../assets/wt.jpg';
 import se from '../../assets/se.jpg';
 import bd from '../../assets/bd.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
                                                                                                                       
 function lecture() {
   return (
@@ -140,6 +141,7 @@ function lecture() {
 
 
        </div>
+       <ScrollToTopButton/>
      </div>
     // </div>
   )
diff --git a/src/components/page4/notes.js b/src/components/page4/notes.js
index 2d70378..72d3927 100644
--- a/src/components/page4/notes.js
+++ b/src/components/page4/notes.js
@@ -4,6 +4,7 @@ import Header from '../../pages/header';
 import ComingSoon from '../../pages/cs.js';
 
 import '../page4/notes.css';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function notes() {
   return (
     <div >
@@ -16,6 +17,7 @@ function notes() {
  </div> */}
 
   <ComingSoon/>
+  <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page4/pyq.js b/src/components/page4/pyq.js
index c0d78b2..5a34324 100644
--- a/src/components/page4/pyq.js
+++ b/src/components/page4/pyq.js
@@ -1,11 +1,13 @@
 import React from 'react'
 import ComingSoon from '../../pages/cs.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function pyq() {
   return (
     <div>
   
       <ComingSoon/>
+      <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page4/syllabus.js b/src/components/page4/syllabus.js
index 8cca112..338ba1d 100644
--- a/src/components/page4/syllabus.js
+++ b/src/components/page4/syllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const Syllabus =() => {
@@ -174,6 +175,7 @@ const Syllabus =() => {
 
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page4/timetable.js b/src/components/page4/timetable.js
index 84d1a16..6eec96e 100644
--- a/src/components/page4/timetable.js
+++ b/src/components/page4/timetable.js
@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function Timetable() {
 
     const [selectedSection, setSelectedSection] = useState(null);
@@ -30,6 +31,8 @@ function Timetable() {
       {/* apering section of timetable */}
       {selectedSection && <Imgdata section={selectedSection}/>}
 
+      <ScrollToTopButton />
+
     </div>
   )
 
diff --git a/src/components/page4/trdquantum.js b/src/components/page4/trdquantum.js
index bf8a01d..710f5cf 100644
--- a/src/components/page4/trdquantum.js
+++ b/src/components/page4/trdquantum.js
@@ -9,6 +9,7 @@ import Imgdaa from '../../assets/daa1.jpg';
 // import Imgmlt from '../../assets/mlt.jpg'
 import Imgcn from '../../assets/cn.webp';
 import Imgwt from '../../assets/wt.png';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function quantum() {
         
@@ -125,6 +126,7 @@ function quantum() {
 
 </div>
     </div>
+    <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page5(1st)/fstlecture.js b/src/components/page5(1st)/fstlecture.js
index a5cc4f4..de1692e 100644
--- a/src/components/page5(1st)/fstlecture.js
+++ b/src/components/page5(1st)/fstlecture.js
@@ -16,6 +16,7 @@ import pps from '../../assets/pps.jpg';
 import ai from '../../assets/ai.jpg';
 import ssi from '../../assets/ssi.jpg';
 import ssii from '../../assets/ssii.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 function lecture() {
   return (
@@ -169,6 +170,7 @@ function lecture() {
 
 
        </div>
+       <ScrollToTopButton />
      </div>
     // </div>
   )
diff --git a/src/components/page5(1st)/fstpyq.js b/src/components/page5(1st)/fstpyq.js
index f4ad9c4..07dabd0 100644
--- a/src/components/page5(1st)/fstpyq.js
+++ b/src/components/page5(1st)/fstpyq.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import ComingSoon from '../../pages/cs.js';
 import Header from '../../pages/header.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fstpyq() {
@@ -8,6 +9,7 @@ function fstpyq() {
     <div>
        <Header />
        <ComingSoon/>
+       <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page5(1st)/fstquantum.js b/src/components/page5(1st)/fstquantum.js
index f5371f2..4f2b6dd 100644
--- a/src/components/page5(1st)/fstquantum.js
+++ b/src/components/page5(1st)/fstquantum.js
@@ -11,6 +11,7 @@ import  Imgchem from '../../assets/chemistry.webp';
 import Imgmath2 from '../../assets/math2.jpg';
 import Imgelectronics from '../../assets/electronics.png';
 import Imgmech from '../../assets/mechanical.jpg';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function quantum() {
         
@@ -152,6 +153,7 @@ function quantum() {
 
 </div>
     </div>
+    <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page5(1st)/fstsyllabus.js b/src/components/page5(1st)/fstsyllabus.js
index 69f63bc..5278ad6 100644
--- a/src/components/page5(1st)/fstsyllabus.js
+++ b/src/components/page5(1st)/fstsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const fstsyllabus =() => {
@@ -61,6 +62,7 @@ const fstsyllabus =() => {
     </div>
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page5(1st)/fsttimetable.js b/src/components/page5(1st)/fsttimetable.js
index ebc1477..7c604c6 100644
--- a/src/components/page5(1st)/fsttimetable.js
+++ b/src/components/page5(1st)/fsttimetable.js
@@ -3,6 +3,7 @@ import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
 import ComingSoon from '../../pages/cs.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function  Fsttimetable() {
 
@@ -37,7 +38,7 @@ function  Fsttimetable() {
     
       {/* apering section of timetable */}
       {/* {selectedSection && <Imgdata section={selectedSection}/>} */} 
-
+      <ScrollToTopButton />
     </div>
   )
 
diff --git a/src/components/page6(2nd)/sndlecture.js b/src/components/page6(2nd)/sndlecture.js
index 8303af9..b17f352 100644
--- a/src/components/page6(2nd)/sndlecture.js
+++ b/src/components/page6(2nd)/sndlecture.js
@@ -17,6 +17,7 @@ import Imgos from '../../assets/los.jpg';
 import Imgtafl from '../../assets/ltafl.jpg';
 
 import ssii from '../../assets/ssii.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 function sndlecture() {
   return (
@@ -170,6 +171,7 @@ function sndlecture() {
 
 
        </div>
+       <ScrollToTopButton />
      </div>
     // </div>
   )
diff --git a/src/components/page6(2nd)/sndquantum.js b/src/components/page6(2nd)/sndquantum.js
index 4ab28b2..e1fba0f 100644
--- a/src/components/page6(2nd)/sndquantum.js
+++ b/src/components/page6(2nd)/sndquantum.js
@@ -15,6 +15,7 @@ import Imgcs from '../../assets/css.jpeg';
 import Imguhv from '../../assets/uhv.jpg';
 import Imgos from '../../assets/os.jpg';
 import Imgtafl from '../../assets/autometa.png';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
         
@@ -167,6 +168,7 @@ function sndquantum() {
 
 </div>
   </div>
+  <ScrollToTopButton />
   </div>
   )
 }
diff --git a/src/components/page6(2nd)/sndsyllabus.js b/src/components/page6(2nd)/sndsyllabus.js
index 76893f3..7b25f7a 100644
--- a/src/components/page6(2nd)/sndsyllabus.js
+++ b/src/components/page6(2nd)/sndsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const Syllabus =() => {
@@ -70,6 +71,7 @@ const Syllabus =() => {
 
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page7(4yr)/frthquantum.js b/src/components/page7(4yr)/frthquantum.js
index 2647662..af3788f 100644
--- a/src/components/page7(4yr)/frthquantum.js
+++ b/src/components/page7(4yr)/frthquantum.js
@@ -1,9 +1,11 @@
 import React from 'react'
+import ScrollToTopButton from '../ScrollToTopButton'
 
 function frthquantum() {
   return (
     <div>
         
+        <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page7(4yr)/frthsyllabus.js b/src/components/page7(4yr)/frthsyllabus.js
index 9c0caf3..a95a51d 100644
--- a/src/components/page7(4yr)/frthsyllabus.js
+++ b/src/components/page7(4yr)/frthsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const frthsyllabus =() => {
@@ -71,6 +72,7 @@ const frthsyllabus =() => {
 
   </div>
 </div>
+    <ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page8(3yr)/trdsyllabus.js b/src/components/page8(3yr)/trdsyllabus.js
index 2e4ebb3..f5e4fa1 100644
--- a/src/components/page8(3yr)/trdsyllabus.js
+++ b/src/components/page8(3yr)/trdsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const trdsyllabus =() => {
@@ -71,6 +72,7 @@ const trdsyllabus =() => {
     </div>
   </div>
 </div>
+    <ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/index.css b/src/index.css
index fb83b1a..d603830 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,14 @@ body {
   
 }
 
+/* Dark theme styles */
+body.dark-theme {
+  background-color: darkblue;
+  /* Dark theme background color */
+  color: white;
+  /* Dark theme text color */
+}
+
 #light{
   background-color: #fff;
 }
diff --git a/src/pages/header.css b/src/pages/header.css
index 4a09d83..88567fc 100644
--- a/src/pages/header.css
+++ b/src/pages/header.css
@@ -233,3 +233,34 @@
     align-items: center;
   }
 
+
+/* Css for Dark / Deafult Toggler */
+
+.theme-toggler {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 16px;
+  font-weight: bold;
+  transition: color 0.3s ease, transform 0.3s ease;
+  svg{
+    font-size: 1.8rem;
+  }
+}
+
+.theme-toggler:hover {
+  color: #007bff;
+  /* Change color on hover */
+  transform: scale(1.1);
+  /* Add scale animation on hover */
+}
+
+.toggle-text {
+  margin-left: 8px;
+}
+
diff --git a/src/pages/header.js b/src/pages/header.js
index f500278..0e99497 100644
--- a/src/pages/header.js
+++ b/src/pages/header.js
@@ -1,34 +1,60 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import './header.css';
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import { colors } from '@mui/material';
 // import { useTheme } from '../index';
-
+import { FiSun, FiMoon } from 'react-icons/fi'; // Import icons from react-icons
 
 
 function Header() {
-
-    //  const {isDarkMode, togglerDarkMode} =useTheme();
+  const themeKey = 'theme';
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Function to toggle between dark and default themes
+  const toggleTheme = () => {
+    const body = document.body;
+    body.classList.toggle('dark-theme');
+    const isDarkMode = body.classList.contains('dark-theme');
+    setIsDarkMode(isDarkMode);
+    localStorage.setItem(themeKey, isDarkMode ? 'dark' : 'default');
+  };
+
+  // Check and set the theme from local storage on component mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem(themeKey);
+    if (savedTheme === 'dark') {
+      const body = document.body;
+      body.classList.add('dark-theme');
+      setIsDarkMode(true);
+    }
+  }, []);
+
+
+  //  const {isDarkMode, togglerDarkMode} =useTheme();
 
   return (
 
-      
-      <div className="frame">
-        {/* logo */}
-           <div className="header">
-               <div className="logo">
-                <b><Link to ="/" className='link1'><img src="/logo.png" alt="logo" /></Link></b>
-                
-               </div>
-               <a href="/Login" className='logo link1' style={{padding: 10, margin: 5,height: 30, width: 40,positionTop: 15}}><b>login</b></a>
-
-      
-  
-             </div>
-            </div>
-            
-   
-    
+
+    <div className="frame">
+      {/* logo */}
+      <div className="header">
+        <div className="logo">
+          <b><Link to="/" className='link1'><img src="/logo.png" alt="logo" /></Link></b>
+
+        </div>
+        <a href="/Login" className='logo link1' style={{ padding: 10, margin: 5, height: 30, width: 40, positionTop: 15 }}><b>login</b></a>
+
+
+        {/* Theme Toggler Button */}
+        <button className="theme-toggler" onClick={toggleTheme}>
+          {isDarkMode ? <FiSun /> : <FiMoon />} {/* Use icons based on theme */}
+          <span className="toggle-text">{isDarkMode ? '' : ''}</span> {/* Text based on theme */}
+        </button>
+      </div>
+    </div>
+
+
+
   )
 }