element-plus/docs/.vitepress/vitepress/components/vp-subnav.vue
qiang a4063fd8d2
docs: accessibility improvement (#11825)
* docs: accessibility improvement for navbar

* docs: accessibility improvement for demo

* refactor: replace ElPopover with ElDropdown

* docs: accessibility improvement for nav-full

* docs: accessibility improvement for back-to-top

* feat: add skip link that jump to the content
2023-03-10 14:43:22 +08:00

34 lines
817 B
Vue

<script setup lang="ts">
import { useSidebar } from '../composables/sidebar'
import { useBackTop } from '../composables/back-top'
import ToggleSidebarBtn from './subnav/toggle-sidebar-btn.vue'
defineProps<{
isSidebarOpen: boolean
}>()
defineEmits(['open-menu'])
const { hasSidebar } = useSidebar()
const { shouldShow, scrollToTop } = useBackTop()
</script>
<template>
<div class="sub-nav py-3 flex items-center">
<ToggleSidebarBtn
v-if="hasSidebar"
:aria-expanded="isSidebarOpen"
@click="$emit('open-menu')"
/>
<Transition name="shifting">
<ElButton
:class="{ 'go-back-top': true, show: shouldShow }"
link
class="height-5"
@click.prevent.stop="scrollToTop"
>
Back to top
</ElButton>
</Transition>
</div>
</template>