docs(styles): Fix responsive styles (#2852)

marshallswain · web-flow · commit 9bf5222c15ab · 2022-11-04T16:29:08.000-07:00
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
@@ -1,10 +1,44 @@
 <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 */
-#app:not(.home-page) .feathers-footer.sidebar-open .sidebar-adjust {
-  margin-left: 272px;
+/* @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>
