Merge pull request #14 from SayarB/sayar

fix: increased z index for navbar
GDGVIT · Sep 9, 2023 · 994916e · 994916e
2 parents 78e0937 + f60d79b
commit 994916e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 65 deletions.
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -5,19 +5,22 @@
   box-sizing: border-box;
 }
 
-.horizontal-section, .horizontal-section2 {
+.horizontal-section,
+.horizontal-section2 {
   padding: 100px 0;
   background-color: pink;
 }
 
-.sticky-wrapper, .sticky-wrapper2 {
+.sticky-wrapper,
+.sticky-wrapper2 {
   position: sticky;
   top: 100px;
   width: 100%;
   overflow: hidden;
 }
 
-.element-wrapper, .element-wrapper2 {
+.element-wrapper,
+.element-wrapper2 {
   position: relative;
   display: flex;
 }
@@ -34,11 +37,11 @@
   /* height: 0%; */
   width: 100%;
   position: fixed;
-  z-index: 1;
+  z-index: 50;
   top: 0;
   left: 0;
-  background-color: rgb(0,0,0);
-  background-color: rgba(0,0,0, 0.95);
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.95);
   overflow-y: hidden;
   transition: 0.5s;
 }
@@ -57,7 +60,8 @@
   transition: 0.3s;
 }
 
-.overlay a:hover, .overlay a:focus {
+.overlay a:hover,
+.overlay a:focus {
   color: #f1f1f1;
 }
 

diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
@@ -5,71 +5,71 @@ import { FC, useState } from 'react';
 import { motion } from 'framer-motion';
 import socials from "@/content/social.json"
 import Icon from './Icons';
-import {scroller} from 'react-scroll'
+import { scroller } from 'react-scroll'
 import { useRouter } from 'next/navigation';
 interface Props {
-    theme: "light" | "dark"
-    landing?: boolean
+  theme: "light" | "dark"
+  landing?: boolean
 }
 const Navbar: FC<Props> = ({ theme = "light", landing }) => {
   const router = useRouter()
-    const [menu, setMenu] = useState(false)
-    const scrollToSection = (section:string) => {
-        setMenu(false)
-        router.push("/")
-        scroller.scrollTo(section, {
-            duration: 1500,
-            delay: 150,
-            smooth: true,
-            containerId: 'main-thing',
-            // offset: 50,
-        })
-    }
-    return (
-        <>
-        {landing? (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 2 }} style={{ color: (theme === "light" || menu) ? "white" : "black" }} className='fixed top-0 left-0 right-0 z-10 flex justify-between w-full p-10 gap-4'>
-            <Image src={(theme === 'light' || menu) ? "/logo-white.png" : "/logo-black.png"} width={300} height={300} alt='Logo' />
-            <Button onClick={() => {setMenu(!menu); theme = "light"}} theme={(theme === 'light' || menu) ? 'light' : 'dark'}>{menu ? "Close" :"Menu"}</Button>
-          </motion.div>
-        ) : (
-          <div style={{ color: (theme === "light" || menu) ? "white" : "black" }} className='fixed top-0 left-0 right-0 z-10 flex justify-between w-full p-10 gap-4'>
-              <Image src={(theme === 'light' || menu) ? "/logo-white.png" : "/logo-black.png"} width={300} height={300} alt='Logo' />
-              <Button onClick={() => {router.push("/")}} theme={(theme === 'light' || menu) ? 'light' : 'dark'}>Back</Button>
-            </div>
-        )
-        
-        }
-        <div id="myNav" className={`flex-col flex overlay ${menu ? "h-full" : "h-0"}`}>
-            <div className="overlay-content text-black px-16 pt-60">
-                <h1 onClick={() => scrollToSection("home")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Home
-                </h1>
-                <h1 onClick={() => scrollToSection("fame")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Achievements
-                </h1>
-                <h1 onClick={() => scrollToSection("events")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Events
-                </h1>
-                <h1 onClick={() => scrollToSection("team")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Team
-                </h1>
-                <h1 onClick={() => scrollToSection("projects")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Projects
-                </h1>
-                <h1 onClick={() => scrollToSection("blogs")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Blogs
-                </h1>
-                <h1 onClick={() => scrollToSection("footer")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
-                  Contact Us
-                </h1>
-            </div>
-            {/* <div className='mx-auto max-w-[700px] mt-auto mb-14 w-[100%] flex justify-evenly lg:justify-between'>
+  const [menu, setMenu] = useState(false)
+  const scrollToSection = (section: string) => {
+    setMenu(false)
+    router.push("/")
+    scroller.scrollTo(section, {
+      duration: 1500,
+      delay: 150,
+      smooth: true,
+      containerId: 'main-thing',
+      // offset: 50,
+    })
+  }
+  return (
+    <>
+      {landing ? (
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5, delay: 2 }} style={{ color: (theme === "light" || menu) ? "white" : "black" }} className='fixed top-0 left-0 right-0 flex justify-between w-full gap-4 p-10 z-[100]'>
+          <Image src={(theme === 'light' || menu) ? "/logo-white.png" : "/logo-black.png"} width={300} height={300} alt='Logo' />
+          <Button onClick={() => { setMenu(!menu); theme = "light" }} theme={(theme === 'light' || menu) ? 'light' : 'dark'}>{menu ? "Close" : "Menu"}</Button>
+        </motion.div>
+      ) : (
+        <div style={{ color: (theme === "light" || menu) ? "white" : "black" }} className='fixed top-0 left-0 right-0 flex justify-between w-full gap-4 p-10 z-[100]'>
+          <Image src={(theme === 'light' || menu) ? "/logo-white.png" : "/logo-black.png"} width={300} height={300} alt='Logo' />
+          <Button onClick={() => { router.push("/") }} theme={(theme === 'light' || menu) ? 'light' : 'dark'}>Back</Button>
+        </div>
+      )
+
+      }
+      <div id="myNav" className={`relative flex-col flex overlay ${menu ? "h-full" : "h-0"}`}>
+        <div className="px-16 text-black overlay-content pt-60">
+          <h1 onClick={() => scrollToSection("home")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Home
+          </h1>
+          <h1 onClick={() => scrollToSection("fame")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Achievements
+          </h1>
+          <h1 onClick={() => scrollToSection("events")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Events
+          </h1>
+          <h1 onClick={() => scrollToSection("team")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Team
+          </h1>
+          <h1 onClick={() => scrollToSection("projects")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Projects
+          </h1>
+          <h1 onClick={() => scrollToSection("blogs")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Blogs
+          </h1>
+          <h1 onClick={() => scrollToSection("footer")} className='font-sans text-[3rem] font-extrabold w-min text-grey hover:text-pastel_red mb-5 cursor-pointer'>
+            Contact Us
+          </h1>
+        </div>
+        {/* <div className='mx-auto max-w-[700px] mt-auto mb-14 w-[100%] flex justify-evenly lg:justify-between'>
                 {socials.map((social, i) => <Icon key={"soc" + i} {...social} />)}
             </div> */}
-        </div>
-        </>
-    );
+      </div>
+    </>
+  );
 }
 
 export default Navbar;