Package Exports

nostr-components-navbar
nostr-components-navbar/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nostr-components-navbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

navbar

navbar

Documentation

Sure, here is a proposed README.md for your 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.

User Profile

The component fetches and caches user profile data upon login, which can be accessed via local storage.

💡 Notes

Ensure that CORS is properly configured for API requests to external servers.
Always test on various screen sizes to ensure UI compatibility.
Ensure to handle potential exceptions and API changes in future developments.

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

🤝 Contributing

Contributions, issues, and feature requests are welcome! See our contributing guide to get started.

Made with 💖 by Melvin Carvalho ```