Lists

<ListItem>
    <ListItemContent>
        <ListItemTitle>Single-line item</ListItemTitle>
    </ListItemContent>
</ListItem>
<ListItem>
    <ListItemContent>
        <ListItemTitle>Two-line item</ListItemTitle>
        <ListItemSubTitle>Secondary text</ListItemSubTitle>
    </ListItemContent>
</ListItem>
<ListItem>
    <ListItemContent>
        <ListItemTitle>Three-line item</ListItemTitle>
        <ListItemSubTitle>Secondary line text Lorem ipsum dolor sit amet,</ListItemSubTitle>
        <ListItemSubTitle>consectetur adipiscing elit.</ListItemSubTitle>
    </ListItemContent>
</ListItem>

<?php

namespace Components\Views\Lists;

use Viewi\BaseComponent;

class ExampleList extends BaseComponent
{
    public bool $dense = false;
    public bool $disabled = false;
    public bool $flat = false;
    public bool $rounded = false;
    public bool $shaped = false;

    public int $selectedItem = 1;
    public array $items = [
        ['text' => 'Real-Time', 'icon' => 'mdi-clock'],
        ['text' => 'Audience', 'icon' => 'mdi-account'],
        ['text' => 'Conversions', 'icon' => 'mdi-flag']
    ];
}

<ListContainer dense="$dense" disabled="$disabled" flat="$flat" rounded="$rounded" shaped="$shaped">
    <SubHeader>REPORTS</SubHeader>
    <ListItemGroup color="primary">
        <ListItem foreach="$items as $i => $item" link="true" active="{$i === $selectedItem}"
            (click)="$selectedItem = $i">
            <ListIcon>
                <Icon name="{$item['icon']}" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>{$item['text']}</ListItemTitle>
            </ListItemContent>
        </ListItem>
    </ListItemGroup>
</ListContainer>

<?php

namespace Components\Views\Lists;

use Viewi\BaseComponent;

class NavList extends BaseComponent
{
    public int $selectedItemNav = 0;

    public array $itemsNav = [
        ['text' => 'My Files', 'icon' => 'mdi-folder'],
        ['text' => 'Shared with me', 'icon' => 'mdi-account-multiple'],
        ['text' => 'Starred', 'icon' => 'mdi-star'],
        ['text' => 'Recent', 'icon' => 'mdi-history'],
        ['text' => 'Offline', 'icon' => 'mdi-check-circle'],
        ['text' => 'Uploads', 'icon' => 'mdi-upload'],
        ['text' => 'Backups', 'icon' => 'mdi-cloud-upload']
    ];
}

<ListContainer>
    <ListItem>
        <ListItemAvatar>
            <Image src="/images/miki_d.jpg"></Image>
        </ListItemAvatar>
    </ListItem>
    <ListItem link="true">
        <ListItemContent>
            <ListItemTitle class="text-h6">Miki the Cat</ListItemTitle>
            <ListItemSubTitle>miki@viewi.net</ListItemSubTitle>
        </ListItemContent>
        <ListIcon>
            <Icon name="mdi-menu-down" />
        </ListIcon>
    </ListItem>
</ListContainer>
<Divider></Divider>
<ListContainer dense="true" nav="true">
    <ListItemGroup color="primary">
        <ListItem foreach="$itemsNav as $i => $item" link="true" active="{$i === $selectedItemNav}"
            (click)="$selectedItemNav = $i">
            <ListIcon>
                <Icon name="{$item['icon']}" />
            </ListIcon>
            <ListItemContent>
                <ListItemTitle>{$item['text']}</ListItemTitle>
            </ListItemContent>
        </ListItem>
    </ListItemGroup>
</ListContainer>