@afzalimdad9/overlay-navbar
Version:
This is a animated overlay navbar created by @afzalimdad9
157 lines (133 loc) • 16.1 kB
Markdown
**[overlay-navbar](https://github.com/afzalimdad9/overlay-navbar)**
##### Navbar component built with React.
# DEMO
_click [Here](https://sdcyi.csb.app/) to try demo_
## Installation
npm install @afzalimdad9/overlay-navbar
In order to use overlay-navbar, you have to install react-icons
for react-icons ` npm install react-icons`
## Docs
**Step 1**
import {ReactNavbar} from "@afzalimdad9/overlay-navbar"
import "@afzalimdad9/overlay-navbar/ReactNavbar.min.css";
**Step 2**
add ReactNavbar Component in your file while passing appropriate props
<ReactNavbar />
## Parameters
| Parameter | Default | Description |
| ------------------------ | ---------------------------------- | -------------------------------------------------------------------- |
| burgerColor | `"black"` | 'This is to change the color of burger menu button' |
| burgerColorHover | `"burgerColor"` | "This is to change the color of burger menu button at the of hover " |
| navColor1 | `"rgb(35, 35, 35)"` | "This is to set the color of first nav section |
| navColor2 | `"navColor1"` | "This is to set the color of second nav section |
| navColor3 | `"navColor2"` | "This is to set the color of third nav section |
| navColor4 | `"navColor3"` | "This is to set the color of fourth nav section |
| logo | `"no default value, **required**"` | "To set the Logo in Navbar" |
| Link | `"HTML Anchor Tag, **optional**"` | "To set the Link in Navbar" |
| logoWidth | `"100px"` | "To set the width of Logo" |
| logoHeight | `"unset"` | "To set the height of Logo" |
| logoHoverSize | `"15px"` | "To set the drop-shadow blur at the time of hover" |
| logoHoverColor | `"green"` | "To set the drop-shadow Color at the time of hover" |
| logoTransition | `0.5` | "To set Logo Transition" |
| logoAnimationTime | `1` | "To set Logo Animation time, **1 means 1second**" |
| nav1FlexDirection | `"row"` | "To set Flex Direction of first nav section" |
| nav2FlexDirection | `"row"` | "To set Flex Direction of second nav section" |
| nav3FlexDirection | `"row"` | "To set Flex Direction of third nav section" |
| nav4FlexDirection | `"row"` | "To set Flex Direction of fourth nav section" |
| nav1alignItems | `"center"` | "To set Align Item of first nav section" |
| nav2alignItems | `"center"` | "To set Align Item of second nav section" |
| nav3alignItems | `"center"` | "To set Align Item of third nav section" |
| nav4alignItems | `"center"` | "To set Align Item of fourth nav section" |
| nav1justifyContent | `"center"` | "To set Justify Content of first nav section" |
| nav2justifyContent | `"center"` | "To set Justify Content of second nav section" |
| nav3justifyContent | `"center"` | "To set Justify Content of third nav section" |
| nav4justifyContent | `"center"` | "To set Justify Content of fourth nav section" |
| nav1Transition | `0.4` | "To set Transition of first nav section" |
| nav2Transition | `nav1Transition + 0.4` | "To set Transition of second nav section" |
| nav3Transition | `nav2Transition + 0.4` | "To set Transition of third nav section" |
| nav4Transition | `nav3Transition + 0.4` | "To set Transition of fourth nav section" |
| link1Text | `"Text 1"` | "To set the Text of first Link" |
| link2Text | `"Text 2"` | "To set the Text of second Link" |
| link3Text | `"Text 3"` | "To set the Text of third Link" |
| link4Text | `"Text 4"` | "To set the Text of fourth Link" |
| link1Url | `"/text1"` | "To set the Url of first Link" |
| link2Url | `"/text2"` | "To set the Url of second Link" |
| link3Url | `"/text3"` | "To set the Url of third Link" |
| link4Url | `"/text4"` | "To set the Url of fourth Link" |
| link1Size | `"1vmax"` | "To set the size of first Link Text" |
| link2Size | `"link1Size"` | "To set the size of second Link Text" |
| link3Size | `"link2Size"` | "To set the size of third Link Text" |
| link4Size | `"link3Size"` | "To set the size of fourth Link Text" |
| link1Family | `"Roboto"` | "To set the Family of first Link" |
| link2Family | `"link1Family"` | "To set the Family of second Link" |
| link3Family | `"link2Family"` | "To set the Family of third Link" |
| link4Family | `"link3Family"` | "To set the Family of fourth Link" |
| link1Color | `"black"` | "To set the Color of first Link" |
| link2Color | `"link1Color "` | "To set the Color of second Link" |
| link3Color | `"link2Color "` | "To set the Color of third Link" |
| link4Color | `"link3Color "` | "To set the Color of fourth Link" |
| link1BackgroundColor | `"unset"` | "To set the Background color of first Link" |
| link2BackgroundColor | `"unset"` | "To set the Background color of second Link" |
| link3BackgroundColor | `"unset"` | "To set the Background color of third Link" |
| link4BackgroundColor | `"unset"` | "To set the Background color of fourth Link" |
| link1ColorHover | `"link1Color"` | "To set the color of first Link at the time of Hover" |
| link2ColorHover | `"link1ColorHover"` | "To set the color of second Link at the time of Hover" |
| link3ColorHover | `"link2ColorHover "` | "To set the color of third Link at the time of Hover" |
| link4ColorHover | `"link3ColorHover "` | "To set the color of fourth Link at the time of Hover" |
| link1Decoration | `"none"` | "To set text decoration of first Link" |
| link2Decoration | `"link1Decoration` | "To set text decoration of second Link" |
| link3Decoration | `"link2Decoration"` | "To set text decoration of third Link" |
| link4Decoration | `"link3Decoration"` | "To set text decoration of fourth Link" |
| link1Margin | `"0"` | "To set margin of first Link" |
| link2Margin | `"link1Margin "` | "To set margin of second Link" |
| link3Margin | `"link2Margin "` | "To set margin of third Link" |
| link4Margin | `"link3Margin "` | "To set margin of fourth Link" |
| link1Padding | `"0"` | "To set padding of first Link" |
| link2Padding | `"link1Padding"` | "To set padding of first Link" |
| link3Padding | `"link2Padding"` | "To set padding of second Link" |
| link4Padding | `"link3Padding "` | "To set padding of third Link" |
| link1Border | `"none"` | "To set border of first Link" |
| link2Border | `"link1Border"` | "To set border of second Link" |
| link3Border | `"link2Border"` | "To set border of third Link" |
| link4Border | `"link3Border"` | "To set border of fourth Link" |
| link1Transition | `0.5` | "To set transition of first Link" |
| link2Transition | `link1Transition` | "To set transition of second Link" |
| link3Transition | `link2Transition` | "To set transition of third Link" |
| link4Transition | `link3Transition` | "To set transition of fourth Link" |
| link1AnimationTime | `1.5` | "To set Animation Time of first Link" |
| link2AnimationTime | `link1AnimationTime` | "To set Animation Time of second Link" |
| link3AnimationTime | `link2AnimationTime` | "To set Animation Time of third Link" |
| link4AnimationTime | `link3AnimationTime` | "To set Animation Time of fourth Link" |
| searchIcon | `true` | "To set Search Icon to true or false"
SearchIconElement| `"no default value, **required**"` | "Pass Search Icon Here"
| cartIcon | `true` | "To set Cart Icon to true or false" |
CartIconElement| `"no default value, **required**"` | "Pass Cart Icon Here"
| profileIcon | `true` | "To set Profile Icon to true or false"
ProfileIconElement| `"no default value, **required**"` | "Pass Profile Icon Here" |
| searchIconMargin | `"0"` | "To set Search Icon margin" |
| cartIconMargin | `"0"` | "To set Cart Icon margin" |
| profileIconMargin | `"0"` | "To set Profile Icon margin" |
| searchIconUrl | `"/search"` | "To set Search Icon Url" |
| cartIconUrl | `"/cart"` | "To set Cart Icon Url" |
| profileIconUrl | `"/account"` | "To set Profile Icon Url" |
| searchIconSize | `"2vmax"` | "To set the size of Search Icon" |
| cartIconSize | `"2vmax"` | "To set the size of Cart Icon" |
| profileIconSize | `"2.5vmax"` | "To set the size of profile Icon" |
| searchIconColor | `"white"` | "To set the Color of Search Icon" |
| cartIconSize | `"white"` | "To set the Color of Cart Icon" |
| profileIconColor | `"white"` | "To set the Color of profile Icon" |
| searchIconColorHover | `"searchIconColor"` | "To set the Color of Search Icon at the time of hover" |
| cartIconColorHover | `"cartIconColor"` | "To set the Color of Cart Icon at the time of hover" |
| profileIconColorHover | `"profileIconColor"` | "To set the Color of Profile Icon at the time of hover" |
| searchIconTransition | `0.5` | "To set the transition of Search Icon" |
| cartIconTransition | `0.5` | "To set the transition of Cart Icon" |
| profileIconTransition | `0.5` | "To set the transition of Profile Icon" |
| searchIconAnimationTime | `2` | "To set the Animation time of Search Icon" |
| cartIconAnimationTime | `searchIconAnimationTime + 0.5` | "To set the Animation time of Cart Icon" |
| profileIconAnimationTime | `cartIconAnimationTime + 0.5` | "To set the Animation time of profile Icon" |
_Please Must Install **react-icons** before using this Module_
## Created By @afzalimdad9
My name is Afzal Imdad, a.k.a afzalimdad9 on GitHub.
Github - Click [Here](https://github.com/afzalimdad9)
LinkedIn - [Click](https://www.linkedin.com/in/afzalimdad9/)