Navbar sidebar(Dapp)

[DanielEmmanuel1]

Implementation of Trajectifi navbar and sidebar menu

Overview

This PR implements the Trajectifi DApp interface with a responsive navbar and collapsible sidebar menu. The implementation follows the design provided in the mockups and adds interactivity for better user experience.

Changes

• Created a responsive navbar with search, notifications, and wallet connection
• Implemented a collapsible sidebar that expands on hover
• Set up the main page layout with proper background images
• Added route navigation system for different sections of the app
• Fixed background image implementation for the connect wallet section
• Integrated the layout with the existing Next.js application structure

Screenshots

Full Interface

Collapsed Sidebar

Implementation Details

Component Structure

The implementation separates the UI into logical components:

• layout.tsx - Main layout wrapper that includes sidebar and navbar
• sidebar.tsx - Collapsible sidebar with navigation links
• navbar.tsx - Top navigation bar with search and actions
• page.tsx - Main content area with the connect wallet section

Design System

• Consistent color palette using Tailwind custom colors
• Interactive elements with hover states
• Proper spacing and alignment throughout the interface

How to Test

1. Run the development server with npm run dev
2. Navigate to the homepage to see the full interface
3. Test the sidebar collapse/expand functionality by hovering over it
4. Resize the browser window to verify mobile responsiveness

Related Issues

---