React Menus Components

FullScreenMenu

Installation

yarn add @noe-p/react-menus-components

Usage

import { FullScreenMenu LinkMenuType } from '@noe-p/react-menus-components';
import { useState } from 'react';
import styled from 'styled-components';

export function Navigation(): JSX.Element {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const linksList: LinkMenuType[] = [
    {
      label: 'Home',
      image: '/images/home-cinema.png',
      route: '/',
    },
    {
      label: 'City Garden',
      image: '/images/salon.png',
      route: '/city-garden',
    },
    { label: 'About', image: '/images/home-cinema.png', route: '/about' },
    { label: 'Contact', image: '/images/salon.png', route: '/contact' },
  ];

  return (
    <>
      <NavBarStyled>
        <a href='/'>{'Menu'}</a>
        <a onClick={() => setIsMenuOpen(!isMenuOpen)}>{'Toggle Menu'}</a>
      </NavBarStyled>
      <FullScreenMenu
        backgroundColor={'rgb(43, 58, 103)'}
        transparentBackgroundColor={'rgba(43, 58, 103, 0.5)'}
        linksList={linksList}
        isMenuOpen={isMenuOpen}
        setIsMenuOpen={setIsMenuOpen}
      />
    </>
  );
}

const NavBarStyled = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  padding-inline: 5%;
  width: 90vw;
  height: 100px;
  z-index: 100000;
  
    color: black;
    text-decoration: none;
    font-size: 25px;

    &:hover {
      cursor: pointer;
    }
  }
`;

Required Props

| Props | Type | Description | | --- | --- | --- | | isMenuOpen | boolean | Boolean to open the menu | | setIsMenuOpen | function(value: boolean) | function for close the menu | | linksList | LinkMenuType[] | List of links {label, image, route} |

Optional Props

| Props | Default | Type | Description | | --- | --- | --- | --- | | titleAnimationSpeed | 0.4 | number | Title animation duration (seconds) | | openModalAnimationDuration | 0.7 | number | Menu animation duration (seconds) | | titleAnimationDelay | 0.4 | number | Title animation delay (seconds) | | horizontalSlide | 100 | number | Link heights (px) at the start of the animation (can have a negative value) | | backgroundZoom | 1.05 | number | Zoom on the image when the mouse is over a link (ratio, 1 = no zoom) | | backgroundColor | black | string | Menu background color | | transparentBackgroundColor | rgba(0,0,0,0.5) | string | Image filter color | | titleColor | white | string | Title color | | titleFontSize | 90px | string | Title font size | | titleFontfamily | serif | string | Title font family | | titleMobileFontSize | 13vw | string | Title smartphone font size | | isMenuRounded | true | boolean | Rounded border bottom menu during animation | | styled | none | CSS | Custom style |