Navigation Drawers

<Sheet elevation="2" class="relative-container">
    <Toolbar color="info">
        <Btn icon="true" dark="true" (click)="$drawer = !$drawer">
            <Icon name="mdi-menu" dark="true" />
        </Btn>
        <ToolbarTitle>My files</ToolbarTitle>
        <Spacer></Spacer>
        <Btn icon="true" dark="true">
            <Icon name="mdi-magnify" dark="true" />
        </Btn>
        <Btn icon="true" dark="true">
            <Icon name="mdi-filter" dark="true" />
        </Btn>
        <Btn icon="true" dark="true">
            <Icon name="mdi-dots-vertical" dark="true" />
        </Btn>
    </Toolbar>

    <NavigationDrawer absolute="true" temporary="true" model="$drawer">
        <ListContainer dense="true" nav="true">
            <ListItem link="true" (click)="$drawer = false">
                <ListItemContent>
                    <ListItemTitle>Foo</ListItemTitle>
                </ListItemContent>
            </ListItem>
            <ListItem link="true" (click)="$drawer = false">
                <ListItemContent>
                    <ListItemTitle>Bar</ListItemTitle>
                </ListItemContent>
            </ListItem>
            <ListItem link="true" (click)="$drawer = false">
                <ListItemContent>
                    <ListItemTitle>Fizz</ListItemTitle>
                </ListItemContent>
            </ListItem>
            <ListItem link="true" (click)="$drawer = false">
                <ListItemContent>
                    <ListItemTitle>Buzz</ListItemTitle>
                </ListItemContent>
            </ListItem>
        </ListContainer>
    </NavigationDrawer>
    <div style="height: 400px;">
        Model value binding: {$drawer ? 'open' : 'closed'}
    </div>
</Sheet>

<NavigationDrawer permanent="true" miniVariant="$mini" (mini-update)="onMiniUpdate($event)">
    <Btn icon="true" (click)="$mini = !$mini" class="ml-3 mt-2">
        <Icon name="{$mini ? 'mdi-chevron-right' : 'mdi-chevron-left'}" />
    </Btn>
    <ListContainer dense="true" nav="true">
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-folder" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Foo</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-account-multiple" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Bar</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-star" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Fizz</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-history" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Buzz</ListItemTitle>
            </ListItemContent>
        </ListItem>
    </ListContainer>
</NavigationDrawer>

<NavigationDrawer permanent="true" floating="true">
    <ListContainer dense="true" nav="true">
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-folder" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Foo</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-account-multiple" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Bar</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-star" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Fizz</ListItemTitle>
            </ListItemContent>
        </ListItem>
        <ListItem link="true">
            <ListIcon>
                <Icon name="mdi-history" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>Buzz</ListItemTitle>
            </ListItemContent>
        </ListItem>
    </ListContainer>
</NavigationDrawer>