nexusnavbar v1.0.17

ResponsiveAppBar

Overview

The ResponsiveAppBar component is a versatile and responsive navigation bar built with React and Material-UI. It adapts to both mobile and desktop views, displaying a hamburger menu on smaller screens and a full navigation bar on larger screens. The component is highly customizable, allowing you to pass a list of navigation links, a logo, and optional end components such as buttons or other UI elements.

Installation

To use the ResponsiveAppBar component, ensure that you have the necessary dependencies installed:

npm install @mui/material @mui/icons-material

import React from "react";
import ResponsiveAppBar from "nexusnavbar";

const App = () => {
  const navLinks = [
    { href: "/", text: "Home" },
    { href: "/about", text: "About" },
    { href: "/services", text: "Services" },
    { href: "/contact", text: "Contact" },
  ];

  const logoUrl = "/path/to/your/logo.png";

  return (
    <div className="App">
      <ResponsiveAppBar
        list={navLinks}
        logo={logoUrl}
        endComponent={<button className="custom-button">Sign In</button>}
        copyright={<p>© 2024 Your Company. All rights reserved.</p>}
      />
      {/* Other components and content */}
    </div>
  );
};

export default App;