react-sidenavlogo-pickupbiz

Installation

npm i react-SideNavLogo-pickupbiz
npm i react-router-dom

Usage in your app

Import to App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Counter } from "./components/Counter";
import { ProductsList } from "./components/ProductsList";
import { BikeList } from "./components/BikeList";
import { SideNavLogo } from "react-SideNavLogo-pickupbiz";

Add below

return (
  <BrowserRouter>
    <SideNavLogo links={links} type="modern" />
    <Routes>
      <Route path="/" element={<Counter />} />
      <Route path="/products" element={<ProductsList />} />
      <Route path="/bikes" element={<BikeList />} />
    </Routes>
  </BrowserRouter>
);

Your component follow below steps

Declare the links array

const links = [
  {
    title: "Home",
    icon: "fa fa-home",
    url: "/",
  },
  {
    title: "Products",
    icon: "fa fa-phone-square",
    url: "/products",
  },
  {
    title: "Bikes",
    icon: "fa fa-cogs",
    url: "/bikes",
  },
];

Add the below for Navigation to your component where you want to add it

<SideNavLogo links={links} />

Add below to your header tag of index.html

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

Reference

https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f

About Us

https://pickupbiz.com/