使用 SMUI（svelte material ui），我没有成功组合 2 个组件（抽屉和顶部应用栏）

Question

我想要一个标准布局，它有一个顶部应用栏（图中红色部分）和一个抽屉（左边是一个打开关闭的抽屉） 问题是应该修复顶部应用栏，但主体组件（具有某些形式的组件，就在顶部应用栏下方）顶部缺少填充。在图像中，有一个 textInputField，但我们只看到了一行...所以它是不正确的。

5 年前，我还尝试让这两个组件与材料设计一起工作，没有任何错误（网上一些低质量的演示，永远无法满足所有组合......当我们知道这种模式是最常用的（开合抽屉和顶部应用栏）。

我正在寻找“好”代码来实现具有抽屉（可打开）和顶部应用栏的布局，我从来没有理解将它们组合起来的正确方法，有什么帮助吗？无论如何，纠正这个填充错误的解决方案也很有趣。

有代码（使用svelte） 使用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>