ブログフレームワークの作成-svelte&materialui

<TopAppBar variant="static">
    <Row>
        <Section>
            <IconButton class="material-icons blog-header-menu" on:click={ onClick }>menu</IconButton>
            <Title>DJ's Blog Header</Title>
        </Section>
        <Section align="end" toolbar>
            <IconButton href="https://github.com/crazydj2/blog-frontend" target="_blank"><Github /></IconButton>
        </Section>
    </Row>
</TopAppBar>

<script>
    import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
    import IconButton from '@smui/icon-button';
    import Github from "svelte-material-icons/Github.svelte";

    const onClick = () => {
        alert('click......');
    };
</script>

<style>
    :global(.blog-header-menu) {
        display: none;
    }

    @media (max-width: 480px) {
        :global(.blog-header-menu) {
            display: flex;
        }
    }
</style>

<div class="blog-drawer-container">
    <Aside bind:open={open}></Aside>

    <AppContent class="app-content">
        <main class="main-content">
            <Router {routes} />
        </main>
    </AppContent>
</div>

<script>
    import Router from 'svelte-spa-router';
    import routes from '../routes/routes';

    import { AppContent } from '@smui/drawer';

    import Aside from './main/Aside.svelte';

    let open = false;
</script>

<style>
    /* These classes are only needed because the
    drawer is in a container on the page. */
    .blog-drawer-container {
        position: relative;
        display: flex;
        height: 100%;
        overflow: hidden;
        z-index: 0;
    }

    :global(.app-content) {
        flex: auto;
        overflow: auto;
        position: relative;
        flex-grow: 1;
    }

    .main-content {
        overflow: auto;
        padding: 16px;
        height: 100%;
        box-sizing: border-box;
    }
</style>

<!-- Don't include fixed={false} if this is a page wide drawer.
    It adds a style for absolute positioning. -->
<Drawer variant="static" fixed={false} bind:open>
    <Header>
        <Title>Super Mail</Title>
        <Subtitle>It's the best fake mail app drawer.</Subtitle>
    </Header>
    <Content>
        <List>
            <Item href="javascript:void(0)" on:click={() => setActive('keyboard_arrow_right')} activated={active === 'keyboard_arrow_right'} >
                <Graphic class="material-icons" aria-hidden="true">keyboard_arrow_right</Graphic>
                <Text>keyboard_arrow_right</Text>
            </Item>
            <Separator />
            <Item href="javascript:void(0)" on:click={() => setActive('keyboard_arrow_down')} activated={active === 'keyboard_arrow_down'} >
                <Graphic class="material-icons" aria-hidden="true">keyboard_arrow_down</Graphic>
                <Text>keyboard_arrow_down</Text>
            </Item>
            <Separator />
        </List>
    </Content>
</Drawer>

<!-- Don't include fixed={false} if this is a page wide drawer.
    It adds a style for absolute positioning. -->
<Scrim fixed={false} />

<script>
    import Drawer, { Content, Header, Title, Subtitle, Scrim } from '@smui/drawer';
    import List, { Item, Text, Graphic, Separator } from '@smui/list';

    export let open;

    let active = 'keyboard_arrow_right';

    const setActive = value => {
        active = value;
        open = false;
    };
</script>