{{-- <div class="app" style="display: flex; height: 100%; position: absolute;">
    <div class="sidebar bg-secondary text-white" id="sidebar-showcase" role="cdb-sidebar">
        <div class="sidebar-container">
            <div class="sidebar-header text-center">
                <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
                <a class="sidebar-brand">Contrast</a>
            </div>

            <div class="sidebar-nav">
                <div class="sidenav">
                    <a class="sidebar-item">
                        <i class="fa fa-th-large sidebar-icon"></i>
                        <span>Dashboard</span>
                    </a>
                    <a class="sidebar-item">
                        <i class="fa fa-sticky-note sidebar-icon"></i>
                        <span>Components</span>
                    </a>
                </div>

                <div class="sidenav">
                    <div class="sidebar-dropdown">
                        <div class="sidebar-item" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <i class="fa fa-th sidebar-icon"></i>
                            <span>Sidemenu</span>
                            <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                        </div>
                        <div class="sidebar-sub-menu collapse bg-dark" id="collapseOne">
                            <a class="sub-menu-item">Submenu 1</a>
                            <a class="sub-menu-item">Submenu 2</a>
                            <a class="sub-menu-item">Submenu 3</a>
                        </div>
                    </div>
                    <div class="sidebar-dropdown">
                        <div class="sidebar-item" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <i class="fa fa-book sidebar-icon"></i>
                            <span>Sidemenu 2</span>
                            <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                        </div>
                        <div class="sidebar-sub-menu collapse bg-dark" id="collapseTwo">
                            <a class="sub-menu-item">Submenu 1</a>
                            <a class="sub-menu-item">Submenu 2</a>
                            <a class="sub-menu-item">Submenu 3</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sidebar-footer">Sidebar Footer</div>
        </div>
    </div>
</div>
 --}}

<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0" style="background-color: #31373a; box-shadow: 2px 0px 10px gray">
    <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
        <a href="/" class="d-flex align-items-center mb-md-0 me-md-auto text-white text-decoration-none">
           <span class="fs-5 d-none d-sm-inline text-secondary"> <i class="fa-regular fa-hospital"></i> Docs</span>
        </a>
        <hr class="w-100">
        <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start w-100" id="menu">
            <li class="nav-item w-100 mb-2">
                <a href="{{ route('session-notes.daily-notes') }}" class="btn btn-secondary align-middle w-100">
                    <span class="d-sm-inline text-light">Daily Notes <span class="badge text-bg-dark"></span></span>
                </a>
            </li>
            <li class="nav-item w-100 mb-2">
                <a href="{{ route('session-notes.initial-evaluation') }}" class="btn btn-secondary align-middle w-100">
                    <span class="d-sm-inline text-light">Initial Evaluation</span>
                </a>
            </li>
            <li class="nav-item w-100 mb-2">
                <a href="{{ route('session-notes.in-progress') }}" class="btn btn-secondary align-middle w-100">
                    <span class="d-sm-inline text-light">Progress Notes</span>
                </a>
            </li>
            <li class="nav-item w-100 mb-2">
                <a href="{{ route('session-notes.reassessment') }}" class="btn btn-secondary align-middle w-100">
                    <span class="d-sm-inline text-light">Re-Assessments</span>
                </a>
            </li>
            <li class="nav-item w-100 mb-2">
                <a href="{{ route('session-notes.discharged') }}" class="btn btn-secondary align-middle w-100">
                    <span class="d-sm-inline text-light">Discharges</span>
                </a>
            </li>
            {{-- <li>
                <a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
                    <i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
                <ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
                    <li class="w-100">
                        <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1 </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2 </a>
                    </li>
                </ul>
            </li> --}}
        </ul>
        <hr>
        {{-- <div class="dropdown pb-4">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
                <span class="d-none d-sm-inline mx-1">loser</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                <li><a class="dropdown-item" href="#">New project...</a></li>
                <li><a class="dropdown-item" href="#">Settings</a></li>
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Sign out</a></li>
            </ul>
        </div> --}}
    </div>
</div>