Sidebar Customization

Vamos customizar um pouco do nosso sidebar e começar a mudar a cara do nosso Backstage.

Os códigos da tela inicial do backstage fica em packages/app/src/components/Root.

 ~/backstage/packages/app/src/components/Root  master  
tree  
.
├── LogoFull.tsx # Usado para mudar a logo
├── LogoIcon.tsx # Usado para mudar a logo
├── Root.tsx # Arquivo que nos interessa para mexer nos sidebars
└── index.ts

Começando pela logo, algumas dicas:

• A logo precisar estar em svg.
• Substitua o svg padrão entre as tags <svg></svg>.
• Dependendo do tamanho da sua logo o width e o viewBox. As vezes a logo é mais quadrada e sai do espaço reservado, mas antes utilize o multiplicador do espaço para ela no Root.tsx e depois volte e ajuste a logo.

Exemplo:

const useSidebarLogoStyles = makeStyles({
  root: {
    width: sidebarConfig.drawerWidthClosed,
    // height: 3 * sidebarConfig.logoHeight,  //Esse era o padrão esperando uma logo mais retangular
    height: 6 * sidebarConfig.logoHeight, // Minha logo é mais quadrada precisa de mais espaço
    display: 'flex',
    flexFlow: 'row nowrap',
    alignItems: 'center',
    marginBottom: -14,
  },
  link: {
    width: sidebarConfig.drawerWidthClosed,
    //marginLeft: 24,
    marginLeft: 34,
  },
});

Com poucas mudanças já temos isso.

Agora vamos preencher nossa sidebar. Para isso vamos utilizar o Material UI Icon para colocar icones nas coisas.

Se observar bem verá esse imports usando essas libs no Root.tsx

import React, { PropsWithChildren } from 'react';
import { makeStyles } from '@material-ui/core'; //Esse
import HomeIcon from '@material-ui/icons/Home'; //Esse

Dentro de app, se olhar em packages.json verá que nesse momento estamos usando a versão abaixo.

  "dependencies": {
    ////
    "@material-ui/core": "^4.12.2",
    "@material-ui/icons": "^4.9.1",
    //...
  },

Então quando estiver na página buscando icones, mude para a versão v4. .

Nada impossibilita de utilizar icones de da versão superior mas terá que instalar mais pacotes. Eu particulamente gosto de fazer o mínimo de alteração em ambiente que ainda não consigo trocar a roda andando.

Para fazer isso vamos apernas adicionar esse import e criar uma sidebar extra com um caminho.

Quando vamos registrar um novo repositorio manualmente, iremos para a página http://localhost:3000/catalog-import, vamos criar um sidebar para ir direto e facilitar a vida.

Root.tsx

//...
import CreateIcon from '@material-ui/icons/Create';
//...

// Crie um novo sidebarItem aqui dentro.
// to irá para a página que queremos

export const Root = ({ children }: PropsWithChildren<{}>) => (
        <SidebarItem icon={CreateIcon} to="catalog-import" text="Import..." />
);

E o import esta lá.

Em um segundo momento quando tivermos mais coisas disponíveis iremos preencher o sidebar de acordo com as nossas necessidades.