@govce/cc-navbar NPM

CC-NAVBAR

Módulo que utiliza uma lógica em conjunto com alguns componentes do Angular Material para facilitar a configuração dinâmica de um Toolbar e de um Sidenav com objetivo de padronizar os sistemas organizacionais do Governo do Estado do Ceará.

Índice

Ambiente de desenvolvimento

Para iniciar um ambiente de desenvolvimento, utilize o comando ng serve. Navegue até o endereço http://localhost:4200/. O ambiente será automaticamente atualizado caso algum arquivo do projeto for atualizado enquanto o comando estiver sendo executado.

Build do componente

Utilize o comando ng build cc-navbar para compilar o projeto. A compilação será enviada para a pasta dist/. Use a flag --prod para fazer uma compilação para produção.

Requerimentos

ATENÇÃO! Não realize o passo 4 da instalação do Angular Material.

Instalação

Veja a seguir como instalar este componente:

npm i @govce/cc-navbar --save

Instale o pacote @govce/cc-material-themes e adicione no seu arquivo style.scss:

npm i @govce/cc-material-themes --save

@import "~@govce/cc-material-themes/cc-default/cc-default.scss";

ATENÇÃO! Renomeie o arquivo style.css para style.scss, depois altere todas as referências do style.css no arquivo angular.json para style.scss.

Adicione no seu arquivo app.module.ts:

import { CcNavbarModule } from '@govce/cc-navbar';

@NgModule({
    declarations: [...],
    imports: [
        BrowserModule,
        ...,
        CcNavbarModule
    ]
})
export class AppModule { }

Utilização

Adicione no app.component.html uma entrada.

<lib-cc-navbar [menu]="menu"></lib-cc-navbar>

Adicione no app.component.ts a configuração da entrada.

menu: MenuItem[] = [
    {
      innerHtml: "Menu1",
      routerLink: "/routerlinkMenu1"
    },
    {
      innerHtml: "Menu2",
      routerLink: "/routerlinkMenu2", // O clique nesta opção será ignorado
      children: [
        {
          innerHtml: "Submenu 1",
          routerLink: "/routerlinkMenu2/submenu1",
          children: []
        },
        {
          innerHtml: "Submenu 2",
          routerLink: "/routerlinkMenu2/submenu2",
          roles: ["ROLE"],
          children: []
        }
      ]
    }
]

Entradas (@Inputs)

Entrada	Tipo	Padrão	Descrição
`title`	`string`	`"CC-NAVBAR"`	Título da aplicação que será exibido ao lado do botão do menu.
`menu`	`MenuItem[]`	`[]`	Estruturação do menu, seus itens e subitens.
`user`	`User`	`undefined`	Bind do usuário para ser trabalhado no sidenav, inclusive suas permissões.
`options`	`any`	`undefined`	Opções personalizadas para setar dinâmicamente qualquer configuração deste componente de uma vez.
`logotipo`	`Logotipo`	`logotipo`	Logotipo que ficará exibido no sidenav. Por padrão, o logotipo do Governo do Estado do Ceará é ajustado.
`accountUrl`	`string`	`"/accounts"`	Url que leva o usuário até a rota do seu perfil.
`logoutUrl`	`string`	`"#"`	Url de logout, pode ser utilizada bem com a flag `ignoreDefaultLogoutFunction`.
`logoutFunction`	`Function`	`this.logout`	Função que pode ser personalizada para execução do logout. Por padrão, logout da Casa Civil.
`ignoreDefaultLogoutFunction`	`boolean`	`false`	Utilizado como flag para ignorar a função padrão de logout.
`showBreadcrumb`	`boolean`	`true`	Opção para mostrar ou não o breadcrumb dinâmico abaixo da toolbar