Navigation menu animation concept

THIS REPO HAS BEEN ARCHIVED AND THE CONTENT HAS BEEN MOVED TO THIS ONE

This was a good experiment to learn a few new tools that I wanted to use for a long time.

What I learned making this project:

• fundamentals of react.js: components, imports, props, states, installing modules, framer motion
• css modules

---

Usage

import Menu from './components/Menu/Menu';
import { BsHouse, BsNewspaper, BsShopWindow, BsPencilSquare } from 'react-icons/bs';

export default function App() {
  const menuElements = [
    {
      buttonIcon: <BsHouse />,
      buttonLabel: 'home',
      onClick: () => {},
    },
    {
      buttonIcon: <BsNewspaper />,
      buttonLabel: 'news',
      onClick: () => {},
    },
    {
      buttonIcon: <BsShopWindow />,
      buttonLabel: 'shop',
      onClick: () => {},
    },
    {
      buttonIcon: <BsPencilSquare />,
      buttonLabel: 'contact',
      onClick: () => {},
    },
  ];

  return (
    <div className='App'>
      <Menu menuElements={menuElements} />
    </div>
  );
}

Props

I recommend using react icons for menu and button icons.

• menuIcon - JSX element for custom menu icon
• menuElements - Array of objects containing the following:
  • buttonIcon - JSX element for button icon
  • buttonLabel - string for button name
  • onClick - Event function for redirecting to another page
• tiltAngle - Number for maximum tilt angle for menu bar
• menuSize - Number for menu bar size, use only even numbers like 2, 4, 6, 8

Menu sizes

SMALL - 2/4 items

MEDIUM - 4/6 items

LARGE - 6/8 items

EXTRA LARGE - 8/10 items

Contributing

If you think you can make an improvement don't hesitate to open a pull request.