Cleanup menuHighlight from layout

keystatic/keystatic.posts.config.tsx

@@ -25,7 +25,6 @@ export const astroPostsDefinition = defineCollection({
         .optional(), // Note: implemented but unused ATM
       author: z.string(),
       inMenu: z.boolean(),
-      // TODO DELETE in Templates – menuHighlight: z.string().optional(), // TODO Do we still need this?
       noindex: z.boolean().optional(),
       language: z.enum(languages).optional(),
       image: image().nullish(),

src/layouts/LayoutApp.astro

@@ -5,17 +5,16 @@ import { getProject } from './utils/getProject'
 
 type Props = {
   title: string
-  menuHighlight?: string
   noindex?: boolean
 }
 
-const { title, menuHighlight, noindex } = Astro.props
+const { title, noindex } = Astro.props
 const project = await getProject(Astro.request.url)
 ---
 
 <Layout title={title} noindex={noindex}>
   <div class="computed-h-screen flex flex-col text-gray-900 lg:flex-row lg:gap-3">
-    <Navigation layoutType="app" project={project} menuHighlight={menuHighlight} />
+    <Navigation layoutType="app" project={project} />
     <main class="relative flex-1">
       <slot />
     </main>

src/layouts/LayoutArticle.astro

@@ -7,18 +7,17 @@ import type { LayoutLanguage } from './languages'
 
 type Props = {
   title: string
-  menuHighlight?: string | undefined
   noindex?: boolean | undefined
   language?: LayoutLanguage | undefined
 }
 
-const { title, menuHighlight, noindex, language } = Astro.props
+const { title, noindex, language } = Astro.props
 const project = await getProject(Astro.request.url)
 ---
 
 <Layout title={title} noindex={noindex} language={language}>
   <div class="flex flex-col text-gray-900 lg:flex-row lg:gap-3">
-    <Navigation layoutType="article" project={project} menuHighlight={menuHighlight} />
+    <Navigation layoutType="article" project={project} />
     <main class="flex-1 px-4 py-6 lg:px-0 lg:pl-5">
       <slot />
     </main>

src/layouts/LayoutArticlePageAstro.astro

@@ -5,16 +5,15 @@ import { proseBase, proseHeadings } from './baseStyles'
 
 type Props = {
   title: string
-  menuHighlight?: string | undefined
   noindex?: boolean | undefined
   language?: 'en' | 'de' | undefined
 }
 export type LayoutArticleProps = Props
 
-const { title, menuHighlight, noindex, language } = Astro.props
+const { title, noindex, language } = Astro.props
 ---
 
-<LayoutArticle title={title} menuHighlight={menuHighlight} noindex={noindex}>
+<LayoutArticle title={title} noindex={noindex}>
   <article class={twJoin(proseBase, 'max-w-prose', proseHeadings)} lang={language}>
     <slot />
   </article>

src/layouts/LayoutArticlePageMdx.astro

@@ -6,19 +6,18 @@ import { proseBase, proseHeadings } from './baseStyles'
 type Props = {
   frontmatter: {
     title: string
-    menuHighlight?: string | undefined
     noindex?: boolean | undefined
     language?: 'en' | 'de' | undefined
   }
 }
 export type LayoutArticleProps = Props
 
 const {
-  frontmatter: { title, menuHighlight, noindex, language },
+  frontmatter: { title, noindex, language },
 } = Astro.props
 ---
 
-<LayoutArticle title={title} menuHighlight={menuHighlight} noindex={noindex}>
+<LayoutArticle title={title} noindex={noindex}>
   <article class={twJoin(proseBase, 'max-w-prose', proseHeadings)} lang={language}>
     <slot />
   </article>

src/layouts/LayoutArticlePost.astro

@@ -6,10 +6,10 @@ import { proseBase, proseHeadings } from './baseStyles'
 
 export type Props = CollectionEntry<'posts'>['data']
 
-const { title, menuHighlight, noindex, language, pubDate, updatedDate, author } = Astro.props
+const { title, noindex, language, pubDate, updatedDate, author } = Astro.props
 ---
 
-<LayoutArticle title={title} menuHighlight={menuHighlight} noindex={noindex}>
+<LayoutArticle title={title} noindex={noindex}>
   <!-- {% if page.showToc %}prose-h1:mt-10 {% endif %} -->
 
   <article

src/layouts/Navigation/Navigation.astro

@@ -9,10 +9,9 @@ export interface Props {
   /** @desc switches the navigation to scroll in itself ("app") vs. with the "article" */
   layoutType: 'article' | 'app'
   project: TProjectConfig
-  menuHighlight?: string | undefined
 }
 
-const { layoutType, project, menuHighlight } = Astro.props
+const { layoutType, project } = Astro.props
 ---
 
 <nav
@@ -27,10 +26,10 @@ const { layoutType, project, menuHighlight } = Astro.props
   <ProjectToHeader project={project} />
 
   <NavigationMobile client:load>
-    <ProjectToMenu project={project} menuHighlight={menuHighlight} />
+    <ProjectToMenu project={project} />
   </NavigationMobile>
 
   <div class="z-[2000] hidden transition-all duration-150 lg:block">
-    <ProjectToMenu project={project} menuHighlight={menuHighlight} />
+    <ProjectToMenu project={project} />
   </div>
 </nav>

src/layouts/Navigation/NavigationFooter.astro

@@ -3,22 +3,24 @@ import type { TProjectConfig } from 'keystatic/keystatic.projects.config'
 import { twJoin } from 'tailwind-merge'
 
 export interface Props {
-  menuHighlight: string | undefined
   additionalLinks: TProjectConfig['additionalFooterLinks']
 }
 
-const { menuHighlight, additionalLinks } = Astro.props
+const { additionalLinks } = Astro.props
+
+const { pathname: currentPathname } = Astro.url
 ---
 
 <ul class="prose prose-sm mb-4 ml-3 block space-y-3 leading-snug">
   {
     additionalLinks?.map((link) => (
       <li>
         <a
-          class={
-            (twJoin(menuHighlight === link.href ? 'text-bold text-black' : 'hover:text-gray-500'),
-            'underline')
-          }
+          class={twJoin(
+            currentPathname === `/${link.href}`
+              ? 'font-bold text-black'
+              : 'underline hover:text-gray-500',
+          )}
           href={link.href}
         >
           {link.label}
@@ -36,8 +38,11 @@ const { menuHighlight, additionalLinks } = Astro.props
   </li>
   <li>
     <a
-      class={(twJoin(menuHighlight === 'contact' ? 'text-bold text-black' : 'hover:text-gray-500'),
-      'underline')}
+      class={twJoin(
+        currentPathname === '/contact'
+          ? 'font-bold text-black no-underline'
+          : 'underline hover:text-gray-500',
+      )}
       href="/contact"
       lang="de"
     >

src/layouts/Navigation/ProjectToMenu.astro

@@ -11,11 +11,10 @@ import { projectKeyFromUrl } from '@layouts/utils/projectKeyFromUrl'
 
 interface Props {
   project: TProjectConfig
-  menuHighlight?: string | undefined
 }
 
 const isDev = import.meta.env.DEV
-const { project, menuHighlight } = Astro.props
+const { project } = Astro.props
 ---
 
 {project.name.slug === 'root' && <PageAboutMenu />}
@@ -50,4 +49,4 @@ const { project, menuHighlight } = Astro.props
   )
 }
 
-<NavigationFooter menuHighlight={menuHighlight} additionalLinks={project.additionalFooterLinks} />
+<NavigationFooter additionalLinks={project.additionalFooterLinks} />

src/pages/contact.mdx

@@ -1,7 +1,6 @@
 ---
 layout: '@layouts/LayoutArticlePageMdx.astro'
 title: Kontakt und Impressum
-menuHighlight: contact
 noindex: true
 ---
 

src/pages/posts/index.astro

@@ -8,7 +8,7 @@ const sortedPosts = allPosts.sort(
 )
 ---
 
-<LayoutArticlePageAstro title="Alle Blogposts" menuHighlight="posts" noindex={true}>
+<LayoutArticlePageAstro title="Alle Blogposts" noindex={true}>
   <header class="mb-20">
     <h1>Alle Blogposts aller Projekte ({sortedPosts.length})</h1>
   </header>