[#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: [