# WOI Top Navbar Component

WOI top navbar component is a reusable React component for creating interactive navbars in your web application.

## Props

WOI Top Navbar component accepts the following props:

- `text` (string): The content to be displayed inside the navbar. This is the text that appears on the navbar.
- `textColor` (string): The text color of the navbar's menu text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `hoverTextColor` (string): The text color of the navbar when the mouse pointer hovers over it. This allows you to change the text color on hover.
- `fontSize` (number): The text size or font size of the navbar's text. It determines how large or small the text appears.
- `fontWeight` (number): The font weight of the navbar's text. It controls the thickness or boldness of the text characters.
- `borderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
- `backgroundColor` (string): The background color of the navbar. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `borderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)).
- `borderThickness` (string): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage.
- `openLinkInNewTab` (boolean): A state that checks the link should in new window or in the same window.
- `clickFunction` (function): A callback function or action that should be executed when the navbar is clicked. This prop is used to define the behavior of the navbar when clicked.
- `headerIcon` (string): An icon or image that appears before the navbar's text. It can be specified as a path to an icon file or a CSS class for an icon font.
- `headerText` (string): The content to be displayed inside the navbar. This is the text that appears on the navbar.
- `headerLink` (string): A URL or link that the navbar should navigate to when clicked. This prop is used when the navbar acts as a link to another page or resource.
- `iconPosition` (string): The position of the icon in the navbar. Common values include "left" and "right" and "center".
- `iconSize` (number): The size of the icon in the navbar. This prop is used to control the size of the icon in the navbar.
- `menuItems` (array): An array of menu items that appear in the navbar. Each menu item is an object with the following properties:
  - `name` (string): The name of the menu item. This is the text that appears on the menu item.
  - `link` (string): A URL or link that the menu item should navigate to when clicked. This prop is used when the menu item acts as a link to another page or resource.
  - `drop` (array): An array of menu items that appear in the dropdown menu. Each menu item is an object with the following properties:
    - `name` (string): The name of the menu item. This is the text that appears on the menu item.
    - `link` (string): A URL or link that the menu item should navigate to when clicked. This prop is used when the menu item acts as a link to another page or resource.
- `headerFunction` (function): A callback function or action that should be executed when the navbar is clicked. This prop is used to define the behavior of the navbar when clicked.