Skip to content
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

feat: updates hamburger menu and navbar #458

Closed
wants to merge 1 commit into from
Closed

feat: updates hamburger menu and navbar #458

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
108 changes: 53 additions & 55 deletions components/Navbar/navDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,60 @@
import React,{useState,forwardRef} from 'react';
import links from '../../config/links.json';
import React, { useState, forwardRef } from 'react';
import links from '../../config/links.json'; // Your link data
import Link from 'next/link';
import Dropdown from '../illustration/dropdown';

const NavDrop = forwardRef((props, ref) => {
const { setDrop } = props;
const [show, setShow] = useState(null); // Track which submenu is open

// Toggle the dropdown for a particular menu
const toggleDropdown = (linkTitle) => {
setShow(show === linkTitle ? null : linkTitle); // Toggle open/close
};

const NavDrop = forwardRef((props, ref)=> {
const {setDrop}=props;
const [show, setShow] = useState(null);
return (
<div ref ={ref} className='absolute ml-[-20px] top-16 w-full bg-[#1B1130]'>
<div className='flex flex-col p-5 pb-8 w-full'>
{links.map((link) => {
return (
<Link href={link.ref} key={link.title}>
<div
className='min-h-[50px] cursor-pointer'
onClick={() =>
show === link.title ? setShow(null) : setShow(link.title)
}
>
{link.subMenu ? (
<div>
<div className='flex items-center justify-between'>
<div className='text-white'>{link.title}</div>
<Dropdown
className={`transition-transform duration-700 ${
show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
}`}
/>
</div>
{show && show === link.title && (
<div className='flex flex-col py-6 w-full'>
{link.subMenu.map((sub) => (
<Link href={sub.ref} key={sub.ref}>
<div
onClick={() => setDrop(false)}
className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer'
>
{sub.title}
</div>
</Link>
))}
</div>
)}
</div>
) : (
<div className='text-white' onClick={() => setDrop(false)}>
{link.title}
</div>
)}
</div>
</Link>
);
})}
</div>
</div>
);
})
<div ref={ref} className="absolute ml-[-20px] top-16 w-full bg-[#1B1130]">
<div className="flex flex-col p-5 pb-8 w-full">
{links.map((link) => (
<Link href={link.ref} key={link.title}>
<div className="min-h-[50px] cursor-pointer">
<div
className="flex items-center justify-between"
onClick={() => toggleDropdown(link.title)}
>
<div className="text-white">{link.title}</div>
{link.subMenu && (
<Dropdown
className={`transition-transform duration-700 ${
show === link.title ? 'rotate-0' : 'rotate-[-90deg]'
}`}
/>
)}
</div>

{/* Display submenu if it is open */}
{show === link.title && link.subMenu && (
<div className="flex flex-col py-6 w-full">
{link.subMenu.map((sub) => (
<Link href={sub.ref} key={sub.ref}>
<div
onClick={() => setDrop(false)} // Close the menu when a sub-link is clicked
className="h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer"
>
{sub.title}
</div>
</Link>
))}
</div>
)}
</div>
</Link>
))}
</div>
</div>
);
});

NavDrop.displayName = 'NavDrop';

export default NavDrop;
export default NavDrop;
4 changes: 2 additions & 2 deletions components/Navbar/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function Navbar() {
};

return (
<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
<div className="flex justify-center items-center fixed top-0 w-full z-[99] text-white bg-black shadow-lg">
<div className='w-[1131px]'>
<div className='p-5 flex justify-between h-[75px] w-full items-center'>
<div className='flex items-center sm:justify-between sm:w-full'>
Expand All @@ -80,7 +80,7 @@ function Navbar() {
</Link>
</div>
{isTablet ? (
<div>
<div className='fixed left-[90%]'>
{drop ? (
<button>
<Cancel />
Expand Down
60 changes: 0 additions & 60 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading