From 7fa110e34e3f357e4f86b613abc945af78e26170 Mon Sep 17 00:00:00 2001
From: Bhoopesh <bhoopesh459@gmail.com>
Date: Fri, 22 Dec 2023 14:23:39 +0530
Subject: [PATCH] feat: space-time menubar

---
 src/app/layout.tsx                      |  11 ++
 src/components/Menu/Menu.tsx            | 128 +++++++++++++++---------
 src/components/NavBar/navbar.module.css |   6 +-
 3 files changed, 93 insertions(+), 52 deletions(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4924cb5..1b8a54d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import type { Metadata } from 'next';
 import content from '@/components/AboutCard/AboutContent.json';
 import Toast from '@/components/Toast/Toast';
+import Script from 'next/script';
 
 export const metadata: Metadata = {
     title: "Pragyan '24 | Let's Celebrate Technology",
@@ -13,6 +14,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     return (
         <html lang="en">
             <body>
+                {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */}
+                <Script
+                    src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
+                    strategy="beforeInteractive"
+                ></Script>
+                {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */}
+                <Script
+                    src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"
+                    strategy="beforeInteractive"
+                ></Script>
                 <div className="w-full min-h-screen bg-[#070B12] page-layout">{children}</div>
                 <Footer />
                 <Toast />
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 5d9c1f0..ee10e05 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,10 +1,10 @@
 'use client';
 import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
+// 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 disk from '../../assets/images/disk.png';
+// import diskglow from '../../assets/images/diskglow.png';
 import styles from '../NavBar/navbar.module.css';
 
 interface MenuProps {
@@ -35,57 +35,87 @@ const Menu: React.FC<MenuProps> = ({ isOpened, setIsOpened }) => {
         { name: 'Campus', link: '/campus' },
     ];
 
-    return (
-        <div>
-            {isOpened ? (
-                <div className="flex w-full justify-center items-center absolute z-[1000] top-0 left-0  bg-black">
-                    <div
-                        className="absolute top-[2rem] right-[2rem] z-[1001] text-white text-3xl hover:cursor-pointer font-Orbitron"
-                        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}
-                    />
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (window.innerWidth > 1024 && window.VANTA)
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            window.VANTA.DOTS({
+                el: '#waves',
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 250.0,
+                minWidth: 200.0,
+                scale: 1.0,
+                scaleMobile: 1.0,
+                loading: false,
+                color: 0xa4ff,
+                color2: 'rgba(0, 0, 0, 0)',
+                backgroundColor: 0x0,
+                size: 3.4,
+                spacing: 25.0,
+                waveSpeed: 5,
+            });
+    });
 
+    return (
+        <>
+            <div>
+                {isOpened ? (
                     <div
-                        className=" lg:top-1/5  absolute w-full lg:h-3/4 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}
+                        className="flex w-full justify-center items-center absolute z-[1000] top-0 left-0 bg-black"
+                        id="waves"
                     >
-                        {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>
-                        {`
+                        <div
+                            className="absolute top-[2rem] right-[2rem] z-[1001] text-white text-3xl hover:cursor-pointer font-Orbitron"
+                            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={
+                                styles.menubg + ' lg:top-1/5  absolute w-full lg:h-3/4 h-full'
+                            }
+                        />
+                        <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>
+                        </style>
+                    </div>
+                ) : (
+                    ''
+                )}
+            </div>
+        </>
     );
 };
 
diff --git a/src/components/NavBar/navbar.module.css b/src/components/NavBar/navbar.module.css
index 895c317..8e2e919 100644
--- a/src/components/NavBar/navbar.module.css
+++ b/src/components/NavBar/navbar.module.css
@@ -12,11 +12,11 @@
         0 0 40px #fff;
 }
 
-#menubg {
+/* #menubg {
     background: url('../../assets/images/menubg.png') no-repeat;
     background-size: fill;
     animation: fadeInLast 3s ease-in-out;
-}
+} */
 
 @keyframes fall {
     0% {
@@ -128,7 +128,7 @@
 } */
 
 @media (max-width: 1020px) {
-    #menubg {
+    .menubg {
         background: url('../../assets/images/bgphone.png') no-repeat;
         background-size: contain;
         animation: fadeInMobile 1.2s ease-out;
