From e79139bc6032b3d71f98cb8c2a48be81179d32bd Mon Sep 17 00:00:00 2001
From: mehrab-alam <mehrab2000alam@gmail.com>
Date: Wed, 13 Mar 2024 12:22:04 +0530
Subject: [PATCH] made some changes in responsive nav menu

---
 src/components/Header/Header.tsx   |  4 +-
 src/components/SideNav/SideNav.tsx | 68 ++++++++++++++++++------------
 2 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index cf3e6fc..e60be93 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -17,6 +17,7 @@ const Header: FC<{
 
   const onAnchorClick = () => {
     setSideNav(false);
+    setActive(false);
   };
 
   return (
@@ -119,7 +120,7 @@ const Header: FC<{
          * responsive
          */}
 
-        <div className=' relative  lg:hidden'>
+        <div className='   lg:hidden'>
           <SideNav
             isOpen={showSideNav}
             onAnchorClick={onAnchorClick}
@@ -139,6 +140,7 @@ const Header: FC<{
             toggled={showSideNav}
             onToggle={(toggle: boolean | ((prevState: boolean) => boolean)) => {
               setSideNav(!showSideNav);
+              setActive(false);
             }}
           />
         </div>
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
index 4c389d9..2e09e66 100644
--- a/src/components/SideNav/SideNav.tsx
+++ b/src/components/SideNav/SideNav.tsx
@@ -1,8 +1,9 @@
 import { menuList } from '@/components/Menu/Product';
-import { faGreaterThan } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
 import { animated, useSpring, useSpringRef, useTrail } from '@react-spring/web';
+import Link from 'next/link';
 import { FC, useEffect, useState } from 'react';
 
 const SideNav: FC<{
@@ -22,7 +23,7 @@ const SideNav: FC<{
   const items = ['Product', 'Solutions', 'Pricing', 'Docs', 'Blogs'];
 
   const trail = useTrail(5, {
-    config: { mass: 5, tension: 2000, friction: 200 },
+    config: { mass: 5, tension: 1000, friction: 200 },
     delay: 450,
     opacity: isOpen ? 1 : 0,
     x: isOpen ? 0 : 20,
@@ -42,20 +43,24 @@ const SideNav: FC<{
     <animated.div
       style={{
         backgroundColor: '#000',
-        position: 'absolute',
+        position: 'relative',
+        overflow: 'scroll',
         height: '100vh',
         zIndex: 1000,
         ...springs,
       }}
     >
-      <div className='flex h-[60px] w-full items-center justify-start bg-white pl-4 '>
+      <Link
+        href={'/'}
+        className='  flex h-[60px] w-full items-center justify-start bg-white pl-4 '
+      >
         <img
           height={40}
           style={{ padding: 20 }}
           src='/images/formbit-logo.png'
           alt='Torqbit logo'
         />
-      </div>
+      </Link>
 
       <div className='mt-16'>
         {trail.map(({ height, ...style }, index) => (
@@ -66,17 +71,17 @@ const SideNav: FC<{
             key={index}
             className={`  
 
- ${items[index] === 'Product' && active ? `h-[460px]` : `h-full`}
+
           w-full overflow-hidden pl-10 text-[3em] font-[700] leading-[80px] tracking-[-0.05em] text-white transition-all will-change-[transform,opacity]`}
             style={style}
           >
             <animated.a
-              className={'text-3xl'}
-              href={`#${items[index]}`}
+              className='text-[3xl] transition-all md:text-inherit '
+              href={`${items[index] === 'Product' ? `#` : `#${items[index]}`} `}
               style={{ height }}
             >
               {items[index] === 'Product' ? (
-                <>
+                <div className=' transition-all'>
                   <div
                     className='flex items-center gap-4 '
                     onClick={() => {
@@ -85,14 +90,19 @@ const SideNav: FC<{
                   >
                     {items[index]}{' '}
                     <FontAwesomeIcon
-                      icon={faGreaterThan}
-                      className=' rotate-90 text-[15px]'
+                      icon={faChevronDown}
+                      className={`text-[25px] transition-all ${
+                        active && ' -rotate-180 pb-1  '
+                      }`}
                     />
                   </div>
                   {
                     <div
+                      onClick={() => {
+                        setActive(!active);
+                      }}
                       className={` mr-4 mt-2  transition-all  ${
-                        active ? `h-full` : `h-[0px]`
+                        active ? ` scale-y-[100%]` : `scale-y-0`
                       } `}
                     >
                       <Menu as='div'>
@@ -114,21 +124,23 @@ const SideNav: FC<{
                               <div className=' h-full w-full cursor-pointer   py-2'>
                                 {menuList.map((list, i) => {
                                   return (
-                                    <div
-                                      key={i}
-                                      className='flex items-center justify-start gap-2 rounded-lg py-2 tracking-wider'
-                                    >
-                                      <div className='flex h-10 w-10 items-center  justify-center rounded-lg bg-[#100f0eef] bg-opacity-50 text-[15px] text-gray-100'>
-                                        {list.icon}
-                                      </div>
-                                      <div>
-                                        <h4 className=' p-0 pb-1 text-[15px] font-[500] text-[#666]'>
-                                          {list.title}
-                                        </h4>
-                                        <p className='text-[10px] leading-none text-[#888] '>
-                                          {list.description}
-                                        </p>
-                                      </div>
+                                    <div key={i} onClick={onAnchorClick}>
+                                      <Link
+                                        href={list.href}
+                                        className='flex items-center justify-start gap-2 rounded-lg py-2 tracking-wider'
+                                      >
+                                        <div className='flex h-10 w-10 items-center  justify-center rounded-lg bg-[#100f0eef] bg-opacity-50 text-[15px] text-gray-100'>
+                                          {list.icon}
+                                        </div>
+                                        <div>
+                                          <h4 className=' p-0 pb-1 text-[15px] font-[500] text-[#666]'>
+                                            {list.title}
+                                          </h4>
+                                          <p className='text-[10px] leading-none text-[#888] '>
+                                            {list.description}
+                                          </p>
+                                        </div>
+                                      </Link>
                                     </div>
                                   );
                                 })}
@@ -139,7 +151,7 @@ const SideNav: FC<{
                       </Menu>
                     </div>
                   }
-                </>
+                </div>
               ) : (
                 items[index]
               )}