From c2baea19d147bd6891533ff23883c1f51411727e Mon Sep 17 00:00:00 2001
From: Dex404 <x@keshawa.me>
Date: Tue, 16 Apr 2024 11:09:22 +0000
Subject: [PATCH] feat: navbar

---
 app/about/page.tsx                     |  3 ++-
 components/ImageFilter/image.tsx       |  3 ++-
 components/Navbar/Navbar.tsx           | 16 ++++++++++------
 components/OurServices/OurServices.tsx |  2 +-
 components/Slider/Slider.tsx           | 13 -------------
 components/Ui/Card.tsx                 |  2 +-
 components/aboutUs/AboutUs.tsx         |  3 ++-
 tailwind.config.js                     |  8 ++++++++
 8 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index e92480a..02c3c6f 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,5 +1,6 @@
 "use client"
-import React, { useRef, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
+import { useRef } from "react"
 
 const MouseTrackingGlowEffect: React.FC = () => {
   const [position, setPosition] = useState({ x: 0, y: 0 })
diff --git a/components/ImageFilter/image.tsx b/components/ImageFilter/image.tsx
index cfe6ce4..afc5b13 100644
--- a/components/ImageFilter/image.tsx
+++ b/components/ImageFilter/image.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 type ImageOwnProps<T extends React.ElementType> = {
   className: string
   image: string
@@ -7,7 +9,6 @@ type ImageOwnProps<T extends React.ElementType> = {
 }
 
 type ImageProps<T extends React.ElementType> = ImageOwnProps<T> & Omit<React.ComponentProps<T>, keyof ImageOwnProps<T>>
-import Image from "next/image"
 
 export const ImageCard = <T extends React.ElementType = "div">({
   className,
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 5cbf679..ba34376 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -1,12 +1,13 @@
 "use client"
+
+import { useEffect, useState } from "react"
+import { Button } from "components/Button/Button"
+import { FaArrowRight } from "react-icons/fa"
+
 interface NavbarProps {
   logoSrc: string // Path to your logo image
 }
 
-import { useState, useEffect } from "react"
-import { Button } from "components/Button/Button"
-import { FaArrowRight } from "react-icons/fa"
-
 const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
   const [showBackground, setShowBackground] = useState(false)
   const TOP_OFFSET = 50
@@ -49,7 +50,10 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
         showBackground ? "backdrop-blur" : "bg-transparent"
       } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
     >
-      <section className="MOBILE-MENU flex hidden backdrop-blur-lg" style={mobileNavStyle}>
+      <section
+        className={`${isNavOpen ? "animate-openmenu" : "animate-closemenu"}  block  backdrop-blur-lg`}
+        style={mobileNavStyle}
+      >
         <div>
           {" "}
           <div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
@@ -68,7 +72,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
               </svg>
             </button>
           </div>
-          <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white">
+          <ul className="MENU-LINK-MOBILE-OPEN flex h-full min-h-[300px]  flex-col items-center justify-center text-white">
             <li className="my-2 border-b border-gray-400 uppercase">
               <a href="#">Home</a>
             </li>
diff --git a/components/OurServices/OurServices.tsx b/components/OurServices/OurServices.tsx
index 7d62b6b..d9a5696 100644
--- a/components/OurServices/OurServices.tsx
+++ b/components/OurServices/OurServices.tsx
@@ -1,4 +1,4 @@
-import { GlowCapture, Glow } from "@codaworks/react-glow"
+import { Glow, GlowCapture } from "@codaworks/react-glow"
 import { BsAndroid, BsApple, BsGlobe2, BsHeadsetVr } from "react-icons/bs"
 
 export default function OurServices() {
diff --git a/components/Slider/Slider.tsx b/components/Slider/Slider.tsx
index 6990e83..a533edc 100644
--- a/components/Slider/Slider.tsx
+++ b/components/Slider/Slider.tsx
@@ -1,16 +1,3 @@
-import {
-  FigmaLogoIcon,
-  FramerLogoIcon,
-  SketchLogoIcon,
-  TwitterLogoIcon,
-  GitHubLogoIcon,
-  VercelLogoIcon,
-  NotionLogoIcon,
-  DiscordLogoIcon,
-  InstagramLogoIcon,
-  LinkedInLogoIcon,
-} from "@radix-ui/react-icons"
-
 const LOGOS = [
   "/images/Amazon_Web_Services-Logo.wine.svg",
   "/images/Cisco_Systems-Logo.wine.svg",
diff --git a/components/Ui/Card.tsx b/components/Ui/Card.tsx
index a82c9bb..d4e3cbf 100644
--- a/components/Ui/Card.tsx
+++ b/components/Ui/Card.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "./../../utils/cn"
 import Image from "next/image"
-import React, { createContext, useState, useContext, useRef, useEffect } from "react"
+import React, { createContext, useContext, useEffect, useRef, useState } from "react"
 
 const MouseEnterContext = createContext<[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined)
 
diff --git a/components/aboutUs/AboutUs.tsx b/components/aboutUs/AboutUs.tsx
index 11a3259..0a8c96c 100644
--- a/components/aboutUs/AboutUs.tsx
+++ b/components/aboutUs/AboutUs.tsx
@@ -24,7 +24,8 @@ export default function AboutUs() {
               </h2>
             </div>
             <h3 className="mr-90 max-w-2xl text-slate-300">
-              we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique needs.
+              we&apos; re dedicated to bringing your ideas to life with innovative solutions tailored to your unique
+              needs.
             </h3>
           </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index c0016ca..3363e90 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -104,6 +104,14 @@ module.exports = {
           },
         },
       },
+      openmenu: {
+        "0%": { left: "-224px" },
+        "100%": { left: "0px" },
+      },
+      closemenu: {
+        "0%": { left: "0px" },
+        "100%": { left: "-224px" },
+      },
     },
   },
   plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],