toolshed/frontend/src/components/Sidebar.vue

<template>
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content">
            <router-link to="/" class="sidebar-brand">
                <img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed Logo" class="align-middle logo mr-2 h-75">
                <span class="align-middle">Toolshed</span>
            </router-link>
            <ul class="sidebar-nav">
                <li class="sidebar-header">
                    Tools & Components
                </li>
                <li class="sidebar-item">
                    <router-link to="/inventory" class="sidebar-link">
                        <b-icon-archive class="bi-valign-middle"></b-icon-archive>
                        <span class="align-middle">Inventory</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/storage-location" class="sidebar-link">
                        <b-icon-boxes class="bi-valign-middle"></b-icon-boxes>
                        <span class="align-middle">Storage Locations</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/workflows" class="sidebar-link">
                        <b-icon-diagram3 class="bi-valign-middle"></b-icon-diagram3>
                        <span class="align-middle">Workflows</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/friends" class="sidebar-link">
                        <b-icon-people class="bi-valign-middle"></b-icon-people>
                        <span class="align-middle">Friends</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/files" class="sidebar-link">
                        <b-icon-folder class="bi-valign-middle"></b-icon-folder>
                        <span class="align-middle">Files</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/admin" class="sidebar-link">
                        <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                        <span class="align-middle">Admin</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/swatch" class="sidebar-link">
                        <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                        <span class="align-middle">Swatch</span>
                    </router-link>
                </li>
                <li class="sidebar-item">
                    <router-link to="/print" class="sidebar-link">
                        <b-icon-gear class="bi-valign-middle"></b-icon-gear>
                        <span class="align-middle">Print</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script>
import * as BIcons from "bootstrap-icons-vue";

export default {
    name: "Sidebar",
    components: {
        ...BIcons
    },
}
</script>

<style scoped>
.sidebar {
    min-width: 260px;
    max-width: 260px;
    direction: ltr;
}

.sidebar, .sidebar-content {
    transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
    background: #222e3c;
}

.sidebar-content {
    display: flex;
    height: 100vh;
    flex-direction: column;
}


.sidebar {
    min-width: 260px;
    max-width: 260px;
    direction: ltr
}

.sidebar, .sidebar-content {
    transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
    background: #222e3c
}

.sidebar-content {
    display: flex;
    height: 100vh;
    flex-direction: column
}

.sidebar-nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-grow: 1
}

.sidebar-link, a.sidebar-link {
    display: block;
    padding: .625rem 1.625rem;
    font-weight: 400;
    transition: background .1s ease-in-out;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    color: #e9ecef80;
    background: #222e3c;
    border-left: 3px solid transparent;
}

.sidebar-link i, .sidebar-link svg, a.sidebar-link i, a.sidebar-link svg {
    margin-right: .75rem;
    color: rgba(233, 236, 239, .5)
}

.sidebar-item.active .sidebar-link:hover, .sidebar-item.active > .sidebar-link {
    color: #e9ecef;
    background: linear-gradient(90deg, rgba(59, 125, 221, .1), rgba(59, 125, 221, .0875) 50%, transparent);
    border-left-color: #3b7ddd
}

.sidebar-item.active .sidebar-link:hover i, .sidebar-item.active .sidebar-link:hover svg, .sidebar-item.active > .sidebar-link i, .sidebar-item.active > .sidebar-link svg {
    color: #e9ecef
}

.sidebar-dropdown .sidebar-link {
    padding: .625rem 1.5rem .625rem 3.25rem;
    font-weight: 400;
    font-size: 90%;
    border-left: 0;
    color: #adb5bd;
    background: transparent
}

.sidebar-dropdown .sidebar-link:before {
    content: "→";
    display: inline-block;
    position: relative;
    left: -14px;
    transition: all .1s ease;
    transform: translateX(0)
}

.sidebar-dropdown .sidebar-item .sidebar-link:hover {
    font-weight: 400;
    border-left: 0;
    color: #e9ecef;
    background: transparent
}

.sidebar-dropdown .sidebar-item .sidebar-link:hover:hover:before {
    transform: translateX(4px)
}

.sidebar-dropdown .sidebar-item.active .sidebar-link {
    font-weight: 400;
    border-left: 0;
    color: #518be1;
    background: transparent
}

.sidebar [data-toggle=collapse] {
    position: relative
}

.sidebar [data-toggle=collapse]:after {
    content: " ";
    border: solid;
    border-width: 0 .075rem .075rem 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    transition: all .2s ease-out
}

.sidebar [aria-expanded=true]:after, .sidebar [data-toggle=collapse]:not(.collapsed):after {
    transform: rotate(-135deg);
    top: 1.4rem
}

.sidebar-brand {
    font-weight: 600;
    font-size: 1.15rem;
    padding: 1.15rem 1.5rem;
    display: block;
    color: #f8f9fa
}

.sidebar-brand:hover {
    text-decoration: none;
    color: #f8f9fa
}

.sidebar-brand:focus {
    outline: 0
}

.sidebar.collapsed {
    margin-left: -260px
}

@media (min-width: 1px) and (max-width: 991.98px) {
    .sidebar {
        margin-left: -260px
    }

    .sidebar.collapsed {
        margin-left: 0
    }
}

.sidebar-header {
    background: transparent;
    padding: 1.5rem 1.5rem .375rem;
    font-size: .75rem;
    color: #ced4da
}
</style>