Dashboard Navbar Component

The Navbar component is a React-based navigation bar designed for use in web applications. It integrates with Next.js for image handling and react-hook-form for form management.

Features

• Responsive and interactive navigation bar layout.
• Integrates a hamburger menu icon for sidebar toggling.
• Includes a logo displayed using Next.js Image component.
• Features a SearchBox component for user input.
• Dropdown functionality with user initials and name display.

Props

Prop	Type	Description
sidebarShow	boolean	Boolean state indicating sidebar visibility.
setSidebarShow	any	Function to toggle the sidebar's visibility.

Component

import Image from "next/image";
import React from "react";
import logo from "@/assets/lglogo.svg";
import { useForm } from "react-hook-form";
import HamburgerIcon from "../Icons/HamburgerIcon";
import SearchBox from "../Inputs/SearchBox";

const Navbar = ({ setSidebarShow, sidebarShow }: Props) => {
  const { register } = useForm();

  return (
    <nav className="flex justify-between items-center h-[70px] text-black bg-blue-100">
      {/* ... rest of the component */}
    </nav>
  );
};

export default Navbar;

Usage

This component is ideal for applications requiring a top navigation bar with interactive elements like a sidebar toggle, search functionality, and user account information.

Styling

Styled using Tailwind CSS, the Navbar's appearance can be easily customized. It features a responsive design, ensuring proper display across various device sizes.

Dependencies

• React ^17.0.0 or higher
• Next.js for image handling
• react-hook-form ^7.0.0 or higher
• Tailwind CSS for styling

Notes

• Ensure that the logo source path is correctly set and the image exists in the specified directory.
• The HamburgerIcon and SearchBox components are assumed to be pre-defined and should be properly imported.
• The setSidebarShow function should be defined in the parent component to manage the state of the sidebar.

---

This documentation provides a comprehensive overview of the Navbar component, detailing its features, props, styling, and dependencies. Customize the implementation and styling according to your project's needs.