[#3362] Sidebar on mobile

packages/docs/components/layout/Header.vue

@@ -31,7 +31,7 @@
 
       <template #right>
         <div
-          v-if="breakpoint.mdUp"
+          v-if="isOptionsListVisible"
           class="header__options"
         >
           <va-button
@@ -56,7 +56,7 @@
 
         <!-- options mobile menu -->
         <va-button
-          v-if="breakpoint.smDown"
+          v-if="isOptionsMenuVisible"
           :aria-label="$t('menu.openOptionsMenu')"
           preset="plain"
           @click="toggleOptions"
@@ -141,7 +141,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useBreakpoint } from 'vuestic-ui'
 
 import LanguageDropdown from './LanguageDropdown.vue'
@@ -155,8 +155,24 @@ import SocialsLinks from '../landing/SocialsLinks.vue'
 import StarsButton from '../landing/StarsButton.vue'
 import { useSharedLanguageSwitcher } from '@/composables/useLanguageSwitcher'
 
+const props = defineProps({
+  isSidebarVisible: {
+    type: Boolean,
+    default: false,
+  },
+  isOptionsVisible: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:isSidebarVisible', 'update:isOptionsVisible'])
+
 const { t, locale, locales, setLocale } = useSharedLanguageSwitcher()
-const breakpoint = useBreakpoint()
+const breakpoints = useBreakpoint()
+
+const isOptionsMenuVisible = ref(false)
+const isOptionsListVisible = ref(false)
 
 const landing = computed(() => ({
   text: t('menu.home'),
@@ -175,26 +191,23 @@ const links = computed(() => [
   },
 ])
 
-const props = defineProps({
-  isSidebarVisible: {
-    type: Boolean,
-    default: false,
-  },
-  isOptionsVisible: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:isSidebarVisible', 'update:isOptionsVisible'])
-
 const toggleSidebar = () => {
   emit('update:isSidebarVisible', !props.isSidebarVisible)
 }
 
 const toggleOptions = () => {
   emit('update:isOptionsVisible', !props.isOptionsVisible)
 }
+
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isOptionsMenuVisible.value = newValue
+  isOptionsListVisible.value = !newValue
+})
+
+onMounted(() => {
+  isOptionsMenuVisible.value = breakpoints.smDown
+  isOptionsListVisible.value = !breakpoints.smDown
+})
 </script>
 
 <style lang="scss">

packages/docs/components/layout/Sidebar.vue

@@ -12,7 +12,7 @@
         v-for="(route, key) in navigationRoutes"
         :key="key"
       >
-        <template #header="{ value, hasKeyboardFocus }">
+        <template #header="{ value: isCollapsed, hasKeyboardFocus }">
           <va-sidebar-item
             class="sidebar__collapse-custom-header"
             :class="{
@@ -21,7 +21,7 @@
             }"
           >
             {{ t(route.displayName) }}
-            <va-icon :name="value ? 'va-arrow-up' : 'va-arrow-down'" />
+            <va-icon :name="isCollapsed ? 'va-arrow-up' : 'va-arrow-down'" />
           </va-sidebar-item>
         </template>
         <div
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, ref, computed, PropType } from 'vue'
+import { defineComponent, watch, ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
@@ -106,6 +106,7 @@ export default defineComponent({
     visible: { type: Boolean, default: false },
     mobile: { type: Boolean, default: false },
   },
+  emits: ['update:visible'],
   setup: (props, { emit }) => {
     const i18n = useI18n()
     const route = useRoute()
@@ -147,7 +148,6 @@ export default defineComponent({
     return {
       ...i18n,
       navigationRoutes: getSortedNavigationRoutes(navigationRoutes),
-      route,
       getColor,
       writableVisible,
       sidebarWidth,

packages/docs/components/layout/header/HeaderSelector.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="header-selector flex-center"
+    class="header-selector"
     role="button"
     tabindex="0"
-    :aria-label="`${minimized ? `expand` : `minimize`} navigation menu`"
+    :aria-label="`${minimized ? 'expand' : 'minimize'} navigation menu`"
     @click="toggleSidebar"
     @keydown.enter="toggleSidebar"
   >
@@ -39,18 +39,17 @@ export default defineComponent({
   props: {
     minimized: {
       type: Boolean,
-      required: true,
+      default: false,
     },
   },
+  emits: ['toggle-sidebar'],
 
   setup (props, { emit }) {
     const { getColors } = useColors()
 
-    const toggleSidebar = () => emit('toggleSidebar', !props.minimized)
-
     return {
       colors: computed(getColors),
-      toggleSidebar,
+      toggleSidebar: () => emit('toggle-sidebar', !props.minimized),
     }
   },
 })
@@ -65,25 +64,11 @@ export default defineComponent({
   width: 1.5rem;
 }
 
-.i-menu-expanded {
-  @extend .i-nav;
-
-  background: url("@/public/layout/menu-collapsed.svg") no-repeat center;
-}
-
-.i-menu-collapsed {
-  @extend .i-nav;
-
-  background: url("@/public/layout/menu-expanded.svg") no-repeat center;
-}
-
 .header-selector {
   cursor: pointer;
-  max-width: 55px;
 
-  &:focus {
+  &:focus-visible {
     @include focus-outline(2px, 2px, 2px);
   }
 }
-
 </style>

packages/docs/layouts/default.vue

@@ -16,7 +16,7 @@
       <aside class="docs-layout__sidebar">
         <LayoutSidebar
           v-model:visible="isSidebarVisible"
-          :mobile="breakpoints.sm"
+          :mobile="isMobileSidebar"
         />
       </aside>
       <main class="docs-layout__main-content">
@@ -36,33 +36,31 @@ const cookie = useCookie('vuestic-theme')
 const { applyPreset } = useColors()
 const breakpoints = useBreakpoint()
 
-const isSidebarVisible = ref(!breakpoints.smDown)
+const isSidebarVisible = ref(false)
 const isOptionsVisible = ref(false)
+const isMobileSidebar = ref(false)
 
 applyPreset(cookie.value || 'light')
 
-watch(() => breakpoints.smDown, (newValue, oldValue) => {
-  if (newValue && !oldValue) {
-    isSidebarVisible.value = false
-  }
-  if (!newValue && oldValue) {
-    isSidebarVisible.value = true
-  }
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isSidebarVisible.value = !newValue
   isOptionsVisible.value = false
+  isMobileSidebar.value = newValue
 })
 
 const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()
 afterEach(() => {
   scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
   isOptionsVisible.value = false
-
-  if (breakpoints.smDown) {
-    isSidebarVisible.value = false
-  }
 })
 
-onMounted(scrollToElement)
+onMounted(() => {
+  scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
+  isMobileSidebar.value = breakpoints.smDown
+})
 
 useHead({
   link: [