feat: added NavBar (#119)

* feat: added navbar

* feat: made responsive changes

* feat: added hover animation

* fix: made required changes

* chore: minor responsive changes

* chore: ran prettier fix

* feat: updated button , logo, navbar styles update

* chore: updated innovision logo

* fix: fixed navbar mismatch

* fix: navbar gap increased

* feat: main bar logo updated

* chore: hex codes added

* fix: made required changes in CSS,
fix: fixed navbar padding, fixed order of logo

---------

Co-authored-by: Srishty Mangutte <68679980+Srish-ty@users.noreply.github.com>

next.config.mjs

@@ -5,4 +5,7 @@ import withTwin from './withTwin.mjs'
  */
 export default withTwin({
   reactStrictMode: true,
+  images: {
+    domains: ['res.cloudinary.com'], // Add Cloudinary or any other external image host here
+  },
 })

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
+    "hamburger-react": "^2.5.1",
     "@nextui-org/react": "^2.4.8",
     "framer-motion": "^11.5.6",
     "@react-three/drei": "^9.112.1",

src/app/playground/page.js

@@ -3,6 +3,7 @@ import { LogoText, SubLogoText, Heading1, Heading2 } from '@/components/shared/T
 import { Paragraph, SubParagraph, SmallParagraph } from '@/components/shared/Typography/Paragraphs';
 import { PrimaryButton, SecondaryButton } from '@/components/shared/Typography/Buttons';
 import { NavbarLink } from '@/components/shared/Typography/Links';
+import Navbar from '@/components/Marginals/navbar/navbar';
 import { NavBar } from '@/components/NavBar/Nav';
 import { Footer } from '@/components/Footer/Footer';
 import Hero from '@/components/Hero Section/Hero';

src/components/Marginals/navbar/navbar.jsx

@@ -0,0 +1,71 @@
+'use client';
+import React from 'react';
+import {
+  HamburgerContainer,
+  LogoItem,
+  Logos,
+  MainBar,
+  MainBarItems,
+  MenuLogoItem,
+  NavContainer,
+  NavCover,
+  RegisterButton,
+  ResItem,
+  ResList,
+  ResMen,
+  ResponsiveMenu,
+  HamburgerRegisterButton,
+} from './navbar.styles';
+import Hamburger from 'hamburger-react';
+import { useState } from 'react';
+import { ButtonData, logos, MainNavData } from '../../../config/content/NavbarData/NavData';
+import Image from 'next/image';
+import { NavbarLink } from '@/components/shared/Typography/Links';
+
+const Navbar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function handleToggle() {
+    setIsOpen(!isOpen);
+  }
+
+  return (
+    <NavContainer>
+      <NavCover>
+        <Logos>
+          {logos.slice(1).map((logo, index) => (
+            <LogoItem key={index}>
+              <Image src={logo.link} alt={logo.name} width='20' height='20' />
+            </LogoItem>
+          ))}
+        </Logos>
+        <MainBar>
+          <MenuLogoItem>
+            <Image src={logos[0].link} alt={logos[0].name} width='40' height='40' />
+          </MenuLogoItem>
+          {MainNavData.map((item, index) => (
+            <MainBarItems key={index}>{item.title}</MainBarItems>
+          ))}
+        </MainBar>
+        <RegisterButton>{ButtonData.title}</RegisterButton>
+
+        <HamburgerContainer>
+          <Hamburger toggled={isOpen} toggle={handleToggle}></Hamburger>
+        </HamburgerContainer>
+      </NavCover>
+
+      {isOpen ? (
+        <ResMen>
+          <ResList>
+            {MainNavData.map((item, index) => (
+              <ResItem key={index}>{item.title}</ResItem>
+            ))}
+          </ResList>
+          <HamburgerRegisterButton>{ButtonData.title}</HamburgerRegisterButton>
+        </ResMen>
+      ) : null}
+    </NavContainer>
+  );
+};
+
+export default Navbar;

src/components/Marginals/navbar/navbar.styles.jsx

@@ -0,0 +1,73 @@
+import { PrimaryButton, SecondaryButton } from '@/components/shared/Typography/Buttons';
+import { NavbarLink } from '@/components/shared/Typography/Links';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const NavContainer = styled.nav`
+  ${tw`fixed top-0 w-full h-10 max-w-[1400px] p-3 mx-auto mt-4 sm:h-12 md:h-14 lg:h-16 sm:p-4 md:p-5 sm:mt-6 md:mt-7 left-[50%] z-[1000] translate-x-[-50%]`}
+`;
+
+export const NavCover = styled.div`
+  ${tw`flex justify-between lg:gap-[190px] md:gap-[120px] sm:gap-[70px]`}
+`;
+
+export const Logos = styled.div`
+  ${tw`flex mt-3 space-x-4 justify-evenly`}
+`;
+
+export const LogoItem = styled(SecondaryButton)`
+  ${tw`flex items-center justify-center w-10 h-10 p-0 md:w-8 md:h-8 lg:w-10 lg:h-10 hover:scale-110 hover:shadow-md`}
+
+  &:hover {
+    box-shadow: 0 0 8px #ffffff66 0 0 12px #ffffff4d;
+  }
+`;
+
+export const MenuLogoItem = styled.div`
+  ${tw`
+    w-10 h-10 md:w-8 md:h-8 lg:w-10 lg:h-10 text-white text-[14px] rounded-full font-montserrat font-medium cursor-pointer flex justify-center items-center transition-all duration-300 hover:scale-110 hover:shadow-md
+  `}
+`;
+
+export const MainBar = styled.nav`
+  backdrop-filter: blur(13.681711196899414px);
+
+  ${tw`
+    inline-flex items-center rounded-md border-[1.14px] border-solid border-white/[0.06] bg-white/[0.02] p-2 pr-6 flex justify-between  w-full max-[930px]:hidden max-w-xs md:max-w-md lg:max-w-xl space-x-0.5 rounded-md border-[0.5px] py-1 lg:mr-0 md:mr-[50px]
+  `}
+`;
+
+export const MainBarItems = styled(NavbarLink)`
+  ${tw`text-xs md:text-sm`}
+`;
+
+export const RegisterButton = styled(PrimaryButton)`
+  ${tw` max-[930px]:hidden lg:ml-0 md:ml-[-7rem]`}
+`;
+
+export const HamburgerContainer = styled.div`
+  ${tw`min-[930px]:hidden max-[500px]:mt-[10px] mt-[15px]`}
+`;
+
+export const ResMen = styled.div`
+  ${tw` z-10 grid w-full h-screen place-items-center bg-slate-900 opacity-95 min-[930px]:hidden`}
+`;
+
+export const ResList = styled.ul`
+  ${tw`fixed top-[250px] left-0 flex flex-col items-center justify-center w-full h-full gap-10`}
+`;
+
+export const ResItem = styled.li`
+  ${tw`relative mb-1 cursor-pointer hover:after:content-[''] hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:h-px hover:after:bg-current hover:after:transition-all hover:after:duration-[400ms] hover:after:ease-in-out hover:after:w-0 hover:after:hover:w-full`}
+`;
+
+export const HamburgerRegisterButton = styled.button`
+  background: radial-gradient(219.1% 188.15% at 52.58% -68.5%, #ff8dff 30.52%, #ff3c7f 53.85%);
+  box-shadow:
+    0px 10px 149.474px 0px #ffe3697a,
+    0px 0px 0.83px 3.322px #ffffff1a,
+    0px -3.322px 1.661px 0px #00000040 inset,
+    0px 1.661px 0.83px 0px #ffffff40 inset;
+
+  ${tw`min-[930px]:hidden w-[100px]  h-[35px]  rounded-md  hover:border-[2px]  hover:border-slate-500  transition-all  duration-300 mt-2.5 lg:ml-0 sm:mt-[100px] max-[655px]:mt-[150px]`}
+`;

src/components/shared/Typography/Links.jsx

@@ -4,5 +4,5 @@ import tw from 'twin.macro';
 export const NavbarLink = styled.span`
   opacity: ${({ $isActive }) => ($isActive ? '1' : '0.3')};
 
-  ${tw` text-sm md:text-base not-italic font-medium transition-all duration-300 cursor-pointer text-white font-montserrat leading-[140%] hover:opacity-100`}
+  ${tw` text-sm md:text-base not-italic font-medium transition-all duration-300 cursor-pointer text-white font-montserrat leading-[140%] hover:opacity-100 pt-1`}
 `;

src/config/content/NavbarData/NavData.js

@@ -0,0 +1,42 @@
+export const logos = [
+  {
+    name: 'inno',
+    link: 'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1726977580/Frame_2087326314_uhhz9b.png',
+  },
+  {
+    name: 'X',
+    link: 'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1726908562/X_logo_seqxxb.png',
+  },
+  {
+    name: 'Insta',
+    link: 'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1726908562/insta_logo_v7l8o8.png',
+  },
+  {
+    name: 'Linkden',
+    link: 'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1726908562/Linkdin_logo_zvpoca.png',
+  },
+];
+
+export const MainNavData = [
+  {
+    title: 'About us',
+    link: 'about',
+  },
+  {
+    title: 'Events',
+    link: 'events',
+  },
+  {
+    title: 'Sponsors',
+    link: 'sponsors',
+  },
+  {
+    title: 'Contact us',
+    link: 'contact',
+  },
+];
+
+export const ButtonData = {
+  title: 'Register',
+  link: 'register',
+};

yarn.lock

@@ -5148,6 +5148,11 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
+hamburger-react@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.5.1.tgz#a15973cacabbc414f490ab0aa13340e260fc6ec1"
+  integrity sha512-XlTIinYeYzLu76q4Vd9olwOJP0hFgAeZfJFX6tTT/ufTLhmOjI77CGFYIwGc6gcDeeT86660ZoKx3/L67vdZEw==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"