Skip to content

made some changes in responsive nav menu #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mehrab-alam wants to merge 1 commit into
base: main
Choose a base branch
from
Open

made some changes in responsive nav menu #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const Header: FC<{

const onAnchorClick = () => {
setSideNav(false);
setActive(false);
};

return (
Expand Down Expand Up @@ -119,7 +120,7 @@ const Header: FC<{
* responsive
*/}

<div className=' relative lg:hidden'>
<div className=' lg:hidden'>
<SideNav
isOpen={showSideNav}
onAnchorClick={onAnchorClick}
Expand All @@ -139,6 +140,7 @@ const Header: FC<{
toggled={showSideNav}
onToggle={(toggle: boolean | ((prevState: boolean) => boolean)) => {
setSideNav(!showSideNav);
setActive(false);
}}
/>
</div>
Expand Down
68 changes: 40 additions & 28 deletions src/components/SideNav/SideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<{
Expand All @@ -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,
Expand All @@ -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) => (
Expand All @@ -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={() => {
Expand All @@ -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'>
Expand All @@ -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>
);
})}
Expand All @@ -139,7 +151,7 @@ const SideNav: FC<{
</Menu>
</div>
}
</>
</div>
) : (
items[index]
)}
Expand Down