message: docs(styles): Fix responsive styles
diff: <script setup lang="ts">
  import FooterList from './FooterList.vue'
  -import { useData } from 'vitepress'
  +import { useData, useRoute } from 'vitepress'
  import { useWindowSize } from '@vueuse/core'
  import { computed } from 'vue'
  -const { theme } = useData()
  +const route = useRoute()
  +const { theme, frontmatter } = useData()
  +
  +function ensureStartingSlash(path: any) {
  + return /^\//.test(path) ? path : `/${path}`
  +}
  +function getSidebar(sidebar: any, path: any) {
  + if (Array.isArray(sidebar)) {
  + return sidebar
  + }
  + if (sidebar == null) {
  + return []
  + }
  + path = ensureStartingSlash(path)
  + const dir = Object.keys(sidebar)
  + .sort((a, b) => {
  + return b.split('/').length - a.split('/').length
  + })
  + .find((dir) => {
  + // make sure the multi sidebar key starts with slash too
  + return path.startsWith(ensureStartingSlash(dir))
  + })
  + return dir ? sidebar[dir] : []
  +}
  +
  +const sidebar = computed(() => {
  + const sidebarConfig = theme.value.sidebar
  + const relativePath = route.data.relativePath
  + return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
  +})
  +const hasSidebar = computed(() => {
  + return (
  + frontmatter.value.sidebar !== false && sidebar.value.length > 0 && frontmatter.value.layout !== 'home'
  + )
  +})
  // Adjust width based on sidebar
  const { width } = useWindowSize()
  @@ -33,8 +67,14 @@ const ecosystemList = [
  </script>
  <template>
  - <footer class="feathers-footer bg-neutral text-neutral-content" :class="{ 'sidebar-open': addLeftMargin }">
  - <div class="max-w-6xl w-full mx-auto pt-16 px-4">
  + <footer
  + class="VPContent has-sidebar feathers-footer bg-neutral text-neutral-content"
  + :class="{
  + 'has-sidebar': hasSidebar,
  + 'is-home': frontmatter.layout === 'home'
  + }"
  + >
  + <div class="max-w-6xl w-full mx-auto px-4">
  <div class="sidebar-adjust">
  <div class="title flex flex-row items-center ml-2">
  <img class="logo invert mr-2" src="/logo.svg" />
  @@ -58,9 +98,29 @@ const ecosystemList = [
  </footer>
  </template>
  -<style>
  +<style scoped>
  /* Only indent the footer on pages other than home-page */
  +/* @media (min-width: 800px) {
  #app:not(.home-page) .feathers-footer.sidebar-open .sidebar-adjust {
  margin-left: 272px;
  }
  +} */
  +
  +@media (min-width: 960px) {
  + .VPContent {
  + padding-top: var(--vp-nav-height);
  + }
  +
  + .VPContent.has-sidebar {
  + margin: var(--vp-layout-top-height, 0px) 0 0;
  + padding-left: var(--vp-sidebar-width);
  + }
  +}
  +
  +@media (min-width: 1440px) {
  + .VPContent.has-sidebar {
  + padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
  + padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
  + }
  +}
  </style>
  