using SMUI (svelte material ui), i do not succeed to combine 2 components (a drawer and a top-app-bar) - material-design

Question

I want a standard layout having a top-app-bar (in red in the image), and a drawer (an open-close drawer at the left)
The issue is that the top app bar should be fixed, but the body-component (the one having some forms, just under the top-app-bar) is missing a padding on the top. In the image, there is a textInputField, but we just see the line...So it is not correct.
5 ago, I was kind of also suffuring to try to have theses two components working togezer with material design, without any bug (some low quality demo on the net, never satisfying all the combinations... when we know this pattern is the most used (an open-close drawer, and a top app bar).
I am looking for the 'good' code to implement a layout having a drawer (openable) and a top app bar, I had never understood the correct way to combine them, any help there ? Anyway, the solution to correct this padding error is also interesting me.
there is code (using svelte)
using https://sveltematerialui.com/demo/top-app-bar/
// ###
// ### GLOBAL CSS
// ###
import '../app.css';
// ###
// ### GLOBAL CSS
// ###
import TopAppBar, { Row, Section, Title } from '#smui/top-app-bar'; // AutoAdjust
import IconButton from '#smui/icon-button';
import Drawer, { AppContent, Content, Header, Subtitle } from '#smui/drawer';
import List, { Item, Text } from '#smui/list';
import { onMount } from 'svelte';
import { zoomLevel } from '$stores/S_StoreApp';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
// import LoremIpsum from '$lib/LoremIpsum.svelte';
// import type { TopAppBarComponentDev } from '#smui/top-app-bar';
// let topAppBar: TopAppBarComponentDev;
// import Tab from '#smui/tab'; todo
// import TabBar from '#smui/tab-bar'; todo
// import Button from '#smui/button';
// import type { SnackbarComponentDev } from '#smui/snackbar';
// import Snackbar, { Label } from '#smui/snackbar';
// import Snackbar, { Actions, Label } from '#smui/snackbar';
// import Button from '#smui/button';
// let snackbarWithoutClose: SnackbarComponentDev; todo
// ---
// ---
// ---
const arr = [
'auth',
'contacts-tail',
'contacts-md',
'fps',
'liked',
// 'liked-vs',
'scripts',
'-------------------',
'dashboard--100$',
'dashboard-scrapper',
'profile-detail',
'classic-md',
'classic-tailwind',
'cartes groupée',
'CRM phone',
'MAP',
'CALENDAR',
'devis-facture',
'turisme'
];
// let active = '';
// --- drawer
let drawerActive = '';
let open = false;
// let active = 'Gray Kittens';
// --- page - url
let currentUrl: string = $page.url.pathname;
// ---
$: currentUrl = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1);
// ---
onMount(() => {
// currentUrl = $page.url.pathname;
});
</script>
<!-- ### -->
<!-- ### layout -->
<!-- ### -->
<!-- ### NEST TOPAPP et DRAWER - https:///material-components/material-components-web/tree/master/packages/-drawer -->
<!-- _ -->
<!-- _ -->
<!-- <div class="drawer-container"> -->
<Drawer variant="dismissible" bind:open>
<!-- - -->
<Header>
<Title>Tinax</Title>
<Subtitle> 3.0</Subtitle>
</Header>
<!-- - -->
<Content>
<!-- * -->
<List>
{#each arr as item}
<Item
href="javascript:void(0)"
on:click={() => {
drawerActive = item;
goto(item);
}}
activated={drawerActive === item}
>
<Text>{item}</Text>
</Item>
{/each}
</List>
<!-- * -->
</Content>
<!-- - -->
</Drawer>
<!-- _ -->
<!-- _ -->
<!-- --- DRAWER >> content -->
<AppContent class="app-content">
<!-- - -->
<!-- TOP APP BAR-->
<!-- <TopAppBar bind:this={topAppBar} variant="fixed" dense> -->
<TopAppBar variant="fixed" dense>
<!-- * -->
<Row>
<Section on:click={() => (open = !open)}>
<IconButton class="material-icons">menu</IconButton>
<Title>{currentUrl}</Title>
</Section>
<Section align="end" toolbar>
<IconButton
class="material-icons"
aria-label="Download"
on:click={() => {
zoomLevel.update((n) => n - 1);
}}>zoom_out</IconButton
>
<IconButton
class="material-icons"
aria-label="Download"
on:click={() => {
zoomLevel.update((n) => n + 1);
}}>zoom_in</IconButton
>
</Section>
</Row>
<!-- * -->
</TopAppBar>
<!-- - -->
<!-- TOPAAPBAR >> content -->
<!-- {topAppBar} -->
<!-- <AutoAdjust> -->
<!-- * -->
<!-- todo -->
<!-- <TabBar tabs={arr} let:tab bind:active>
<Tab
{tab}
on:click={() => {
active = tab;
goto(active);
snackbarWithoutClose.open();
}}
>
<Label>{tab}</Label>
</Tab>
</TabBar> -->
<!-- * -->
<!-- ### MAIN -->
<main class="main-content">
<slot />
</main>
<!-- * -->
<!-- !! snackbarWithClose.open() -->
<!-- <Snackbar bind:this={snackbarWithoutClose}>
<Label>The current page is >> {active}</Label>
</Snackbar> -->
<!-- * -->
<!-- </AutoAdjust> -->
<!-- - -->
</AppContent>