Wodey/wodey-prototype
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Sidebar component with menu toggle functionality and improved link interactions

Browse Source
This commit is contained in:
iamkiddy 2025-04-26 23:10:45 +00:00
parent 24d95e4ac4
commit 4ac05d5079
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Recent_Design.tsx
View File

@ -31,7 +31,7 @@ const recentDesigns = [
*/
export default function RecentDesign() {
return (
<div className="border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
<div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
{/* Logo and Title Section */}
<div>
<div className="flex flex-col items-center mb-6 md:mb-12">

43
components/Side_bar.tsx
View File

@ -2,6 +2,7 @@
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useState } from "react";
// Navigation links configuration
const links = [
@ -23,36 +24,46 @@ const links = [
*/
export default function Sidebar() {
const pathname = usePathname();
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<div className="bg-[#050616] w-full md:w-[80px] h-auto md:h-screen">
<div className="flex md:flex-col items-center justify-between md:justify-start gap-4 p-4 md:pt-10">
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
{/* Menu Icon */}
<Image
src="/menu-icon.png"
alt="logo"
width={24}
height={24}
className="cursor-pointer"
/>
{/* Navigation Links */}
<div className="flex md:flex-col items-center md:items-start gap-4 md:gap-6 md:mt-10 w-full md:w-auto px-4">
<div className="flex md:flex-col items-center gap-4 md:gap-6">
<div
className="cursor-pointer hover:opacity-80 transition-opacity duration-200"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<Image
src="/menu-icon.png"
alt="logo"
width={24}
height={24}
/>
</div>
{/* Navigation Links */}
{links.map((link) => (
<div key={link.path} className="flex flex-col items-center md:items-start w-auto">
<div
key={link.path}
className={`flex flex-col items-center cursor-pointer group`}
>
{/* Link Icon Container */}
<div className={`p-2 rounded-lg ${pathname === link.path ? 'bg-[#1a1c2b]' : ''}`}>
<div className={`p-2 rounded-lg transition-colors duration-200 ${pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'}`}>
<Image
src={link.icon}
alt={link.label}
width={24}
height={24}
className="cursor-pointer"
className="group-hover:opacity-80 transition-opacity duration-200"
/>
</div>
{/* Link Label */}
<p className="text-white text-xs mt-1 hidden md:block">{link.label}</p>
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'} group-hover:opacity-80`}>
{link.label}
</p>
</div>
))}
</div>