IMPLEMENT SIDEBAR AND TOP NUDGE DESIGN

[0xDeon]

This PR closes Issue #16

Overview

This pull request introduces a series of enhancements to the Sidebar, Navbar, and Profile components within the dapp folder. The updates focus on improving the user interface and overall functionality, including the implementation of a collapsible sidebar, dynamic active state management for menu items, and a refined profile display. These changes aim to deliver a more intuitive and seamless user experience.

Key Changes

Collapsible Sidebar Component

• Introduced a collapsible sidebar that toggles between collapsed and expanded states on hover.

• The sidebar remains collapsed by default, optimizing screen real estate, and expands when hovered over for easy navigation.

• This feature enhances usability by reducing clutter while maintaining accessibility.

Active State Management

• Implemented logic to dynamically manage the active state of menu items.

• The "Dashboard" menu item is set as the default active state on page load.

• Clicking on any menu item updates the active state, ensuring the selected link is always highlighted.

Navbar Component

Navigation Enhancements:

• Updated the Navbar component to seamlessly integrate with the sidebar's collapsible behavior.

• Ensured consistent styling and functionality across both components for a cohesive user experience.

Profile Component

Sidebar Profile Section:

Introduced a new SidebarProfile component to display user information at the bottom of the sidebar.

Features include:

• Profile Image: Displays the user's profile picture with a fallback image (/Images/Profile.png) if none is provided.

• User Name: Shows the user's name.

• Wallet Address: Displays the user's wallet address, with truncation for longer addresses to maintain a clean layout.

• Utilized next/image for optimized image rendering and lucide-react for the ChevronUp icon.

Page Component

Default Active State:

Set the "Dashboard" menu item as the default active state upon page load.

Ensured that the active state updates dynamically as users interact with the menu.

Files Updated

A. Sidebar.tsx:

• Added collapsible behavior using hover events.

• Implemented active state management for menu items.

B. Navbar.tsx:

• Updated navigation functionality and styling to align with the sidebar.

C. Profile.tsx:

• Created the SidebarProfile component to display user details in the sidebar.

D. page.tsx:

• Configured the default active state and ensured dynamic updates for menu interactions.

Testing

• Verified that the sidebar collapses and expands correctly on hover.

• Tested to ensure the correct menu item is highlighted based on user interaction.

• Confirmed that the profile image, user name, and wallet address render correctly.