47 lines
750 B
Vue
47 lines
750 B
Vue
<template>
|
|
<nav class="nav-sidebar">
|
|
<div
|
|
v-if="$slots.logo"
|
|
class="nav-sidebar__logo"
|
|
>
|
|
<slot name="logo" />
|
|
</div>
|
|
<div class="nav-sidebar__content">
|
|
<slot />
|
|
</div>
|
|
<div class="nav-sidebar__bottom">
|
|
<slot name="bottom" />
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.nav-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
background: #{$clr-black};
|
|
color: #{$clr-white};
|
|
padding: 32px 27px 32px 27px;
|
|
|
|
width: 120px;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
overflow: hidden;
|
|
|
|
&__logo {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
gap: 20px;
|
|
margin-inline: -27px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|