# activate-menu-item

> a package for activate menu item

Latest version **0.1.3** (published 2021-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install activate-menu-item
pnpm add activate-menu-item
yarn add activate-menu-item
bun add activate-menu-item
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-08-26 |
| First published | 2021-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hossein talebi |
| Maintainers | hossein.t79 |
| Keywords | activate, menu, item |

## Links

- npm: https://www.npmjs.com/package/activate-menu-item
- Homepage: https://github.com/hosseint79/activate-menu-item
- npm.io page: https://npm.io/package/activate-menu-item

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^17.0.2

## Recent versions

- 0.1.3 (latest) — 2021-08-26
- 0.1.2 — 2021-08-23
- 0.1.1 — 2021-08-23
- 0.1.0 — 2021-08-23

## README

# activate-menu-item

This package controls which item must be open in sidebar menu or selected base on route even after refreshing page and gives you a good structure for creating sidebar menu

## Demo

https://active-menu-item-demo.vercel.app/

## Installation

Install activate-menu-item with npm

```bash
  npm install activate-menu-item
```

## Usage

```javascript
const NavigationList = [
  {
    id: "information",
    title: "user information",
    children: [
      {
        title: "user personal information",
        path: "/info/personalInfo",
        activefor: [
          {
            path: "/info/personalInfo",
          },
        ],
      },
      {
        title: "user business information",
        path: "/info/businessInfo",
        activefor: [
          {
            path: "/info/businessInfo",
          },
        ],
      },
    ],
  },
];
```

```javascript
import { findActiveItem, createSidebar } from "activate-menu-item";
import { useLocation } from "react-router-dom";
import { Menu } from "antd";

import "antd/lib/menu/style/css";

const { SubMenu } = Menu;

function App() {
  const location = useLocation();
  const { activePath, openKeysItems } = findActiveItem(
    NavigationList,
    location.pathname
  );

  return (
    <Menu defaultOpenKeys={openKeysItems} selectedKeys={[activePath]}>
      <SubMenu key="information" title="user information">
        <Menu.Item key="/info/personalInfo">
          user personal information
        </Menu.Item>
        <Menu.Item key="/info/businessInfo">
          user business information
        </Menu.Item>
      </SubMenu>
    </Menu>
  );
}
```

## create sidebar

you can use NavigationList to create sidebar with createSidebar function.
this is helpful for bigger NavigationList

you must provide id property for submenu and for menu items you must add path property in NavigationList

```javascript
import { createSidebar } from "activate-menu-item";
import { useLocation } from "react-router-dom";
import { Menu } from "antd";

import "antd/lib/menu/style/css";

const { SubMenu } = Menu;

const ItemSidebar = ({ data, ...others }) => {
  // dont forget to pass others data to return component before key property
  return (
    <Menu.Item {...others} key={data.path}>
      {data.title}
    </Menu.Item>
  );
};

const SubmenuSidebar = ({ data, ...others }) => {
  // dont forget to pass others data to return component before key property
  return (
    <SubMenu {...others} key={data.id} title={data.title}>
      {others.children}
    </SubMenu>
  );
};

export function App() {
  const location = useLocation();
  const { activePath, openKeysItems } = findActiveItem(
    NavigationList,
    location.pathname
  );

  return (
    <Menu defaultOpenKeys={openKeysItems} selectedKeys={[activePath]}>
      {createSidebar(ItemSidebar, SubmenuSidebar, NavigationList)}
    </Menu>
  );
}
```

## Example

https://codesandbox.io/s/tender-shamir-vwy2w

## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/activate-menu-item · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._