feat: align header links with docs restructure (#103)

Aligns links in the header with
matter-labs/zksync-docs#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

@@ -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>

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>

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,
+    },
+  ];
+};