[#3362] Sidebar on mobile (#3379)

* fix: sidebar state on initial loading for default layout * fix: code styling in Header and Sidebar components * fix: sidebar state on initial loading for default layout * fix: code styling in Header and Sidebar components * temp * fix(#3362): hydration node mismatch * style(#3362): code styling in Header * fix(#3362): navbar options SSR rendering * #3362: fix hydration issue * #3362: review suggestions
epicmaxco · May 26, 2023 · 8a8658f · 8a8658f
1 parent f2ac864
commit 8a8658f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 55 deletions.
diff --git a/packages/docs/components/layout/Header.vue b/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">

diff --git a/packages/docs/components/layout/Sidebar.vue b/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,

diff --git a/packages/docs/components/layout/header/HeaderSelector.vue b/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"
   >
@@ -42,15 +42,14 @@ export default defineComponent({
       required: true,
     },
   },
+  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>
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -17,7 +17,7 @@
       <aside class="docs-layout__sidebar">
         <LayoutSidebar
           v-model:visible="isSidebarVisible"
-          :mobile="breakpoints.sm"
+          :mobile="breakpoints.smDown"
         />
       </aside>
       <main class="docs-layout__main-content">
@@ -37,31 +37,26 @@ import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
 const { currentPresetName } = useColors()
 const breakpoints = useBreakpoint()
 
-const isSidebarVisible = ref(!breakpoints.smDown)
+const isSidebarVisible = ref(false)
 const isOptionsVisible = ref(false)
 
-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
 })
 
 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
+})
 
 useHead({
   link: [