property-navbar

Reusable Navbar + Sidebar React components for a Property Portal. The package relies on the host application's Tailwind and routing. Provide navigation handlers via props and provide userDetails, logo, title, etc. as props.

Install (local)

You can install this package locally or publish it to npm.

# after publishing
npm install property-navbar

Tailwind CSS Setup

This package uses Tailwind CSS for styling, but it does not bundle any CSS. Instead, it relies on the host application's Tailwind CSS setup. For the styles to be applied correctly, you must include the path to the package's components in your tailwind.config.js (or tailwind.config.ts) file.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add the following line:
    "./node_modules/property-navbar/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Customizing Colors

The MainNavbar component accepts a colors prop that allows you to customize the color scheme. You can import the Colors type from the package to see the available options.

Note: The colors prop only affects the MainNavbar component. The Sidebar component is styled using Tailwind CSS and can be customized by extending your Tailwind theme.

import { NavbarLayout, Colors } from 'property-navbar';

const myColors: Colors = {
  header: { background: 'linear-gradient(90deg,#4d0303,#7a0505)' },
  dropdown: {
    light: { background: '#ffffff', borderColor: '#e5e7eb', text: '#0f172a', userInfoBackground: '#f8fafc', itemHoverBackground: '#eef2f7' },
    dark: { background: '#0b1220', borderColor: '#1f2937', text: '#e6eef8', userInfoBackground: '#0b1520', itemHoverBackground: '#10202a' },
  },
  avatar: {
    light: { background: '#760f0f', text: '#ffffff' },
    dark: { background: '#850707', text: '#ffffff' }
  },
  transparent: 'transparent'
}

<NavbarLayout
  navbarProps={{
    colors: myColors,
    // ... other props
  }}
  // ... other props
/>

Sidebar Active State

To indicate the currently active page in the sidebar, you need to provide the activePath prop to the sidebarProps of the NavbarLayout component. This prop should be the href of the currently active navigation item.

Here's an example of how you can use it with next/router:

import { NavbarLayout } from 'property-navbar';
import { usePathname } from 'next/navigation';

const MyPage = () => {
  const pathname = usePathname();

  return (
    <NavbarLayout
      sidebarProps={{
        activePath: pathname,
        // ... other props
      }}
      // ... other props
    />
  );
}

Settings Sidebar

The NavbarLayout component now accepts a settingsMenuItems prop. These items will be displayed in a separate sidebar that can be opened by clicking the settings icon in the main navbar.

import { NavbarLayout } from 'property-navbar';
import { User as UserIcon } from 'lucide-react';

const settingsMenuItems = [
  { label: 'Manage Members', href: '/manageusers', icon: <UserIcon />, onClick: () => router.push('/manageusers') },
];

<NavbarLayout
  settingsMenuItems={settingsMenuItems}
  // ... other props
/>

Handling Logout

The MainNavbar component has an onLogout prop that is a function that is called when the logout button is clicked. You should provide a function that clears the user's session and redirects them to the login page.

Here's an example of how you can do this:

import { NavbarLayout } from 'property-navbar';
import { useRouter } from 'next/navigation';

const MyPage = () => {
  const router = useRouter();

  const handleLogout = () => {
    localStorage.clear();
    sessionStorage.clear();
    document.cookie = 'jwt_token=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
    router.push('/login');
  };

  return (
    <NavbarLayout
      navbarProps={{
        onLogout: handleLogout,
        // ... other props
      }}
      // ... other props
    />
  );
}

Usage

See src/index.ts for exported modules. Provide your tailwind setup and icons from lucide-react in the host app.