hirsun-vuepress-theme-hope-plus
Version:
A light vuepress theme with tons of features and typewriter effect
103 lines • 4.68 kB
JavaScript
import { computed, defineComponent, h, ref, resolveComponent } from "vue";
import { hasGlobalComponent } from "vuepress-shared/client";
import noopModule from "vuepress-shared/noopModule";
import { useThemeLocaleData, useWindowSize, } from "@theme-hope/composables/index";
import LanguageDropdown from "@theme-hope/modules/navbar/components/LanguageDropdown";
import NavScreen from "@theme-hope/modules/navbar/components/NavScreen";
import NavbarBrand from "@theme-hope/modules/navbar/components/NavbarBrand";
import NavbarLinks from "@theme-hope/modules/navbar/components/NavbarLinks";
import RepoLink from "@theme-hope/modules/navbar/components/RepoLink";
import ToggleNavbarButton from "@theme-hope/modules/navbar/components/ToggleNavbarButton";
import ToggleSidebarButton from "@theme-hope/modules/navbar/components/ToggleSidebarButton";
import OutlookButton from "@theme-hope/modules/outlook/components/OutlookButton";
import "../styles/navbar.scss";
export default defineComponent({
name: "NavBar",
emits: ["toggleSidebar"],
slots: Object,
setup(_props, { emit, slots }) {
const themeLocale = useThemeLocaleData();
const { isMobile } = useWindowSize();
const showScreen = ref(false);
const autoHide = computed(() => {
const { navbarAutoHide = "mobile" } = themeLocale.value;
return (navbarAutoHide !== "none" &&
(navbarAutoHide === "always" || isMobile.value));
});
const navbarLayout = computed(() => themeLocale.value.navbarLayout ||
{
start: ["Brand"],
center: ["Links"],
end: ["Language", "Repo", "Outlook", "Search"],
});
const navbarComponentMap = {
Brand: NavbarBrand,
Language: HAS_MULTIPLE_LANGUAGES ? LanguageDropdown : noopModule,
Links: NavbarLinks,
Repo: RepoLink,
Outlook: OutlookButton,
Search: hasGlobalComponent("Docsearch")
? resolveComponent("Docsearch")
: hasGlobalComponent("SearchBox")
? resolveComponent("SearchBox")
: noopModule,
};
const getNavbarComponent = (component) => navbarComponentMap[component] ??
(hasGlobalComponent(component)
? resolveComponent(component)
: noopModule);
return () => {
return [
h("header", {
id: "navbar",
class: [
"vp-navbar",
{
"auto-hide": autoHide.value,
"hide-icon": themeLocale.value.navbarIcon === false,
},
],
}, [
h("div", { class: "vp-navbar-start" }, [
h(ToggleSidebarButton, {
onToggle: () => {
if (showScreen.value)
showScreen.value = false;
emit("toggleSidebar");
},
}),
slots.startBefore?.(),
(navbarLayout.value.start || []).map((item) => h((getNavbarComponent(item)))),
slots.startAfter?.(),
]),
h("div", { class: "vp-navbar-center" }, [
slots.centerBefore?.(),
(navbarLayout.value.center || []).map((item) => h((getNavbarComponent(item)))),
slots.centerAfter?.(),
]),
h("div", { class: "vp-navbar-end" }, [
slots.endBefore?.(),
(navbarLayout.value.end || []).map((item) => h((getNavbarComponent(item)))),
slots.endAfter?.(),
h(ToggleNavbarButton, {
active: showScreen.value,
onToggle: () => {
showScreen.value = !showScreen.value;
},
}),
]),
]),
h(NavScreen, {
show: showScreen.value,
onClose: () => {
showScreen.value = false;
},
}, {
before: () => slots.screenTop?.(),
after: () => slots.screenBottom?.(),
}),
];
};
},
});
//# sourceMappingURL=Navbar.js.map