Sv-menu NPM | npm.io

SV- Menu (v0.2.1) (BETA)

SV-menu é um componente para ambiente de menu, com sidebar e navbar com o objetivo de ser altamente customizável (EM BETA).

Para começar a usar o SV-Menu

Instale o sv-menu:

  yarn add sv-menu
  -ou-
  npm install sv-menu

Em seguida, instale usando npm ou yarn as dependências do sv-menu:

  yarn add styled-components @types/styled-components react-icons
  -ou-
  npm install styled-components @types/styled-components react-icons

Exemplo

import React from 'react';
import { GiFrance } from 'react-icons/gi';
import Menu from './Menu';

const App: React.FC = () => {
    return (
        <>
            <Menu
                logo='logo'
                sidebarOptions={{
                    menuList: [
                        {
                            onClick: () => alert("olá sidebar"),
                            icon: <GiFrance />,
                            text: "exemplo item"
                        }
                    ]
                }}
                navbarOptions={{
                    menuList: [
                        {
                            onClick: () => alert("olá navbar"),
                            icon: <GiFrance />,
                            text: "exemplo item"
                        }
                    ]
                }}
            >
                <>
                    olá mundo
                </>
            </Menu>
        </>
    );
}

export default App;

API

PRINCIPAIS

Parámetro	Tipo	Descrição
`typeMenu`	`"only-sidebar" ou "only-navbar" ou "side-navbar"`	Tipo de exibição, pretendendo ocultar o navbar ou o sidebar ou até mesmo exibir os dois.
`sidebarStyle`	`React.CSSProperties`	Pacote de estilos css para estilizar o sidebar.
`navbarStyle`	`React.CSSProperties`	Pacote de estilos css para estilizar o navbar.
`logo`	`string ou undefined`	Exibição da logo.
`children`	`JSX.Element`	Insere todo o contexto de uma página aqui.
`wrapperStyle`	`React.CSSProperties`	Pacote de estilos css para estilizar o container externo, fora do side e navbar. Você pode mudar a cor de fundo da página utilizando ela por exemplo.
`contextMainStyle`	`CSSProperties`	Pacote de estilos css para você estilizar o `contextMain` (onde se inicia todo o contexto da página)

SIDEBAR

O objeto sidebarOptions você pode incluir propriedades de alguns estilos e definições em geral em relação ao sidebar, são eles:

menuList

Crie uma lista de menus do sidebar aqui, recebendo dentro do menuList um array de objetos, onde podem receber cada objeto:

Parâmetro	Tipo	Descrição
`text`	`string?`	Texto do menuItem.
`icon`	`JSX.Element?`	Icone do menuItem.
`active`	`boolean?`	Se o o menuItem está como ativo, simulando um :active em um css por exemplo.
`onClick`	`() => any`	Função de click do menuItem.
`isBottom`	`boolean?`	Defina se esse menuItem ficará embaixo no contexto do sidebar.
`marginBottom`	`string`	Defina a margem do bottom do `menuItem/roupText`.
`marginTop`	`string`	Defina a margem do top do `menuItem/roupText`.
`textGroup`	`boolean`	Defina o tipo do texto como um texto de grupo, tornando não clicável e servindo como apenas um indicativo.

menuItemStyle

Defina uma estilizção customizada dos menuItems. Suas propriedades são:

Parâmetro	Tipo	Descrição
`color`	`string`	definição da cor do menuItem
`background`	`string`	definição da cor de fundo do menuItem
`backgroundLine`	`string`	definição da cor da linha do menuItem (isso só é visível se o `menuItemHoverType` estiver como `line-left`)
`hoverColor`	`string`	definição da cor do menuItem quando estiver no modo hover.
`hoverBackground`	`string`	definição da cor de fundo do menuItem quando estiver no modo hover.
`hoverBackgroundLine`	`string`	definição da cor da linha do menuItem quando estiver no modo hover.
`activeColor`	`string`	definição de cor do menuItem se o active estiver `true`
`activeBackground`	`string`	definição de cor de fundo do menuItem se o active estiver `true`
`activeBackgroundLine`	`string`	definição de cor da linha do menuItem se o active estiver `true`

|groupTextColor| string | Defina a cor dos textGroup. |

outros

Parâmetro	Tipo	Descrição
`menuItemHoverType`	`"default" ou "line-left"`	Define o tipo de menuItem
`headerComponent`	`(toggle: () => any, isMinificated: boolean, isMobile: boolean) => JSX.Element`	Você pode definir livremente o cabeçalho do sidebar e ainda utilizar as propriedades de minificação do sidebar dentro dos parâmentros. O primeiro parâmetro é uma função de toggle do sidebar e o segundo um `boolean` mostrando o estado atual, o terceiro é um booleano mostrando o estado da tela, se está em mobile ou não.
`headerStyle`	`React.CSSProperties`	estilização do cabeçalho do sidebar.
`isMinificated`	`boolean`	Exibir/não exibir o botão de minimizar o sidebar
`minifacetButtonColor`	`string`	Definir cor do botão de exibir/não exibir o sidebar
`bottomComponent`	`(isMinifated: boolean) => JSX.Element`	Definir um componente livre embaixo do sidebar.

NAVBAR

Um objeto navbarOptions você pode incluir propriedades de alguns estilos e definições em geral em relação ao navbar, são eles:

Parâmetros	Tipos	Descrição
`isMinificated`	`boolean`	Exibir/Não exibir o botão de minificar o sidebar, mas só será possível se o typeMenu estiver em `side-navbar`.
`minificatedColor`	`string`	Definir cor do botão de exibir/não exibir o sidebar.
`minificatedComponent`	`(toggle: () => any, isMinificated: boolean ) => JSX.Element`	Você pode optar em criar o seu próprio componente onde em algum lugar possa ter as mesmas funções ou reações que o botão de minificação padrão.
`menuList`	`menuListType[]`	Defina os menuItens em seu navbar, são essas propriedades para cada menu: `text?` : Texto do menu item. `icon?` : Icone do menuItem. `active?` : Se o menuItem estiver em modo de estilização ativo. `onClick` : Função de click do menuItem para a ação.

Mobile

Parâmetro	Tipo	Descrição
`mobileType`	`"Default" ou "Float"`	Tipo do botão de menu no modo mobile.
`mobileToggleIcon`	`JSX.Element`	Icone do botão de menu do mobile.
`mobileToggleBackground`	`string`	Cor de fundo do menu, o padrão é `#fff`