Header component

[spwoodcock]

Once we have lower level component in place to compose this, a header is a major component to reuse in our tools.

It should have:

• HOT Logo
• Tool name / title
• Links to important pages
• Button to open a sidebar (if present)
  • Note: if mobile, the 'sidebar' should be a modal instead (but this is a different component)
• OSM login
  • We currently use a Python lib for this, but it OAuth can actually be handled entirely on the frontend (OSM itself is the backend)
  • There are libraries available to handle the token exchange via auth code flow

[MrBlackGhostt]

Hello @spwoodcock,

I'm eager to contribute to Issue #1—"Header Component Creation." With expertise in React, TypeScript, and Redux, here's my proposed approach:

Component Composition:

Use existing lower-level components to compose the header. Header Features:

Include HOT logo. Display tool name/title. Add links to essential pages. Implement a sidebar-opening button. Ensure mobile responsiveness, using a modal instead of a sidebar. Integrate OSM login, managing OAuth on the frontend. Skills Utilization:

Employ React, TypeScript, and Redux for efficient code.

Apply responsive design for mobile compatibility.

Use relevant libraries for token exchange via auth code flow.

Could you please assign this issue to me? Excited about the opportunity!

[spwoodcock]

Hello @MrBlackGhostt !

Of course we would love contribution and welcome a PR with new features 😄

The only thing is we recently took the technical decision to build these low level UI components using Web Components, instead of React (apologies I hadn't updated the repo description).

Web Components will be a lot more versatile as they can be used in any project, regardless of what web framework they are built with (React, plain HTML, Vue, Svelte, HTMX, etc).

For the lowest level components such as these we want to be as flexible as possible.

The tool of choice to built these Web Components is Lit, so if you fancy a challenge (it's not too difficult, I promise 😉), then we would of course still invite you to work on your proposed plan.

You can see an example Button built with Lit in the repo & we will have more to come in the near future.

If you are still interested, let me know & I will assign =)

[MrBlackGhostt]

I am interested in taking this challenge and want to use my knowledge and skills to this issue

[spwoodcock]

Amazing - thank you 😄

Please bear in mind that this is very early stages, so components made early on may be refined further down the line.

@JoltCode is already working on some of the lower level components, so it may be good to coordinate if possible.

I envision this header component will be an combination (wrapper) of a few lower level components such as a button to open a sidebar, possibly a dropdown menu, avatar component, header component, and hot logo component.

The idea is this component library is well thought out and designed and will be used in every HOT tool eventually.

[JoltCode]

Hey @MrBlackGhostt, thanks so much for your interest in contributing to the repo - really appreciate it!

As @spwoodcock mentioned, we're currently working on setting up the Lit components and the repo; we're currently still composing the lower level components, which will be required for the higher level components. This hopefully will be complete soon, but as it's currently holiday season, progress is a little slower than it has been.

Once we're ready for this component to be added, we'll be sure to let you know!

Thanks so much! 😄

[spwoodcock]

This has been started.

Requires adding:

• Sidebar menu button.
• Login functionality from various OAuth providers: https://github.com/hotosm/ui/issues/31
• Better styling.