feat: menubar (#11)

Co-authored-by: SRIMANKS <[email protected]>

src/app/about/page.tsx

@@ -68,17 +68,17 @@ const About = () => {
     return (
         <div
             className={
-                'h-screen w-full text-center p-7 about flex flex-col overflow-y-hidden ' +
+                'h-screen w-full text-center md:p-7 p-5 about flex flex-col overflow-y-hidden ' +
                 (isScrolled ? ' scrolled' : ' transitioned')
             }
             onWheel={scrollAllowed ? simulateScroll : undefined}
             onTouchStart={scrollAllowed ? handleTouchStart : undefined}
             onTouchMove={scrollAllowed ? handleTouchMove : undefined}
             onTouchEnd={scrollAllowed ? handleTouchEnd : undefined}
         >
-            <div className="flex w-full relative z-10">
-                <NavBar />
-            </div>
+            {/* <div className="flex w-full relative z-10"> */}
+            <NavBar />
+            {/* </div> */}
             <motion.div
                 z-index={-1}
                 className="flex flex-col justify-center items-center absolute w-screen top-0 left-0 -translate-x-[50%] -translate-y-[50%]"

src/components/Menu/Menu.tsx

@@ -0,0 +1,93 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import MenuItem from '@/components/MenuItem/MenuItem';
+import disk from '../../assets/images/disk.png';
+import diskglow from '../../assets/images/diskglow.png';
+import styles from '../NavBar/navbar.module.css';
+
+interface MenuProps {
+    isOpened: boolean;
+    setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Menu: React.FC<MenuProps> = ({ isOpened, setIsOpened }) => {
+    const [width, setWidth] = useState<number>(0);
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setWidth(window.innerWidth);
+            window.addEventListener('resize', () => setWidth(window.innerWidth));
+        }
+    }, []);
+
+    const menuItems = [
+        { name: 'Events', link: '/events' },
+        { name: 'Workshops', link: '/workshops' },
+        { name: 'Guest Lectures', link: '/guest-lectures' },
+        { name: 'Sponsors', link: '/sponsors' },
+        { name: 'Sangam Hardware', link: '/sangam-hardware' },
+        { name: 'Campus Ambassador', link: '/campus-ambassador' },
+        { name: 'Ingenium', link: '/ingenium' },
+        { name: 'Patronages', link: '/patronages' },
+        { name: 'Youth Summit', link: '/youth-summit' },
+        { name: 'Hospitality', link: '/hospitality' },
+        { name: 'Campus', link: '/campus' },
+    ];
+
+    return (
+        <div>
+            {isOpened ? (
+                <div className="flex w-full justify-center items-center absolute z-10 top-0 left-0  bg-black">
+                    <div
+                        className="absolute top-10 right-10 z-[20] text-white text-3xl hover:cursor-pointer"
+                        onClick={() => {
+                            if (setIsOpened) setIsOpened(false);
+                        }}
+                    >
+                        X
+                    </div>
+                    <Image
+                        src={disk}
+                        alt="disk"
+                        className="absolute bottom-4 lg:bottom-0"
+                        id={styles.disk}
+                    />
+                    <Image
+                        src={diskglow}
+                        alt="diskglow"
+                        className="absolute bottom-4"
+                        id={styles.glow}
+                    />
+
+                    <div
+                        className=" lg:top-1/5  absolute w-full lg:h-2/3 h-full"
+                        id={styles.menubg}
+                    />
+                    <ul
+                        className="  md:flex w-full font-Orbitron flex lg:flex-row flex-col justify-evenly items-center  pb-24  md:[40vh%]  min-h-screen  text-white"
+                        id={styles.mainContent}
+                    >
+                        {menuItems.map((item, index) => (
+                            <li className={styles.li} key={index}>
+                                <Link href={item.link}>
+                                    <MenuItem name={item.name} phone={width < 1020} />
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                    <style>
+                        {`
+
+`}
+                    </style>
+                </div>
+            ) : (
+                ''
+            )}
+        </div>
+    );
+};
+
+export default Menu;

src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+import bg from '../../assets/images/menuItembg.png';
+import phonebg from '../../assets/images/bgphonemenuitem.png';
+import Image from 'next/image';
+
+const MenuItem = (props: { name: string; phone: boolean }) => {
+    if (props.phone) {
+        return (
+            <li
+                className={`flex text-center text-sm items-center relative hover:scale-110 h-2 ease-in-out`}
+            >
+                <Image className="" src={phonebg} alt="bg" width="120" />
+                {props.name}
+            </li>
+        );
+    }
+
+    return (
+        <li
+            className={`flex-col w-20 text-center md:text-lg  relative hover:scale-110 h-fit ease-in-out`}
+        >
+            {props.name}
+            <Image className="absolute mt-[-2em]" src={bg} alt="bg" />
+        </li>
+    );
+};
+
+export default MenuItem;

src/components/NavBar/NavBar.tsx

@@ -1,14 +1,18 @@
-import React from 'react';
+'use client';
+import { useState } from 'react';
 import Image from 'next/image';
-import Link from 'next/link';
 import pragyanlogo from '../../assets/images/main-logo-22-white.svg';
 import pragyanlogomobile from '../../assets/images/main-logo-mobile.png';
 import hamburgerIcon from '../../assets/images/hamburgerMenu.svg';
 import LoginButton from '../LoginButton/LoginButton';
+import Link from 'next/link';
+import Menu from '@/components/Menu/Menu';
 
 const NavBar = () => {
+    const [isOpened, setIsOpened] = useState(false);
     return (
-        <div className="w-full flex h-14">
+        <div className="w-full flex h-14 box-border px-5 lg:px-7 z-10">
+            <Menu isOpened={isOpened} setIsOpened={setIsOpened} />
             <div className="flex basis-1/2 justify-start items-center lg:px-5">
                 <Image
                     src={pragyanlogo}
@@ -42,6 +46,7 @@ const NavBar = () => {
                     alt="Hamburger Icon"
                     draggable={false}
                     className="md:w-8 w-6 hover:cursor-pointer"
+                    onClick={() => setIsOpened(!isOpened)}
                 />
             </div>
         </div>

src/components/NavBar/navbar.module.css

@@ -0,0 +1,119 @@
+/* menu.module.css */
+
+#mainContent {
+     animation: fadeInLast 3s ease-in-out;
+ }
+ #disk {
+     animation: fall 3s linear;
+ }
+ #glow {
+     animation: fadeInFirst 3s ease-in-out;
+ }
+
+#menubg {
+    background: url('../../assets/images/menubg.png') no-repeat;
+    background-size: contain;
+    animation: fadeInLast 3s ease-in-out;
+    fill: 0.5;
+}
+
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100vh);
+    }
+    50% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+
+@keyframes fadeInFirst {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0;
+    }
+    75% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInLast {
+    0% {
+        opacity: 0;
+    }
+    75% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+
+#main-content {
+    animation: fadeInLast 3s ease-in-out;
+}
+
+#disk {
+    animation: fall 3s linear;
+    z-index: 20;
+}
+
+#glow {
+    animation: fadeInFirst 3s ease-in-out;
+}
+
+#menubg {
+    animation: fadeInLast 3s ease-in-out;
+
+}
+
+.li:nth-child(2n+1){
+    margin-top: 5rem;
+}
+.li:nth-child(3n){
+    margin-top: 12rem;
+}
+
+/* 
+@keyframes imagewipe {
+    0% {
+        opacity: 0;
+        width: 0%;
+    }
+    100% {
+        opacity: 1;
+        width: 100%
+    }
+} */
+
+@media (max-width: 1020px) {
+
+    #menubg {
+        background: url('../../assets/images/bgphone.png') no-repeat;
+        background-size: contain;
+        ;
+    }
+
+    .li:nth-child(2n+1){
+        margin-top: 0rem;
+        margin-left: 2rem;
+    }
+    .li:nth-child(3n){
+        margin-top: 0rem;
+        margin-left: 1rem;
+    }
+
+    #disk {
+        width: 100px;
+    }
+}

src/components/index.ts

@@ -11,3 +11,4 @@ export { default as Carousel } from './Carousel/carousel';
 export { default as LoadingWebView } from './Landing/LoadingWebView';
 export { default as LoadingMobileView } from './Landing/LoadingMobileView';
 export { default as ClusterCarousel } from './ClusterCarousel/ClusterCarousel';
+export { default as Menu } from './Menu/Menu';