<div class="sidebar-wrapper">
    <ul class="nav">
        <li class="active">
            <a href="dashboard.html">
                <i class="material-icons">dashboard</i>
                <p>Dashboard</p>
            </a>
        </li>
        <li>
            <a href="user.html">
                <i class="material-icons">person</i>
                <p>User Profile</p>
            </a>
        </li>
        <li>
            <a href="table.html">
                <i class="material-icons">content_paste</i>
                <p>Table List</p>
            </a>
        </li>
        <li>
            <a href="typography.html">
                <i class="material-icons">library_books</i>
                <p>Typography</p>
            </a>
        </li>
        <li>
            <a href="icons.html">
                <i class="material-icons">bubble_chart</i>
                <p>Icons</p>
            </a>
        </li>
        <li>
            <a href="maps.html">
                <i class="material-icons">location_on</i>
                <p>Maps</p>
            </a>
        </li>
        <li>
            <a href="notifications.html">
                <i class="material-icons text-gray">notifications</i>
                <p>Notifications</p>
            </a>
        </li>
        <li class="active-pro">
            <a href="upgrade.html">
                <i class="material-icons">unarchive</i>
                <p>Upgrade to PRO</p>
            </a>
        </li>
    </ul>
</div>