@eox/pages-theme-eox 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/components/LogoSection.vue

@@ -2,7 +2,8 @@
   <section class="logo-section">
     <div ref="logo-row" class="logo-row">
       <component
-        v-for="logo in logos"
+        v-for="logo in normalizedLogos"
+        :key="logo.alt"
         :is="logo.link ? 'a' : 'div'"
         :href="logo.link || undefined"
         :target="logo.target || undefined"
@@ -15,15 +16,36 @@
 </template>
 
 <script setup>
-import { useTemplateRef, onMounted } from "vue";
+import { useTemplateRef, onMounted, computed } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps(["baseHeight", "logos", "strength"]);
 const logoRow = useTemplateRef("logo-row");
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  const base = withBase("/");
+  if (base && base !== "/" && url.startsWith(base)) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+const normalizedLogos = computed(() => {
+  if (!props.logos) return [];
+  return props.logos.map((logo) => ({
+    ...logo,
+    image: resolveUrl(logo.image),
+    link: logo.link ? resolveUrl(logo.link) : undefined,
+  }));
+});
+
 onMounted(() => {
   // Function to update CSS variables and display values
   function updateVariables() {
-    const baseHeight = props.baseHeight || 4;
+    let baseHeight = props.baseHeight || 4;
+    if (typeof baseHeight === "string" && baseHeight.endsWith("rem")) {
+      baseHeight = baseHeight.slice(0, -3).trim();
+    }
     const strength = props.strength || 1;
 
     // Update CSS variables on all .logo-row elements
@@ -46,6 +68,7 @@ onMounted(() => {
 
 <style>
 section.logo-section {
+  background-color: var(--surface-container-lowest, #ffffff);
   margin-block-start: 3rem;
 }
 .logo-section .logo-row {

package/src/components/MobileNavDropdown.vue

@@ -1,8 +1,11 @@
 <template>
   <template v-for="item in items">
-    <li v-if="item.items && item.text">
+    <li
+      v-if="item.items && item.text"
+      :class="{ active: isActive(item, route.path) }"
+    >
       <details>
-        <summary>
+        <summary :class="{ active: isActive(item, route.path) }">
           <span class="max" :class="{ active: isActive(item, route.path) }">{{
             t(item.text, theme.i18n)
           }}</span>
@@ -14,7 +17,7 @@
       </details>
     </li>
     <MobileNavDropdown v-else-if="item.items" :items="item.items" />
-    <li v-else>
+    <li v-else :class="{ active: isActive(item, route.path) }">
       <a
         v-if="item.link"
         :href="withBase(item.link)"
@@ -46,3 +49,10 @@ defineProps({
 const route = useRoute();
 const { theme } = useData();
 </script>
+
+<style scoped>
+a,
+a:hover {
+  text-decoration: none !important;
+}
+</style>

package/src/components/NavBar.cy.js

@@ -28,6 +28,7 @@ describe("<NavBar />", () => {
     cy.viewport(1920, 1080);
     cy.mount(NavBar);
     cy.get(".nav-desktop img.logo").should("have.attr", "src", "/logo.png");
+    cy.get(".nav-desktop img.logo").should("have.css", "height", "28px");
   });
 
   it("renders desktop navigation items", () => {
@@ -140,4 +141,18 @@ describe("<NavBar />", () => {
       .contains("English")
       .should("not.exist");
   });
+
+  it("handles responsive breakpoints between mobile and desktop navigation", () => {
+    // Medium tablet viewport (e.g. iPad portrait 768px): triggers mobile hamburger navigation
+    cy.viewport(768, 1024);
+    cy.mount(NavBar);
+    cy.get(".nav-mobile").should("be.visible");
+    cy.get(".nav-desktop").should("not.be.visible");
+
+    // Medium tablet landscape / small laptop viewport (1024px): triggers desktop navigation
+    cy.viewport(1024, 768);
+    cy.mount(NavBar);
+    cy.get(".nav-desktop").should("be.visible");
+    cy.get(".nav-mobile").should("not.be.visible");
+  });
 });

package/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="top-nav at-top row center-align">
+  <div class="top-nav at-top row center-align" :class="{ 'has-hero': hasHero }">
     <nav class="large-padding no-margin center-align nav-mobile">
-      <a href="/">
+      <a :href="withBase('/')">
         <img
           :src="withBase(theme.logo.light)"
           :alt="`${site.title} logo`"
@@ -20,7 +20,7 @@
       </button>
       <dialog id="mobile-menu" class="max">
         <nav>
-          <a data-ui="#mobile-menu" href="/">
+          <a data-ui="#mobile-menu" :href="withBase('/')">
             <img
               :src="withBase(theme.logo.light)"
               :alt="`${site.title} logo`"
@@ -33,10 +33,17 @@
           </button>
         </nav>
         <ul class="list border large-space">
-          <li v-for="item in theme.nav.filter((item) => !item.action)">
+          <li
+            v-for="item in theme.nav.filter((item) => !item.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <details v-if="item.items">
-              <summary>
-                <span class="max">{{ t(item.text, theme.i18n) }}</span>
+              <summary :class="{ active: isActive(item, route.path) }">
+                <span
+                  class="max"
+                  :class="{ active: isActive(item, route.path) }"
+                  >{{ t(item.text, theme.i18n) }}</span
+                >
                 <i class="mdi mdi-chevron-down"></i>
               </summary>
               <ul class="list">
@@ -49,7 +56,10 @@
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
-              :class="item.action ? 'button large medium-elevate cta' : ''"
+              :class="[
+                item.action ? 'button large medium-elevate cta' : '',
+                { active: isActive(item, route.path) },
+              ]"
             >
               <span>{{ t(item.text, theme.i18n) }}</span>
             </a>
@@ -119,7 +129,7 @@
       </dialog>
     </nav>
     <nav class="large-padding no-margin center-align row holder nav-desktop">
-      <a href="/">
+      <a :href="withBase('/')">
         <img
           :src="withBase(theme.logo.light)"
           :alt="`${site.title} logo`"
@@ -135,7 +145,10 @@
       <div class="space"></div>
       <nav>
         <ul class="left-align no-margin">
-          <li v-for="item in theme.nav.filter((i) => !i.action)">
+          <li
+            v-for="item in theme.nav.filter((i) => !i.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <div v-if="item.items">
               <button
                 class="button text no-round"
@@ -229,7 +242,7 @@ import { t, trackEvent, isActive } from "../helpers";
 import NavDropdown from "./NavDropdown.vue";
 import MobileNavDropdown from "./MobileNavDropdown.vue";
 
-const { site, theme, localeIndex } = useData();
+const { site, theme, localeIndex, frontmatter, page } = useData();
 const route = useRoute();
 
 const langs = computed(() => {
@@ -239,7 +252,7 @@ const langs = computed(() => {
   }
   return Object.entries(locales).map(([id, locale]) => {
     const currentPath = route.path;
-    const base = withBase("");
+    const base = withBase("/");
     let pathRelativeToBase = currentPath;
     if (base !== "/" && currentPath.startsWith(base)) {
       pathRelativeToBase = currentPath.substring(base.length);
@@ -271,6 +284,14 @@ const langs = computed(() => {
   });
 });
 
+const hasHero = computed(() => {
+  return Boolean(
+    frontmatter.value.hero ||
+      frontmatter.value.layout === "home" ||
+      page.value.relativePath === "index.md",
+  );
+});
+
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
     const nav = document.querySelector(".top-nav");
@@ -301,7 +322,24 @@ if (!import.meta.env.SSR) {
 .top-nav.at-top {
   box-shadow: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
+.top-nav.at-top .nav-desktop .button.primary,
+.top-nav.has-hero.at-top .nav-desktop .button.primary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary {
+  background: #ffffff !important;
+  color: #000c14 !important;
+  border-radius: 9999px;
+  font-weight: 500;
+  display: inline-flex;
+}
+.top-nav.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.top-nav.has-hero.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.primary
+  i.mdi-arrow-right {
+  display: none;
+}
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary,
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.alt {
   display: none;
@@ -317,47 +355,114 @@ if (!import.meta.env.SSR) {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
-.Layout.layout-home .top-nav.at-top {
+.Layout.layout-home .top-nav.at-top,
+.top-nav.has-hero.at-top {
   background: transparent;
   color: #f7f8f8;
 }
 .Layout .top-nav nav .button {
   color: var(--on-surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button,
+.top-nav.has-hero.at-top .nav-desktop .button {
   color: var(--on-surface);
   background: var(--surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.text {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text,
+.top-nav.has-hero.at-top .nav-desktop .button.text {
   color: #f7f8f8;
   background: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.border {
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.text:hover:not(.active),
+.top-nav.has-hero.at-top .nav-desktop .button.text:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active:hover,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active:hover {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.text.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border,
+.top-nav.has-hero.at-top .nav-desktop .button.border {
   color: #f7f8f8;
   border-color: #f7f8f855;
   background: none;
 }
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border.active,
+.top-nav.has-hero.at-top .nav-desktop .button.border.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+  border-color: transparent !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.border.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+  border-color: transparent !important;
+}
+.nav-desktop menu > li.active,
+.nav-desktop menu > li:has(> a.active) {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.nav-desktop menu > li.active > a,
+.nav-desktop menu > li:has(> a.active) > a {
+  color: var(--on-primary-container) !important;
+}
+#mobile-menu .list li.active > a,
+#mobile-menu .list li.active > span,
+#mobile-menu .list summary:has(.active),
+#mobile-menu .list summary.active {
+  color: var(--primary) !important;
+  font-weight: 600;
+}
 .top-nav.at-top > nav > a:has(.logo.dark) > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light {
+.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light,
+.top-nav.has-hero.at-top > nav > a:has(.logo.dark) > .logo.light {
   display: none;
 }
 .Layout.layout-home
   .top-nav.at-top
   > nav
   > a:not(:has(.logo.dark))
-  > .logo.light {
+  > .logo.light,
+.top-nav.has-hero.at-top > nav > a:not(:has(.logo.dark)) > .logo.light {
   filter: brightness(0) invert(1);
 }
 .Layout .top-nav > nav > a > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark {
+.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark,
+.top-nav.has-hero.at-top > nav > a > .logo.dark {
   display: block;
 }
+.top-nav > nav > a:has(.logo),
+#mobile-menu nav > a:has(.logo) {
+  display: inline-flex;
+  align-items: center;
+}
 img.logo {
-  height: 32px;
+  height: var(--vp-nav-logo-height, 28px);
+  width: auto;
+}
+.top-nav img.logo {
+  height: var(--vp-nav-logo-height, 28px);
+  width: auto;
+  max-height: 100%;
+  object-fit: contain;
 }
 nav.nav-mobile {
   display: flex;
@@ -365,7 +470,7 @@ nav.nav-mobile {
 nav.nav-desktop {
   display: none;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   nav.nav-mobile {
     display: none;
   }
@@ -373,6 +478,29 @@ nav.nav-desktop {
     display: flex;
   }
 }
+
+/* Medium desktop viewports (1024px - 1200px): compact navigation styling to prevent overflow */
+@media (min-width: 1024px) and (max-width: 1200px) {
+  .top-nav > nav.nav-desktop {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+    gap: 8px !important;
+  }
+  .nav-desktop > nav:not(.actions) > ul {
+    gap: 4px !important;
+  }
+  .nav-desktop .button.text {
+    padding: 0 8px !important;
+    font-size: 0.8125rem !important;
+  }
+  .nav-desktop .actions .button {
+    padding: 0 12px !important;
+    font-size: 0.8125rem !important;
+  }
+  .nav-desktop img.logo {
+    height: var(--vp-nav-logo-height, 28px) !important;
+  }
+}
 details summary i.mdi-translate {
   transform: rotate(0deg) !important;
 }

package/src/components/NavDropdown.vue

@@ -1,6 +1,9 @@
 <template>
   <template v-for="item in items">
-    <li v-if="item.items && item.text">
+    <li
+      v-if="item.items && item.text"
+      :class="{ active: isActive(item, route.path) }"
+    >
       <a
         v-if="item.link"
         :href="withBase(item.link)"
@@ -25,7 +28,7 @@
       </menu>
     </li>
     <NavDropdown v-else-if="item.items" :items="item.items" />
-    <li v-else>
+    <li v-else :class="{ active: isActive(item, route.path) }">
       <a
         v-if="item.link"
         :href="withBase(item.link)"
@@ -60,3 +63,10 @@ defineProps({
 const route = useRoute();
 const { theme } = useData();
 </script>
+
+<style scoped>
+a,
+a:hover {
+  text-decoration: none !important;
+}
+</style>