@inkline/inkline/src/components/ISidebar/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<transition :name="sidebarWrapperTransition">
    <aside
        role="complementary"
        class="sidebar-wrapper"
        :class="classes"
        :aria-label="ariaLabel"
        ref="wrapper"
        v-show="open || !collapsible"
    >
        <transition :name="sidebarTransition">
            <div
                class="sidebar"
                v-show="collapsePosition === 'relative' || open || !collapsible"
            >
                <div class="sidebar-content">
                    <slot />
                </div>
            </div>
        </transition>
        <transition name="sidebar-overlay-transition">
            <div
                class="sidebar-overlay"
                @click="onOverlayClick"
                v-if="collapsePosition !== 'relative'"
                v-show="open"
            />
        </transition>
    </aside>
</transition>