feat: create navbar component

[coxmars]

Pull Request

• Closes [feat] Add app navbar #85

Summary 📌

This PR enhances the Navbar component by introducing props for dynamic content, improving its reusability and flexibility across the application.

Changes Made ⚡️

Implementation of Dynamic Navbar Component

• Modified the Navbar component in components/Navbar.tsx to accept props for customizable content.
• Implemented TypeScript interfaces for proper type checking of component props.
• Refactored the component to use passed props instead of hardcoded values.

Added Props

• logoSrc: For customizable logo source
• logoAlt: For accessible alt text for the logo
• title: For customizable navbar title
• navItems: An array of navigation items (label and href)
• ctaButton: For customizable call-to-action button (label and href)

Improved Responsiveness

• Maintained the existing responsive design, ensuring the component works well on both mobile and desktop views.

Current output

https://www.loom.com/share/c84b5b3305eb4f239765952ee246ee61?sid=1aa46b47-82f3-451c-9c22-e156b6083d99

Time spent breakdown

Maybe around a couple of hours, I was doing other work stuff

Usage Example 🚀

const navItems = [
    { label: 'My Profile', href: '/profile' },
    { label: 'My funds', href: '/funds' }
  ];

<Navbar
      logoSrc={process.env.NEXT_PUBLIC_APP_ROOT + "icons/starklogo.png"}
      logoAlt="Go Stark Me logo"
      title="Go Stark Me"
      navItems={navItems}
      ctaButton={{
        label: "Connect wallet",
        href: "/"
      }}
  />

[EmmanuelAR]

Comments in navbar file

[EmmanuelAR]

LGTM! Exc work @coxmars