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 |