From ebf27535ed8b650b0def7afc54bef7184bc2cd74 Mon Sep 17 00:00:00 2001
From: Igor Aleksanov <popzxc@yandex.ru>
Date: Fri, 6 Dec 2024 17:55:46 +0400
Subject: [PATCH] feat: align header links with docs restructure (#103)

Aligns links in the header with
https://github.com/matter-labs/zksync-docs/pull/278

This is done through a hack to avoid the need to change nuxt template,
publish new version, and then update the dep. We can do that as a
follow-up.
---
 app.vue         |  5 ++++-
 error.vue       |  4 +++-
 header-links.ts | 31 +++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 header-links.ts

diff --git a/app.vue b/app.vue
index a9f7772f..23ab2784 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { headerLinks } from './header-links';
+
 provideHeadlessUseId(() => useId());
 const { seo } = useAppConfig();
 
@@ -37,7 +39,8 @@ defineOgImageComponent('OgImageZK');
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent />
+    <!-- FIXME: Hack, we want to pass computed property while `useHeaderNav` expects an array -->
+    <HeaderComponent :links="computed(() => headerLinks()) as any" />
 
     <UMain>
       <NuxtLayout>
diff --git a/error.vue b/error.vue
index 8581b19c..03dc842f 100644
--- a/error.vue
+++ b/error.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { headerLinks } from './header-links';
 import type { NuxtError } from '#app';
 
 useSeoMeta({
@@ -26,7 +27,8 @@ provide('navigation', navigation);
 
 <template>
   <div>
-    <HeaderComponent />
+    <!-- FIXME: Hack, we want to pass computed property while `useHeaderNav` expects an array -->
+    <HeaderComponent :links="computed(() => headerLinks()) as any" />
 
     <UMain>
       <UContainer>
diff --git a/header-links.ts b/header-links.ts
new file mode 100644
index 00000000..74ae581f
--- /dev/null
+++ b/header-links.ts
@@ -0,0 +1,31 @@
+export const headerLinks = () => {
+  const config = useRuntimeConfig();
+  const route = useRoute();
+
+  const activeApp = config.public.app;
+  const isDocsApp = activeApp === 'docs';
+  const isCodeApp = activeApp === 'code';
+
+  return [
+    {
+      label: 'ZKsync Era',
+      to: isDocsApp ? '/zksync-era' : `${config.public.urls.docs}/zksync-era`,
+      active: route.path.startsWith('/zksync-era'),
+    },
+    {
+      label: 'ZK Stack',
+      to: isDocsApp ? '/zk-stack' : `${config.public.urls.docs}/zk-stack`,
+      active: route.path.startsWith('/zk-stack'),
+    },
+    {
+      label: 'ZKsync Protocol',
+      to: isDocsApp ? '/zksync-protocol' : `${config.public.urls.docs}/zksync-protocol`,
+      active: route.path.startsWith('/zksync-protocol'),
+    },
+    {
+      label: 'Community Code',
+      to: isCodeApp ? '/' : `${config.public.urls.code}`,
+      active: isCodeApp,
+    },
+  ];
+};