Telas

Todas as telas do sistema devem ser envolvidas no componente MainTemplate, responsável por auto-renderizar o sidebar, header e content. O MainTemplate é o layout-base do sistema, responsável por garantir conscistência visual entre todas as telas.

import React from "react";
import {
  ContentContainer,
  DrawerContainer,
  HeaderContainer,
  MainContainer,
  ContentWrapper,
} from "./styles";
import { Header } from "./Header";
import { Content } from "./Content";
import { useDrawer } from "../../contexts/DrawerContext";

import SidebarV2 from "./SidebarV2";

interface MainTemplateProps {
  children: React.ReactNode;
}

export const MainTemplate: React.FC<MainTemplateProps> = ({ children }) => {
  const { isOpen } = useDrawer();

  return (
    <MainContainer>
      <DrawerContainer>
        <SidebarV2 />
      </DrawerContainer>
      <ContentWrapper isDrawerOpen={isOpen}>
        <HeaderContainer>
          <Header />
        </HeaderContainer>
        <ContentContainer>
          <Content isOpen={false}>{children}</Content>
        </ContentContainer>
      </ContentWrapper>
    </MainContainer>
  );
};

### Props
| Propriedade  | Tipo            | Descrição                  |
|--------------|-----------------|----------------------------|
| children     | React.ReactNode | Conteúdo a ser renderizado |

Exemplo de criação de nova tela.

import { MainTemplate } from "../../components/AppLayout";

export const Component = () => {
	return (
		<MainTemplate>
			<MainContainer>
				...
			</MainContainer>
		</MainTemplate>
	)
}

Boas Práticas

1. Mantenha a tela responsável apenas pela lógica interna dela

A página só controla

• Estado específico dela
• Chamadas API dentro do contexto da tela
• Renderização dos componentes visuais

Não deve controlar

• Conter estruturas de layout global
• Lógica pesada
• Funções gigantes sem separação