From 2137205bdc24280b00b1573edd1b8dcb153d35b9 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Wed, 26 Apr 2023 15:27:10 +0300
Subject: [PATCH 01/10] fix: sidebar state on initial loading for default
 layout

---
 packages/docs/layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 7112e02d9f..ca22820f7f 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -31,7 +31,7 @@ const cookie = useCookie('vuestic-theme')
 const { applyPreset } = useColors()
 const breakpoints = useBreakpoint()
 
-const isSidebarVisible = ref(!breakpoints.smDown)
+const isSidebarVisible = ref(false)
 
 applyPreset(cookie.value || colorMode.preference)
 
@@ -42,7 +42,7 @@ watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (!newValue && oldValue) {
     isSidebarVisible.value = true
   }
-})
+}, { immediate: true })
 
 const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()

From 6cb5f9a4fa73a66d5d34142cf8b6fa4dfb013ac6 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Wed, 26 Apr 2023 15:28:24 +0300
Subject: [PATCH 02/10] fix: code styling in Header and Sidebar components

---
 packages/docs/components/layout/Header.vue  | 2 +-
 packages/docs/components/layout/Sidebar.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index 1917ffb8b8..87e233de8b 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -9,7 +9,7 @@
         <header-selector
           class="mr-3"
           :minimized="isSidebarVisible"
-          @toggleSidebar="toggleSidebar"
+          @toggle-sidebar="toggleSidebar"
         />
         <NuxtLink
           v-slot="{ navigate, href }"
diff --git a/packages/docs/components/layout/Sidebar.vue b/packages/docs/components/layout/Sidebar.vue
index c6923268e7..31e01e0bf6 100644
--- 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,

From 1088b25bbb1888d9edb9abc7dc2379a735d234fc Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Wed, 26 Apr 2023 15:27:10 +0300
Subject: [PATCH 03/10] fix: sidebar state on initial loading for default
 layout

---
 packages/docs/layouts/default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 7112e02d9f..ca22820f7f 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -31,7 +31,7 @@ const cookie = useCookie('vuestic-theme')
 const { applyPreset } = useColors()
 const breakpoints = useBreakpoint()
 
-const isSidebarVisible = ref(!breakpoints.smDown)
+const isSidebarVisible = ref(false)
 
 applyPreset(cookie.value || colorMode.preference)
 
@@ -42,7 +42,7 @@ watch(() => breakpoints.smDown, (newValue, oldValue) => {
   if (!newValue && oldValue) {
     isSidebarVisible.value = true
   }
-})
+}, { immediate: true })
 
 const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()

From 461b978544fa069ea3a2c3ccaeede76f9322caa7 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Wed, 26 Apr 2023 15:28:24 +0300
Subject: [PATCH 04/10] fix: code styling in Header and Sidebar components

---
 packages/docs/components/layout/Header.vue  | 2 +-
 packages/docs/components/layout/Sidebar.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index 1917ffb8b8..87e233de8b 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -9,7 +9,7 @@
         <header-selector
           class="mr-3"
           :minimized="isSidebarVisible"
-          @toggleSidebar="toggleSidebar"
+          @toggle-sidebar="toggleSidebar"
         />
         <NuxtLink
           v-slot="{ navigate, href }"
diff --git a/packages/docs/components/layout/Sidebar.vue b/packages/docs/components/layout/Sidebar.vue
index c6923268e7..31e01e0bf6 100644
--- 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,

From d76e4b72bcdc45bbda40f0eaa5b9687020072e6e Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Tue, 2 May 2023 09:53:13 +0300
Subject: [PATCH 05/10] temp

---
 .../layout/header/HeaderSelector.vue          | 25 ++++---------------
 packages/docs/layouts/default.vue             | 19 +++++++-------
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/packages/docs/components/layout/header/HeaderSelector.vue b/packages/docs/components/layout/header/HeaderSelector.vue
index 8d0b123637..623f9f2dd3 100644
--- 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
index ca22820f7f..13ebd1f653 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -35,14 +35,9 @@ const isSidebarVisible = ref(false)
 
 applyPreset(cookie.value || colorMode.preference)
 
-watch(() => breakpoints.smDown, (newValue, oldValue) => {
-  if (newValue && !oldValue) {
-    isSidebarVisible.value = false
-  }
-  if (!newValue && oldValue) {
-    isSidebarVisible.value = true
-  }
-}, { immediate: true })
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isSidebarVisible.value = !newValue
+})
 
 const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()
@@ -54,7 +49,13 @@ afterEach(() => {
   }
 })
 
-onMounted(scrollToElement)
+onMounted(() => {
+  scrollToElement()
+
+  if (!breakpoints.smDown) {
+    isSidebarVisible.value = true
+  }
+})
 
 useHead({
   link: [

From 072056369fc21b847a41b65a222b2e7ab9725220 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Tue, 2 May 2023 11:27:40 +0300
Subject: [PATCH 06/10] fix(#3362): hydration node mismatch

---
 packages/docs/components/layout/Header.vue | 18 ++++++++++++++----
 packages/docs/layouts/default.vue          | 10 ++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index c539ba5537..2bb6d4f4c0 100644
--- 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="!isOptionMenuVisible"
           class="header__options"
         >
           <va-button
@@ -56,7 +56,7 @@
 
         <!-- options mobile menu -->
         <va-button
-          v-if="breakpoint.smDown"
+          v-if="isOptionMenuVisible"
           :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'
@@ -156,7 +156,7 @@ import StarsButton from '../landing/StarsButton.vue'
 import { useSharedLanguageSwitcher } from '@/composables/useLanguageSwitcher'
 
 const { t, locale, locales, setLocale } = useSharedLanguageSwitcher()
-const breakpoint = useBreakpoint()
+const breakpoints = useBreakpoint()
 
 const landing = computed(() => ({
   text: t('menu.home'),
@@ -195,6 +195,16 @@ const toggleSidebar = () => {
 const toggleOptions = () => {
   emit('update:isOptionsVisible', !props.isOptionsVisible)
 }
+
+const isOptionMenuVisible = ref(false)
+
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isOptionMenuVisible.value = newValue
+})
+
+onMounted(() => {
+  isOptionMenuVisible.value = breakpoints.smDown
+})
 </script>
 
 <style lang="scss">
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 17f0b163ff..5125b1e0a3 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -50,19 +50,13 @@ const { afterEach } = useRouter()
 const { scrollToElement } = useDocsScroll()
 afterEach(() => {
   scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
   isOptionsVisible.value = false
-
-  if (breakpoints.smDown) {
-    isSidebarVisible.value = false
-  }
 })
 
 onMounted(() => {
   scrollToElement()
-
-  if (!breakpoints.smDown) {
-    isSidebarVisible.value = true
-  }
+  isSidebarVisible.value = !breakpoints.smDown
 })
 
 useHead({

From 953ee515868a6120ddd002e8124fa85ec2969f38 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Tue, 2 May 2023 13:10:56 +0300
Subject: [PATCH 07/10] style(#3362): code styling in Header

---
 packages/docs/components/layout/Header.vue | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index 2bb6d4f4c0..4ab8c87558 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -155,9 +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 breakpoints = useBreakpoint()
 
+const isOptionMenuVisible = ref(false)
+
 const landing = computed(() => ({
   text: t('menu.home'),
   to: `/${locale.value}`,
@@ -175,19 +190,6 @@ 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)
 }
@@ -196,8 +198,6 @@ const toggleOptions = () => {
   emit('update:isOptionsVisible', !props.isOptionsVisible)
 }
 
-const isOptionMenuVisible = ref(false)
-
 watch(() => breakpoints.smDown, (newValue: boolean) => {
   isOptionMenuVisible.value = newValue
 })

From 29e199aa4a08feb14537103d95ef8192e2d3e15e Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Tue, 2 May 2023 13:48:39 +0300
Subject: [PATCH 08/10] fix(#3362): navbar options SSR rendering

---
 packages/docs/components/layout/Header.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index 25ff2d5a50..44e21cc6ac 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -31,7 +31,7 @@
 
       <template #right>
         <div
-          v-if="!isOptionsMenuVisible"
+          v-if="isOptionsListVisible"
           class="header__options"
         >
           <va-button
@@ -172,6 +172,7 @@ const { t, locale, locales, setLocale } = useSharedLanguageSwitcher()
 const breakpoints = useBreakpoint()
 
 const isOptionsMenuVisible = ref(false)
+const isOptionsListVisible = ref(false)
 
 const landing = computed(() => ({
   text: t('menu.home'),
@@ -200,10 +201,12 @@ const toggleOptions = () => {
 
 watch(() => breakpoints.smDown, (newValue: boolean) => {
   isOptionsMenuVisible.value = newValue
+  isOptionsListVisible.value = !newValue
 })
 
 onMounted(() => {
   isOptionsMenuVisible.value = breakpoints.smDown
+  isOptionsListVisible.value = !breakpoints.smDown
 })
 </script>
 

From a5eb68ddf9143d5230593a3ac51e9f1ceb553264 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Tue, 23 May 2023 13:12:37 +0300
Subject: [PATCH 09/10] #3362: fix hydration issue

---
 packages/docs/components/layout/header/HeaderSelector.vue | 2 +-
 packages/docs/layouts/default.vue                         | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/docs/components/layout/header/HeaderSelector.vue b/packages/docs/components/layout/header/HeaderSelector.vue
index 623f9f2dd3..fed7991acc 100644
--- a/packages/docs/components/layout/header/HeaderSelector.vue
+++ b/packages/docs/components/layout/header/HeaderSelector.vue
@@ -39,7 +39,7 @@ export default defineComponent({
   props: {
     minimized: {
       type: Boolean,
-      required: true,
+      default: false,
     },
   },
   emits: ['toggle-sidebar'],
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 5125b1e0a3..30bad84aea 100644
--- a/packages/docs/layouts/default.vue
+++ b/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">
@@ -38,12 +38,14 @@ const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(false)
 const isOptionsVisible = ref(false)
+const isMobileSidebar = ref(false)
 
 applyPreset(cookie.value || 'light')
 
 watch(() => breakpoints.smDown, (newValue: boolean) => {
   isSidebarVisible.value = !newValue
   isOptionsVisible.value = false
+  isMobileSidebar.value = newValue
 })
 
 const { afterEach } = useRouter()
@@ -57,6 +59,7 @@ afterEach(() => {
 onMounted(() => {
   scrollToElement()
   isSidebarVisible.value = !breakpoints.smDown
+  isMobileSidebar.value = breakpoints.smDown
 })
 
 useHead({

From 1aed5e88ca4590c3e8055771d981746d3e370643 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Fri, 26 May 2023 10:11:23 +0300
Subject: [PATCH 10/10] #3362: review suggestions

---
 packages/docs/components/layout/header/HeaderSelector.vue | 2 +-
 packages/docs/layouts/default.vue                         | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/docs/components/layout/header/HeaderSelector.vue b/packages/docs/components/layout/header/HeaderSelector.vue
index fed7991acc..623f9f2dd3 100644
--- a/packages/docs/components/layout/header/HeaderSelector.vue
+++ b/packages/docs/components/layout/header/HeaderSelector.vue
@@ -39,7 +39,7 @@ export default defineComponent({
   props: {
     minimized: {
       type: Boolean,
-      default: false,
+      required: true,
     },
   },
   emits: ['toggle-sidebar'],
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 6f876749a8..19d21d2764 100644
--- 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="isMobileSidebar"
+          :mobile="breakpoints.smDown"
         />
       </aside>
       <main class="docs-layout__main-content">
@@ -39,12 +39,10 @@ const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(false)
 const isOptionsVisible = ref(false)
-const isMobileSidebar = ref(false)
 
 watch(() => breakpoints.smDown, (newValue: boolean) => {
   isSidebarVisible.value = !newValue
   isOptionsVisible.value = false
-  isMobileSidebar.value = newValue
 })
 
 const { afterEach } = useRouter()
@@ -58,7 +56,6 @@ afterEach(() => {
 onMounted(() => {
   scrollToElement()
   isSidebarVisible.value = !breakpoints.smDown
-  isMobileSidebar.value = breakpoints.smDown
 })
 
 useHead({