From 14d6ad80b2a13c6718ddb78c421fb0c2851a0686 Mon Sep 17 00:00:00 2001
From: Marc Tonsen <mar@pupil-labs.com>
Date: Fri, 3 Nov 2023 09:54:11 +0100
Subject: [PATCH] Fix custom nav bar imports

---
 components/CustomNavBar.vue | 406 +++++++++++++++++-------------------
 1 file changed, 196 insertions(+), 210 deletions(-)

diff --git a/components/CustomNavBar.vue b/components/CustomNavBar.vue
index b8ba832a9..62c4484fd 100644
--- a/components/CustomNavBar.vue
+++ b/components/CustomNavBar.vue
@@ -1,39 +1,39 @@
 <script lang="ts" setup>
-  import { useWindowScroll } from "../neon/node_modules/@vueuse/core";
-  import { ref, watchPostEffect } from "vue";
-  import { useData } from "vitepress";
-  import { useSidebar } from "vitepress/theme";
-  // import VPNavBarAppearance from 'vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue'
-  import VPNavBarExtra from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarExtra.vue";
-  import VPNavBarHamburger from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue";
-  import VPNavBarMenu from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarMenu.vue";
-  import VPNavBarSearch from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue";
-  import VPNavBarSocialLinks from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue";
-  import VPNavBarTitle from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarTitle.vue";
-  import VPNavBarTranslations from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue";
-  import VPNavBarMenuLink from "../neon/node_modules/vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue";
-
-  defineProps<{
-    isScreenOpen: boolean;
-  }>();
-
-  defineEmits<{
-    (e: "toggle-screen"): void;
-  }>();
-
-  // @ts-ignore
-  const { y } = useWindowScroll();
-  const { hasSidebar } = useSidebar();
-  const { frontmatter } = useData();
-
-  const classes = ref<Record<string, boolean>>({});
-
-  watchPostEffect(() => {
-    classes.value = {
-      "has-sidebar": hasSidebar.value,
-      top: frontmatter.value.layout === "home" && y.value === 0,
-    };
-  });
+import { useWindowScroll } from "@vueuse/core";
+import { ref, watchPostEffect } from "vue";
+import { useData } from "vitepress";
+import { useSidebar } from "vitepress/theme";
+// import VPNavBarAppearance from 'vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue'
+import VPNavBarExtra from "vitepress/dist/client/theme-default/components/VPNavBarExtra.vue";
+import VPNavBarHamburger from "vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue";
+import VPNavBarMenu from "vitepress/dist/client/theme-default/components/VPNavBarMenu.vue";
+import VPNavBarSearch from "vitepress/dist/client/theme-default/components/VPNavBarSearch.vue";
+import VPNavBarSocialLinks from "vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue";
+import VPNavBarTitle from "vitepress/dist/client/theme-default/components/VPNavBarTitle.vue";
+import VPNavBarTranslations from "vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue";
+import VPNavBarMenuLink from "vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue";
+
+defineProps<{
+  isScreenOpen: boolean;
+}>();
+
+defineEmits<{
+  (e: "toggle-screen"): void;
+}>();
+
+// @ts-ignore
+const { y } = useWindowScroll();
+const { hasSidebar } = useSidebar();
+const { frontmatter } = useData();
+
+const classes = ref<Record<string, boolean>>({});
+
+watchPostEffect(() => {
+  classes.value = {
+    "has-sidebar": hasSidebar.value,
+    top: frontmatter.value.layout === "home" && y.value === 0,
+  };
+});
 </script>
 
 <template>
@@ -66,11 +66,7 @@
           <VPNavBarSocialLinks class="social-links" />
           <VPNavBarExtra class="extra" />
           <slot name="nav-bar-content-after" />
-          <VPNavBarHamburger
-            class="hamburger"
-            :active="isScreenOpen"
-            @click="$emit('toggle-screen')"
-          />
+          <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
         </div>
       </div>
     </div>
@@ -78,201 +74,191 @@
 </template>
 
 <style scoped>
-  .VPNavBarMenu {
-    display: none;
-  }
+.VPNavBarMenu {
+  display: none;
+}
 
-  @media (min-width: 768px) {
-    .VPNavBarMenu {
-      display: flex;
-    }
+@media (min-width: 768px) {
+  .VPNavBarMenu {
+    display: flex;
   }
-
+}
+
+.VPNavBar {
+  position: relative;
+  border-bottom: 1px solid transparent;
+  padding: 0 8px 0 24px;
+  height: var(--vp-nav-height);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
   .VPNavBar {
-    position: relative;
-    border-bottom: 1px solid transparent;
-    padding: 0 8px 0 24px;
-    height: var(--vp-nav-height);
-    pointer-events: none;
-    white-space: nowrap;
+    padding: 0 32px;
   }
+}
 
-  @media (min-width: 768px) {
-    .VPNavBar {
-      padding: 0 32px;
-    }
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar {
+    padding: 0;
   }
 
-  @media (min-width: 960px) {
-    .VPNavBar.has-sidebar {
-      padding: 0;
-    }
-
-    .VPNavBar:not(.has-sidebar):not(.top) {
-      border-bottom-color: var(--vp-c-gutter);
-      background-color: var(--vp-nav-bg-color);
-    }
+  .VPNavBar:not(.has-sidebar):not(.top) {
+    border-bottom-color: var(--vp-c-gutter);
+    background-color: var(--vp-nav-bg-color);
   }
-
-  .container {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 auto;
-    max-width: calc(var(--vp-layout-max-width) - 64px);
-    height: var(--vp-nav-height);
-    pointer-events: none;
-  }
-
-  .container > .title,
-  .container > .content {
-    pointer-events: none;
-  }
-
-  .container :deep(*) {
-    pointer-events: auto;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  height: var(--vp-nav-height);
+  pointer-events: none;
+}
+
+.container>.title,
+.container>.content {
+  pointer-events: none;
+}
+
+.container :deep(*) {
+  pointer-events: auto;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .container {
+    max-width: 100%;
   }
-
-  @media (min-width: 960px) {
-    .VPNavBar.has-sidebar .container {
-      max-width: 100%;
-    }
-  }
-
-  .title {
-    flex-shrink: 0;
-    height: calc(var(--vp-nav-height) - 1px);
-    transition: background-color 0.5s;
+}
+
+.title {
+  flex-shrink: 0;
+  height: calc(var(--vp-nav-height) - 1px);
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    padding: 0 32px;
+    width: var(--vp-sidebar-width);
+    height: var(--vp-nav-height);
+    background-color: transparent;
   }
+}
 
-  @media (min-width: 960px) {
-    .VPNavBar.has-sidebar .title {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      padding: 0 32px;
-      width: var(--vp-sidebar-width);
-      height: var(--vp-nav-height);
-      background-color: transparent;
-    }
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .title {
+    padding-left: max(32px,
+        calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
+}
 
-  @media (min-width: 1440px) {
-    .VPNavBar.has-sidebar .title {
-      padding-left: max(
-        32px,
-        calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
-      );
-      width: calc(
-        (100% - (var(--vp-layout-max-width) - 64px)) / 2 +
-          var(--vp-sidebar-width) - 32px
-      );
-    }
-  }
+.content {
+  flex-grow: 1;
+}
 
-  .content {
-    flex-grow: 1;
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .content {
+    position: relative;
+    z-index: 1;
+    padding-right: 32px;
+    padding-left: var(--vp-sidebar-width);
   }
+}
 
-  @media (min-width: 960px) {
-    .VPNavBar.has-sidebar .content {
-      position: relative;
-      z-index: 1;
-      padding-right: 32px;
-      padding-left: var(--vp-sidebar-width);
-    }
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .content {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
-
-  @media (min-width: 1440px) {
-    .VPNavBar.has-sidebar .content {
-      padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
-      padding-left: calc(
-        (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
-      );
-    }
+}
+
+.content-body {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: calc(var(--vp-nav-height) - 1px);
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar:not(.top) .content-body {
+    position: relative;
+    background-color: var(--vp-nav-bg-color);
   }
+}
 
+@media (max-width: 767px) {
   .content-body {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    height: calc(var(--vp-nav-height) - 1px);
-    transition: background-color 0.5s;
+    column-gap: 0.5rem;
   }
-
-  @media (min-width: 960px) {
-    .VPNavBar:not(.top) .content-body {
-      position: relative;
-      background-color: var(--vp-nav-bg-color);
-    }
-  }
-
-  @media (max-width: 767px) {
-    .content-body {
-      column-gap: 0.5rem;
-    }
+}
+
+.menu+.translations::before,
+.menu+.appearance::before,
+.menu+.social-links::before,
+.translations+.appearance::before,
+.appearance+.social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: "";
+}
+
+.menu+.menu::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  margin-top: 20px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: "";
+}
+
+.menu+.appearance::before,
+.translations+.appearance::before {
+  margin-right: 16px;
+}
+
+.appearance+.social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .curtain {
+    position: absolute;
+    right: 0;
+    bottom: -31px;
+    width: calc(100% - var(--vp-sidebar-width));
+    height: 32px;
   }
 
-  .menu + .translations::before,
-  .menu + .appearance::before,
-  .menu + .social-links::before,
-  .translations + .appearance::before,
-  .appearance + .social-links::before {
-    margin-right: 8px;
-    margin-left: 8px;
-    width: 1px;
-    height: 24px;
-    background-color: var(--vp-c-divider);
+  .VPNavBar.has-sidebar .curtain::before {
+    display: block;
+    width: 100%;
+    height: 32px;
+    background: linear-gradient(var(--vp-c-bg), transparent 70%);
     content: "";
   }
+}
 
-  .menu + .menu::before {
-    margin-right: 8px;
-    margin-left: 8px;
-    margin-top: 20px;
-    width: 1px;
-    height: 24px;
-    background-color: var(--vp-c-divider);
-    content: "";
-  }
-
-  .menu + .appearance::before,
-  .translations + .appearance::before {
-    margin-right: 16px;
-  }
-
-  .appearance + .social-links::before {
-    margin-left: 16px;
-  }
-
-  .social-links {
-    margin-right: -8px;
-  }
-
-  @media (min-width: 960px) {
-    .VPNavBar.has-sidebar .curtain {
-      position: absolute;
-      right: 0;
-      bottom: -31px;
-      width: calc(100% - var(--vp-sidebar-width));
-      height: 32px;
-    }
-
-    .VPNavBar.has-sidebar .curtain::before {
-      display: block;
-      width: 100%;
-      height: 32px;
-      background: linear-gradient(var(--vp-c-bg), transparent 70%);
-      content: "";
-    }
-  }
-
-  @media (min-width: 1440px) {
-    .VPNavBar.has-sidebar .curtain {
-      width: calc(
-        100% -
-          ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))
-      );
-    }
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .curtain {
+    width: calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)));
   }
+}
 </style>