和侧边栏样式

VPNavBarTitle.vue

<template>
  <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">  
  <div class="VPNavBarTitle" > 
    <a
      class="title"
      :href="link ?? normalizeLink(currentLang.link)"
      :rel
      :target
    >
      <slot name="nav-bar-title-before" />
      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
      <span v-if="theme.siteTitle" v-html="theme.siteTitle"></span>
      <span v-else-if="theme.siteTitle === undefined">{{ site.title }}</span>
      <slot name="nav-bar-title-after" />
    </a>
  </div>
</template>

VPNavBar.vue

watchPostEffect(() => {
  classes.value = {
    'has-sidebar': hasSidebar.value, 
    'home': isHome.value,
    'top': y.value === 0,
    'screen-open': props.isScreenOpen
  }
})

VPSidebar.vue

.VPSidebar {
  position: fixed;
  top: var(--vp-layout-top-height, 0px);
  bottom: 0;
  left: 0;
  z-index: var(--vp-z-index-sidebar);
  padding: 32px 32px 96px;
  width: calc(100vw - 64px);
  max-width: 320px;
  background-color: var(--vp-sidebar-bg-color); 
  opacity: 0;
  box-shadow: var(--vp-c-shadow-3);
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.25s ease;
  overscroll-behavior: contain;
}

@media (min-width: 960px) {
  .VPSidebar {
    padding-top: var(--vp-nav-height); 
    margin-top: var(--vp-nav-height); 
    width: var(--vp-sidebar-width);
    max-width: 100%;
    background-color: var(--vp-sidebar-bg-color); 
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: translateX(0);
  }
}

@media (min-width: 960px) {
  .curtain {
    position: sticky;
    top: -64px;
    left: 0;
    z-index: 1;
    margin-top: calc(var(--vp-nav-height) * -1);
    margin-right: -32px;
    margin-left: -32px;
    height: var(--vp-nav-height);
    background-color: var(--vp-sidebar-bg-color); 
  }
}