<aside class="sidebar pl-0 mb-0">
  <p class="sidebar-header">Workspace</p>
  <ul class="sidebar-list">
    <li class="is-active"><button><Icon icon="akar-icons:copy"></Icon> Files</button></li>
    <li><button><Icon icon="akar-icons:heart"></Icon> Favorites</button></li>
    <li><button><Icon icon="akar-icons:clock"></Icon> Activities</button></li>
  </ul>
  <p class="sidebar-header">Help</p>
  <ul class="sidebar-list">
    <li><button>Help</button></li>
    <li><button>About</button></li>
  </ul>
</aside>


<script lang="ts">
import Icon from "@iconify/svelte";
</script>

<style>
.sidebar {

}
.sidebar-header {
    color: hsl(0, 0%, 48%);
    padding-left: 8px;
}
.sidebar-list {
    /* margin-top: 2px; */
    padding-top: 10px;
    padding-left: 5px;
    margin-bottom: 25px;
}
.sidebar-list li button {
    padding-left: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    border-radius: 2.5px;
    /* margin-top: 4px; */
    width: 100%;
    text-align: left;
}
.sidebar-list li button:hover, .sidebar-list li button.is-active {
    background-color: lightgray;
}
</style>