113 lines
2.1 KiB
Vue
113 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import VPNavbarItems from '@theme/VPNavbarItems.vue'
|
|
import VPSidebarItems from '@theme/VPSidebarItems.vue'
|
|
|
|
defineSlots<{
|
|
top?: (props: Record<never, never>) => any
|
|
bottom?: (props: Record<never, never>) => any
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="vp-sidebar">
|
|
<VPNavbarItems />
|
|
<slot name="top" />
|
|
<VPSidebarItems />
|
|
<slot name="bottom" />
|
|
</aside>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../styles/variables';
|
|
|
|
.vp-sidebar {
|
|
position: fixed;
|
|
|
|
// leave space for navbar
|
|
top: var(--navbar-height);
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
|
|
overflow-y: auto;
|
|
|
|
box-sizing: border-box;
|
|
width: var(--sidebar-width);
|
|
margin: 0;
|
|
border-right: 1px solid var(--c-border);
|
|
|
|
background-color: var(--c-bg-sidebar);
|
|
|
|
font-size: 16px;
|
|
|
|
transition:
|
|
transform var(--t-transform),
|
|
background-color var(--t-color),
|
|
border-color var(--t-color);
|
|
|
|
scrollbar-color: var(--c-brand) var(--c-border);
|
|
scrollbar-width: thin;
|
|
|
|
// narrow desktop / iPad
|
|
@media (max-width: $MQNarrow) {
|
|
width: var(--sidebar-width-mobile);
|
|
font-size: 15px;
|
|
}
|
|
|
|
// wide mobile
|
|
@media (max-width: $MQMobile) {
|
|
top: 0;
|
|
|
|
// leave space for navbar
|
|
padding-top: var(--navbar-height);
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 7px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: var(--c-border);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: var(--c-brand);
|
|
}
|
|
|
|
// override styles
|
|
.vp-navbar-items {
|
|
display: none;
|
|
padding: 0.5rem 0 0.75rem;
|
|
border-bottom: 1px solid var(--c-border);
|
|
transition: border-color var(--t-color);
|
|
|
|
@media (max-width: $MQMobile) {
|
|
display: block;
|
|
|
|
.vp-navbar-dropdown-item a.route-link-active::after {
|
|
top: calc(1rem - 2px);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
// override styles
|
|
.vp-navbar-item {
|
|
display: block;
|
|
padding: 0.5rem 0 0.5rem 1.5rem;
|
|
font-size: 1.1em;
|
|
line-height: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|