Skip to content

feat: Added consistent top navigation bar and page layout#48

Merged
Xuccessor merged 1 commit into
BountyOnChain:mainfrom
tejas-koliyoor:feat/navbar
May 22, 2026
Merged

feat: Added consistent top navigation bar and page layout#48
Xuccessor merged 1 commit into
BountyOnChain:mainfrom
tejas-koliyoor:feat/navbar

Conversation

@tejas-koliyoor
Copy link
Copy Markdown

@tejas-koliyoor tejas-koliyoor commented May 22, 2026

🎨 feat: Add consistent top navigation bar and page layout

Description

Implements a fully-featured top navigation bar component with responsive design to provide consistent branding and navigation across all pages. This PR adds the foundational UI layer for the application with support for both desktop and mobile experiences.

Changes

New Files

  • app/components/Navbar.tsx - Main navbar component with desktop and mobile support
    • Logo/brand name linking to home (/)
    • Navigation links for primary sections (Bounties, Dashboard)
    • Integrated wallet connection button from wallet integration
    • Active link state highlighting
    • Mobile hamburger menu with smooth slide-out drawer
    • Responsive layout using Tailwind CSS breakpoints

Modified Files

  • app/layout.tsx - Added <Navbar /> component to main layout
    • Navbar is now displayed on all pages
    • Maintains consistent header across the application

Features Implemented

✅ Desktop Navigation

  • Horizontal navbar with logo on left
  • Navigation menu items (Bounties, Dashboard) in center/left
  • Connect Wallet button on right
  • Active link highlighting for current page

✅ Mobile Navigation

  • Hamburger menu icon (3-line menu)
  • Smooth slide-out drawer that doesn't interfere with page content
  • Same navigation items and wallet button
  • Mobile-first responsive design

✅ Accessibility

  • Semantic HTML structure
  • Proper heading hierarchy
  • ARIA labels for interactive elements
  • Keyboard navigation support
  • Mobile menu toggle is properly accessible

✅ Styling

  • Consistent with existing design system
  • Tailwind CSS utility classes
  • Proper spacing and typography
  • Hover/active states for better UX

Acceptance Criteria Checklist

  • Navbar component created in app/components/Navbar.tsx
  • Logo/brand name on left linking to /
  • Nav links for Bounties and Dashboard
  • ConnectWalletButton integrated on the right
  • Active link highlighting implemented
  • Mobile hamburger menu with slide-out drawer
  • Navbar component added to app/layout.tsx

Testing

Desktop Testing

  • Logo click navigates to home (/)
  • All nav links navigate to correct routes
  • Active link highlights on current page
  • Wallet button displays and functions correctly
  • Hover states work on all interactive elements

Mobile Testing

  • Hamburger menu appears on small screens
  • Menu drawer slides out smoothly
  • Menu items are clickable in drawer
  • Menu closes after navigation
  • Wallet button accessible in mobile view
  • Layout remains responsive on various screen sizes

Accessibility Testing

  • Tab through navbar elements in order
  • Hamburger menu accessible via keyboard
  • Screen reader announces nav items correctly

Screenshots / Demo

Related Issues

Closes: (Link to layout/navigation planning issue if applicable)

Notes for Reviewers

  • Navbar component is self-contained and easy to extend with additional links
  • Mobile drawer uses CSS transitions for smooth animation
  • Uses Next.js usePathname() hook for active link detection
  • Coordinates with wallet integration from separate issue
  • Ready for styling refinements in future PRs if needed

Breaking Changes

None. This is a new feature that doesn't affect existing functionality.

Checklist

  • Code follows project style guide
  • Comments added for complex logic
  • No console errors or warnings
  • Responsive design tested on multiple screen sizes
  • Component is reusable and maintainable
  • Related components/issues are linked

Example Usage

// In app/layout.tsx
import Navbar from '@/app/components/Navbar'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  )
}

Questions?

Feel free to request changes or clarifications before merge. Open to feedback on the responsive behavior or styling approach.

@Xuccessor Xuccessor merged commit 15e4e91 into BountyOnChain:main May 22, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Xuccessor Xuccessor Xuccessor approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tejas-koliyoor @Xuccessor @Rahul0714