Shrinking of a sidebar

[MacZel]

Feature request

What problem does this feature solve?

This feature is especially useful when reading documentation on vertical screen setup,
as it enables to shrink the sidebar, providing more space for page content, leading to better readbility

What does the proposed API look like?

Simply register a new component SidebarToggle.vue in ./vuepress/components
and use it in Sidebar.vue
Sidebar shown preview
Sidebar shown preview

<template>
  <div class="sidebar">
    <NavLinks/>
    <slot name="top"/>
    <ul class="sidebar-links" v-if="items.length">
      <li v-for="(item, i) in items" :key="i">
        <SidebarGroup
          v-if="item.type === 'group'"
          :item="item"
          :first="i === 0"
          :open="i === openGroupIndex"
          :collapsable="item.collapsable"
          @toggle="toggleGroup(i)"
        />
        <SidebarLink v-else :item="item"/>
      </li>
    </ul>
    <slot name="bottom"/>
    <SidebarToggle></SidebarToggle>
  </div>
</template>

Providing a custom label based on selected language:

        locales: {
            '/': {
                label: 'English',
                selectText: 'Language',
                nav: [
                    { text: 'Home', link: '/' },
                    { text: 'Guide', link: '/guide/' }
                ],
                sidebar: utils.getSidebarConfig(),
                toggle: {
                    hideText: 'Hide sidebar',
                    showText: 'Show sidebar'
                }
            },
            '/pl/': {
                label: 'Polski',
                selectText: 'Język',
                nav: [
                    { text: 'Home', link: '/pl/' },
                    { text: 'Przewodnik', link: '/pl/guide/' }
                ],
                sidebar: utils.getSidebarConfig('pl'),
                toggle: {
                    hideText: 'Ukryj panel boczny',
                    showText: 'Pokaż panel boczny'
                }
            }
        },

How should this be implemented in your opinion?

<template>
    <div v-if="!detectMobile() && !isToggleHidden" class="sidebar__toggle">
        <span class="arrow"
            :class="[isSidebarHidden ? 'right' : 'left']"/>
        <span class="sidebar__toggle-label" @click="toggleSidebar">
            {{ isSidebarHidden ? this.$themeLocaleConfig.toggle.showText : this.$themeLocaleConfig.toggle.hideText }}
        </span>
    </div>
</template>

<script>
export default {
  data() {
    return {
        isSidebarHidden: false,
        isToggleHidden: false
    }
  },
  methods: {
      toggleSidebar() {
          let sidebarClassList = document.getElementsByClassName('sidebar')[0].classList
          let pageClassList = document.getElementsByClassName('page')[0].classList

          if (document.body.clientWidth >= 720) {
            if (this.isSidebarHidden) {
                sidebarClassList.remove('shrink')
                pageClassList.remove('widen')
            }
            else {
                sidebarClassList.add('shrink')
                pageClassList.add('widen')
            }
          }
          
          this.isSidebarHidden = !this.isSidebarHidden
      },
      detectMobile() {
          if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)
            ){
                return true;
            }
            else {
                return false;
            }
      }
  },
  beforeMount() {
      document.getElementsByClassName('sidebar')[0].classList.remove('shrink')
  },
  mounted() {
      window.addEventListener('resize', () => {
          let sidebarClassList = document.getElementsByClassName('sidebar')[0].classList
          if (document.body.clientWidth < 720) {
              this.isToggleHidden = true
              sidebarClassList.add('hide')
          }
          else {
              this.isToggleHidden = false
              sidebarClassList.remove('hide')
          }

      })
  }
}
</script>

<style lang="stylus">
@import '../theme/styles/config.styl'

.page
    transition all .25s ease
    &.widen
        padding-left 0

.content
    position relative

.sidebar
    white-space nowrap
    transition all .25s ease
    &.shrink
        transform translateX(-90%)
    &.hide
        transform translateX(-100%)
    &__toggle
        padding-right .25rem
        display inline-block
        position absolute
        right 0
        height 100%
        writing-mode vertical-lr
        text-align center

        &-label
            font-size small
            font-weight 500
            color lighten($textColor, 25%)
            margin-left .25rem
            cursor pointer
</style>

Are you willing to work on this yourself?**

Yes

[ulivz]

Let's move to #640 to continue discussion.