@noe-p/react-menus-components v3.0.5

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

Optional Props