use complete class names in nav

Author: tobihagemann

layouts/partials/nav.html

@@ -1,13 +1,13 @@
-{{- $textColor := cond .IsHome "white" "primary" -}}
+{{- $textColor := cond .IsHome "text-white" "text-primary" -}}
+{{- $borderColor := cond .IsHome "border-white" "border-primary" -}}
 {{- $backgroundColor := cond .IsHome "bg-dark" "bg-white" -}}
-{{- $navBorderColor := cond .IsHome "border-transparent" "border-primary" -}}
 {{- $currentRelPermalink := .RelPermalink -}}
-<nav class="w-full max-h-screen text-{{ $textColor }} fixed {{ $backgroundColor }} shadow-sm z-50">
+<nav class="w-full max-h-screen {{ $textColor }} fixed {{ $backgroundColor }} shadow-sm z-50">
   <div class="flex justify-between items-stretch w-full lg:px-8">
     <!-- Regular Navigation -->
     <div class="flex items-stretch">
       <!-- Toggle Button for Smartphone Navigation -->
-      <button @click="isNavOpen = !isNavOpen" type="button" class="self-center lg:hidden border border-{{ $textColor }} rounded-sm px-2 py-1 mx-2" aria-label="Toggle Navigation">
+      <button @click="isNavOpen = !isNavOpen" type="button" class="self-center lg:hidden border {{ $borderColor }} rounded-sm px-2 py-1 mx-2" aria-label="Toggle Navigation">
         <i x-show="isNavOpen" class="fas fa-times fa-fw" x-cloak></i>
         <i x-show="!isNavOpen" class="fas fa-bars fa-fw"></i>
       </button>
@@ -35,8 +35,8 @@
         </li>
         {{- range .Site.Data.nav.RelLinks }}
         {{- with $.Site.GetPage . }}
-        {{- $borderColor := cond (hasPrefix $currentRelPermalink .RelPermalink) $textColor "transparent" }}
-        <li class="flex items-center mx-2 border-b-2 border-{{ $borderColor }} hover:border-{{ $textColor }}">
+        {{- $navItemBorderColor := cond (hasPrefix $currentRelPermalink .RelPermalink) $borderColor "border-transparent" }}
+        <li class="flex items-center mx-2 border-b-2 {{ $navItemBorderColor }} hover:{{ $borderColor }}">
           <a class="p-2 hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
         </li>
         {{- end }}
@@ -93,7 +93,7 @@
       {{- end }}
 
       <ul class="hidden lg:flex items-stretch list-none m-0">
-        <li class="flex items-center m-3 border-l border-{{ $textColor }}"></li>
+        <li class="flex items-center m-3 border-l {{ $borderColor }}"></li>
 
         <li x-data="{ isLangDropdownOpen: false }" class="flex items-center mx-2">
           <button @click="isLangDropdownOpen = !isLangDropdownOpen" class="whitespace-nowrap p-2">