navbar-gigi

A React navigation bar component for GiGi applications with collapsible sidebar functionality.

Installation

npm install navbar-gigi

or

yarn add navbar-gigi

or

pnpm add navbar-gigi

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

• react (^18.0.0 || ^19.0.0)
• react-dom (^18.0.0 || ^19.0.0)
• react-router-dom (^6.0.0 || ^7.0.0)
• @radix-ui/react-slot (^1.2.4)
• @vng-home/ui-system-react (^2.4.0)

Usage

Basic Example

import { Navbar } from 'navbar-gigi';
import 'navbar-gigi/style';

function App() {
  return (
    <BrowserRouter>
      <Navbar domainUrl="https://your-domain.com" />
    </BrowserRouter>
  );
}

With React Router

The Navbar component requires react-router-dom's BrowserRouter (or similar router) to be set up in your application, as it uses Link and useLocation hooks internally.

import { BrowserRouter } from 'react-router-dom';
import { Navbar } from 'navbar-gigi';
import 'navbar-gigi/style';

function App() {
  return (
    <BrowserRouter>
      <div className="h-screen">
        <Navbar domainUrl="https://your-domain.com" />
      </div>
    </BrowserRouter>
  );
}

Props

Navbar

| Prop | Type | Required | Description | |------|------|----------|-------------| | domainUrl | string | Yes | The base domain URL for navigation links |

Features

• Collapsible Sidebar: Users can collapse/expand the navigation bar
• Persistent State: Collapse state is saved to localStorage
• Active Route Highlighting: Automatically highlights the active route
• Nested Navigation: Supports parent-child navigation items
• Customizable Icons: Built-in icon components for navigation items

Styling

The component uses Tailwind CSS. Make sure you have Tailwind CSS configured in your project and import the component's styles:

import 'navbar-gigi/style';

Requirements

• React 18+ or 19+
• React Router DOM 6+ or 7+
• Tailwind CSS configured in your project
• All peer dependencies installed (see above)

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Lint code
npm run lint

License

MIT