feat(components): various improvements (#610)

nuxt-themes · Aug 1, 2022 · 46a54ca · 46a54ca
1 parent ed92ec5
commit 46a54ca
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/components/docs/DocsAsideTree.vue b/components/docs/DocsAsideTree.vue
@@ -37,7 +37,7 @@ const collapsedMap = useState(`docus-docs-aside-collapse-map-${props.parent?._pa
 })
 
 const isActive = (link) => {
-  return link.exact ? route.path === link._path : route.path.startsWith(link._path)
+  return route.path === link._path
 }
 
 const isCollapsed = (link) => {

diff --git a/components/docs/DocsPrevNext.vue b/components/docs/DocsPrevNext.vue
@@ -19,17 +19,17 @@ const directory = (link) => {
 </script>
 
 <template>
-  <div v-if="prev || next" class="flex items-center justify-between gap-3">
+  <div v-if="prev || next" class="flex flex-col-reverse justify-between gap-3 sm:flex-row sm:items-center">
     <NuxtLink
       v-if="prev"
       :to="prev._path"
       class="hover:border-primary-500 dark:hover:border-primary-500 hover:text-primary-500 u-border-gray-100 relative min-w-0 rounded-lg border p-3"
     >
-      <p v-if="directory(prev._path)" class="u-text-gray-500 mb-1 text-right text-xs font-medium">{{ directory(prev._path) }}</p>
+      <p class="u-text-gray-500 mb-1 h-4 truncate text-right text-xs font-medium">{{ directory(prev._path) }}</p>
 
       <p class="flex items-center gap-3">
         <Icon name="heroicons-outline:arrow-sm-left" class="h-5 w-5 flex-shrink-0" />
-        <span class="truncate text-right font-medium leading-5">{{ prev.title }}</span>
+        <span class="flex-1 truncate text-right font-medium leading-5">{{ prev.title }}</span>
       </p>
     </NuxtLink>
     <span v-else />
@@ -39,10 +39,10 @@ const directory = (link) => {
       :to="next._path"
       class="hover:border-primary-500 dark:hover:border-primary-500 hover:text-primary-500 u-border-gray-100 relative min-w-0 rounded-lg border p-3"
     >
-      <p v-if="directory(next._path)" class="u-text-gray-500 mb-1 text-xs font-medium">{{ directory(next._path) }}</p>
+      <p class="u-text-gray-500 mb-1 h-4 truncate text-xs font-medium">{{ directory(next._path) }}</p>
 
       <p class="flex items-center gap-3">
-        <span class="truncate font-medium leading-5">{{ next.title }}</span>
+        <span class="flex-1 truncate font-medium leading-5">{{ next.title }}</span>
         <Icon name="heroicons-outline:arrow-sm-right" class="h-5 w-5 flex-shrink-0" />
       </p>
     </NuxtLink>