vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.63k stars 2.05k forks source link

Add `#sidebar-nav-active-link-after` slot + expose `VPDocAside` #4048

Open mesqueeb opened 2 months ago

mesqueeb commented 2 months ago

Is your feature request related to a problem? Please describe.

In order to win space, I'd love to be able to place the VPDocAside section inside of my sidebar

euminteumni

Describe the solution you'd like

I'm able to achieve this with this custom layout:

<script setup>
import DefaultTheme from 'vitepress/theme'
import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue'

const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #sidebar-nav-after>
      <VPDocAside />
    </template>
  </Layout>
</template>

<style>
div.aside {
    display: none !important;
}
</style>

https://github.com/user-attachments/assets/68de0b4b-def2-4304-995c-fc8a09482138

However, it's even better if we can have it show underneath the active link like so:

nteumntimuei

The exact feature request to achieve this is:

  1. Add #sidebar-nav-active-link-after slot to layout
  2. expose VPDocAside, because currently it's only importable via dist

Describe alternatives you've considered

No response

Additional context

I can make a PR to achieve this if the proposal is accepted

Validations

ghostrider-05 commented 1 month ago

The solution of your request is I think already implemented with the aside: 'left' option (in the frontmatter or theme configuration)

mesqueeb commented 1 month ago

@ghostrider-05 I guess in a way. That would give me this look: image

whereas I am aiming for this look: image

You see how the current aside: 'left' wastes a lot of real estate of the browser window?

ghostrider-05 commented 1 month ago

Oh didn't know that it is seperate from the sidebar. I thought it would the same as in VuePress, that is why I suggested aside. In VuePress it is combined with the sidebar as in your screenshots: https://v2.vuepress.vuejs.org/guide/getting-started.html