Nostr-components-navbar NPM

Sure, here is a proposed README.md for your Navbar component:

Nostr Navbar Component

Welcome to the Nostr Navbar Component repository! This is a flexible and stylish navigation bar component, designed for applications built using Preact. It is an essential part of any web application, guiding users across different sections of your website with ease and elegance.

Features

🎨 Customizable: Easily adapt the Navbar to match your application's aesthetic.
🧱 Built with Preact: This component is crafted using Preact, a fast, 3KB alternative to React with the same modern API.
🔗 User Navigation: Facilitates seamless navigation across different sections of your application.
📱 Responsive: Works smoothly across different devices and screen sizes.

Installation

To use this component in your project, download the source code from this repository.

Usage

Here is a simple example of how to use the Nostr Navbar Component:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="https://unpkg.com/preact@latest/dist/preact.umd.js"></script>
    <script src="https://unpkg.com/htm@latest/dist/htm.umd.js"></script>
    <script src="path/to/Navbar.js"></script>

    <script>
      const { h, render } = preact;
      const html = htm.bind(h);
      const links = [
        { '@id': '#home', label: 'Home' },
        { '@id': '#about', label: 'About' },
        // ... other links
      ]
  
      return (
        <div>
          <Navbar links={links} />
          {/* rest of your app */}
        </div>
      )

      render(html`<${Navbar} />`, document.body);
    </script>
  </body>
</html>

🛠️ API & Props

`links`

An array of objects representing the navigational links in the navbar.

Type: Array<{ '@id': string, label: string }>

Example:

const links = [
  { '@id': '#home', label: 'Home' },
  { '@id': '#about', label: 'About' },
];

User Authentication

The component manages user authentication status and provides a Login/Logout button. Upon user login, it fetches and caches the user’s profile, which can then be utilized in your application.