diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md
index b8881385..e04101dd 100644
--- a/docs/reference/site-config.md
+++ b/docs/reference/site-config.md
@@ -6,20 +6,6 @@ outline: deep
Site config is where you can define the global settings of the site. App config options define settings that apply to every VitePress site, regardless of what theme it is using. For example, the base directory or the title of the site.
-
+
@@ -56,6 +58,16 @@ const pageName = computed(() =>
width: 100%;
}
+.VPDoc .VPDocOutlineDropdown {
+ display: none;
+}
+
+@media (min-width: 768px) and (max-width: 1280px) {
+ .VPDoc .VPDocOutlineDropdown {
+ display: block;
+ }
+}
+
@media (min-width: 768px) {
.VPDoc {
padding: 48px 32px 128px;
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 701fcb90..6f186be5 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -3,10 +3,11 @@ import { ref, shallowRef } from 'vue'
import { useData } from '../composables/data.js'
import {
getHeaders,
+ resolveTitle,
useActiveAnchor,
type MenuItem
} from '../composables/outline.js'
-import VPDocAsideOutlineItem from './VPDocAsideOutlineItem.vue'
+import VPDocOutlineItem from './VPDocOutlineItem.vue'
import { onContentUpdated } from 'vitepress'
const { frontmatter, theme } = useData()
@@ -23,14 +24,6 @@ const container = ref()
const marker = ref()
useActiveAnchor(container, marker)
-
-function handleClick({ target: el }: Event) {
- const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
- const heading = document.querySelector
(
- decodeURIComponent(id)
- )
- heading?.focus()
-}
@@ -38,21 +31,13 @@ function handleClick({ target: el }: Event) {
-
- {{
- (typeof theme.outline === 'object' &&
- !Array.isArray(theme.outline) &&
- theme.outline.label) ||
- theme.outlineTitle ||
- 'On this page'
- }}
-
+
{{ resolveTitle(theme) }}
Table of Contents for current page
-
+
diff --git a/src/client/theme-default/components/VPDocOutlineDropdown.vue b/src/client/theme-default/components/VPDocOutlineDropdown.vue
new file mode 100644
index 00000000..ec9b4258
--- /dev/null
+++ b/src/client/theme-default/components/VPDocOutlineDropdown.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+ {{ resolveTitle(theme) }}
+
+
+
+
+
+
+
+
+
diff --git a/src/client/theme-default/components/VPDocAsideOutlineItem.vue b/src/client/theme-default/components/VPDocOutlineItem.vue
similarity index 74%
rename from src/client/theme-default/components/VPDocAsideOutlineItem.vue
rename to src/client/theme-default/components/VPDocOutlineItem.vue
index 7e1e6ed0..61e64a5e 100644
--- a/src/client/theme-default/components/VPDocAsideOutlineItem.vue
+++ b/src/client/theme-default/components/VPDocOutlineItem.vue
@@ -3,9 +3,16 @@ import type { MenuItem } from '../composables/outline.js'
defineProps<{
headers: MenuItem[]
- onClick: (e: MouseEvent) => void
root?: boolean
}>()
+
+function onClick({ target: el }: Event) {
+ const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
+ const heading = document.querySelector
(
+ decodeURIComponent(id)
+ )
+ heading?.focus()
+}
@@ -13,7 +20,7 @@ defineProps<{
{{ title }}
-
+
@@ -37,6 +44,7 @@ defineProps<{
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.5s;
+ font-weight: 500;
}
.outline-link:hover,
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 1f829cc2..54e75bf0 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -2,6 +2,7 @@
import { useData } from '../composables/data.js'
import { useSidebar } from '../composables/sidebar.js'
import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
+import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
defineProps<{
open: boolean
@@ -13,10 +14,6 @@ defineEmits<{
const { theme } = useData()
const { hasSidebar } = useSidebar()
-
-function scrollToTop() {
- window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-}
@@ -33,9 +30,7 @@ function scrollToTop() {
-
- {{ theme.returnToTopLabel || 'Return to top' }}
-
+
@@ -91,23 +86,12 @@ function scrollToTop() {
fill: currentColor;
}
-.top-link {
- display: block;
+.VPOutlineDropdown {
padding: 12px 24px 11px;
- line-height: 24px;
- font-size: 12px;
- font-weight: 500;
- color: var(--vp-c-text-2);
- transition: color 0.5s;
-}
-
-.top-link:hover {
- color: var(--vp-c-text-1);
- transition: color 0.25s;
}
@media (min-width: 768px) {
- .top-link {
+ .VPOutlineDropdown {
padding: 12px 32px 11px;
}
}
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
new file mode 100644
index 00000000..d403adce
--- /dev/null
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -0,0 +1,113 @@
+
+
+