{{#> base }}
    {{> AppSidebar/sidebar elements-navigation=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <div class="row">
                <div class="col-md-12">
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">Vertical Menu</h5>
                            <div class="row">
                                <div class="col">
                                    <ul class="nav flex-column">
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Link</a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Link
                                            <div class="ms-auto badge bg-success">New</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Another Link
                                            <div class="ms-auto badge bg-warning">512</div>
                                        </a></li>
                                        <li class="nav-item"><a disabled="" href="javascript:void(0);" class="nav-link disabled">Disabled Link</a></li>
                                    </ul>
                                </div>
                                <div class="col">
                                    <ul class="nav flex-column">
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon lnr-inbox"> </i><span>Inbox</span>
                                            <div class="ms-auto badge rounded-pill bg-secondary">86</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon lnr-book"> </i><span>Book</span>
                                            <div class="ms-auto badge rounded-pill bg-danger">5</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon lnr-picture"> </i><span>Picture</span></a></li>
                                        <li class="nav-item"><a disabled="" href="javascript:void(0);" class="nav-link disabled"><i class="nav-link-icon lnr-file-empty"> </i><span>File Disabled</span></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="divider"></div>
                            <div class="text-center">
                                <div class="btn-group dropdown">
                                    <button type="button" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" class="mb-2 me-2 dropdown-toggle btn btn-primary">Dropdown Basic</button>
                                    <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
                                        <ul class="nav flex-column">
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Link</a></li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Link
                                                <div class="ms-auto badge bg-success">New</div>
                                            </a></li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Another Link
                                                <div class="ms-auto badge bg-warning">512</div>
                                            </a></li>
                                            <li class="nav-item"><a disabled="" href="javascript:void(0);" class="nav-link disabled">Disabled Link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">Separators &amp; Headers</h5>
                            <div class="row">
                                <div class="col">
                                    <ul class="nav flex-column">
                                        <li class="nav-item-header nav-item">Activity</li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Chat
                                            <div class="ms-auto badge rounded-pill bg-info">8</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Recover Password</a></li>
                                        <li class="nav-item-header nav-item">My Account</li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Settings
                                            <div class="ms-auto badge bg-success">New</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Messages
                                            <div class="ms-auto badge bg-warning">512</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Logs</a></li>
                                        <li class="nav-item-divider nav-item"></li>
                                        <li class="nav-item-btn nav-item">
                                            <button class="btn-wide btn-shadow btn btn-danger btn-sm">Cancel</button>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col">
                                    <ul class="nav flex-column">
                                        <li class="nav-item-header nav-item">Activity</li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-chat"> </i><span>Chat</span>
                                            <div class="ms-auto badge rounded-pill bg-info">8</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-wallet"> </i><span>Recover Password</span></a></li>
                                        <li class="nav-item-header nav-item">My Account</li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-config"> </i><span>Settings</span>
                                            <div class="ms-auto badge bg-success">New</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-coffee"> </i><span>Messages</span>
                                            <div class="ms-auto badge bg-warning">512</div>
                                        </a></li>
                                        <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-box2"> </i><span>Logs</span></a></li>
                                        <li class="nav-item-divider nav-item"></li>
                                        <li class="nav-item-btn nav-item">
                                            <button class="btn-pill btn btn-success btn-sm">Save</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="divider"></div>
                            <div class="text-center">
                                <div class="dropdown btn-group">
                                    <button type="button" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" class="mb-2 me-2 dropdown-toggle btn btn-primary">Dropdown Basic</button>
                                    <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
                                        <ul class="nav flex-column">
                                            <li class="nav-item-header nav-item">Activity</li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Chat
                                                <div class="ms-auto badge rounded-pill bg-info">8</div>
                                            </a></li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Recover Password</a></li>
                                            <li class="nav-item-header nav-item">My Account</li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Settings
                                                <div class="ms-auto badge bg-success">New</div>
                                            </a></li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Messages
                                                <div class="ms-auto badge bg-warning">512</div>
                                            </a></li>
                                            <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Logs</a></li>
                                            <li class="nav-item-divider nav-item"></li>
                                            <li class="nav-item-btn nav-item">
                                                <button class="btn-wide btn-shadow btn btn-danger btn-sm">Cancel</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">Horizontal Menu</h5>
                            <ul class="nav"><a href="javascript:void(0);" class="nav-link active">Link</a><a href="javascript:void(0);" class="nav-link">Link</a><a href="javascript:void(0);" class="nav-link">Another Link</a><a disabled=""
                                                                                                                                                                                                                                   href="javascript:void(0);"
                                                                                                                                                                                                                                   class="nav-link disabled">Disabled
                                Link</a></ul>
                            <div class="divider"></div>
                            <div class="nav">
                                <a href="javascript:void(0);" class="nav-link active"><i class="nav-link-icon pe-7s-settings"> </i><span>Link</span></a>
                                <a href="javascript:void(0);" class="nav-link"><i
                                        class="nav-link-icon pe-7s-wallet"> </i><span>Link</span>
                                    <div class="badge rounded-pill bg-danger">12</div>
                                </a>
                                <a href="javascript:void(0);" class="nav-link"><span>Another Link</span></a>
                                <a disabled="" href="javascript:void(0);" class="nav-link disabled"><i
                                        class="nav-link-icon pe-7s-box1"> </i><span>Disabled Link</span></a>
                            </div>
                            <div class="divider"></div>
                            <ul class="nav nav-justified">
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link active"><i class="nav-link-icon pe-7s-settings"> </i><span>Justified</span></a></li>
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-chat"> </i><span>Link</span>
                                    <div class="badge bg-success">NEW</div>
                                </a></li>
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><span>Another Link</span></a></li>
                                <li class="nav-item"><a disabled="" href="javascript:void(0);" class="nav-link disabled"><i class="nav-link-icon pe-7s-box1"> </i><span>Disabled Link</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="main-card mb-3 card">
                        <div class="card-body"><h5 class="card-title">Active Links</h5>
                            <div class="nav nav-pills"><a href="javascript:void(0);" class="nav-link active">Link</a><a href="javascript:void(0);" class="nav-link">Link</a><a href="javascript:void(0);" class="nav-link">Another Link</a><a
                                    disabled="" href="javascript:void(0);" class="nav-link disabled">Disabled Link</a></div>
                            <div class="divider"></div>
                            <div class="nav nav-pills"><a href="javascript:void(0);" class="nav-link active"><i class="nav-link-icon pe-7s-settings"> </i><span>Link</span></a><a href="javascript:void(0);" class="nav-link"><i
                                    class="nav-link-icon pe-7s-wallet"> </i><span>Link</span>
                                <div class="badge rounded-pill bg-danger">12</div>
                            </a><a href="javascript:void(0);" class="nav-link"><span>Another Link</span></a><a disabled="" href="javascript:void(0);" class="nav-link disabled"><i
                                    class="nav-link-icon pe-7s-box1"> </i><span>Disabled Link</span></a></div>
                            <div class="divider"></div>
                            <ul class="nav nav-pills nav-justified">
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link active"><i class="nav-link-icon pe-7s-settings"> </i>Justified</a></li>
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><i class="nav-link-icon pe-7s-chat"> </i>Link
                                    <div class="badge bg-success">NEW</div>
                                </a></li>
                                <li class="nav-item"><a href="javascript:void(0);" class="nav-link">Another Link</a></li>
                                <li class="nav-item"><a disabled="" href="javascript:void(0);" class="nav-link disabled"><i class="nav-link-icon pe-7s-box1"> </i>Disabled Link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}