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

1. Ambiente de desenvolvimento
2. Build do componente
3. Requerimentos
4. Instalação
5. Utilização
6. Entradas (@Inputs)
7. Licença

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

• Angular Material
• Configuração de Roteamento e Navegação
• cc-material-themes

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|

Licença

GPL-3.0