fix: update header styling in Layout.vue and improve conditional class binding in PageContent.vue for better responsiveness and visual consistency

Author: onmax

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -70,15 +70,15 @@ const isMobileOrTablet = breakpoints.smaller('lg')
       <MobileNav fixed bottom-0 />
     </template>
     <template v-else>
-      <header fixed inset-x-0 top-0 z-10 bg-neutral-0 f-h-xl flex="~ gap-32" f-px-xl f-py-sm>
+      <header z-1000 fixed inset-x-0 top-0 border="b-1 neutral-400" shadow bg-neutral-0 f-h-xl flex="~ gap-32" f-px-xl f-py-sm>
         <Logo />
         <CommandMenu max-w-320 ml-auto />
         <nav flex="~ items-center gap-32">
           <a v-for="module in modules" :key="module.text" shrink-0 :href="withBase(module.defaultPageLink)">
             {{ module.text }}</a>
         </nav>
       </header>
-      <PageContent f-pt-xl />
+      <Content f-pt-xl />
     </template>
   </div>
 </template>

packages/nimiq-vitepress-theme/src/layout/PageContent.vue

@@ -18,7 +18,12 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
 </script>
 
 <template>
-  <div f-px-lg :class="showSecondarySidebar ? 'xl:f-pr-xs xl:f-pl-xl' : 'xl:f-px-xl'" f-pt-sm f="$px $px-min-48 $px-max-72" pb="f-xl xl:sm" flex="~ gap-16" relative h-full>
+  <div
+    :class="{
+      'xl:f-pr-xs xl:f-pl-xl': showSecondarySidebar,
+      'xl:f-px-xl': !showSecondarySidebar,
+    }" f-pt-sm f="$px $px-min-48 $px-max-72" pb="f-xl xl:sm" flex="~ gap-16" relative h-full
+  >
     <div flex="~ col" h-full flex-1 max-w-full>
       <div v-if="showBreadcrumbs || showSourceCode || showCopyMarkdown" f-pb-lg flex="~ items-center justify-between">
         <ul v-if="showBreadcrumbs" flex="~ items-center gap-12">
@@ -31,12 +36,19 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
         <div v-else />
 
         <div v-if="showSourceCode || showCopyMarkdown" flex="~ items-center gap-8 sm:gap-12">
-          <button v-if="showCopyMarkdown" nq-pill-tertiary outline="~ 1.5 neutral-500" translate-y-0 shadow-none un-text="f-2xs neutral-900 copied:white" rounded-4 copied:bg-green flex="~ row gap-4" :data-state="copied ? '' : undefined" @click="copyMarkdownContent">
+          <button
+            v-if="showCopyMarkdown" nq-pill-tertiary outline="~ 1.5 neutral-500" translate-y-0 shadow-none
+            un-text="f-2xs neutral-900 copied:white" rounded-4 copied:bg-green flex="~ row gap-4"
+            :data-state="copied ? '' : undefined" @click="copyMarkdownContent"
+          >
             <div i-nimiq:copy copied:i-nimiq:checkmark />
             <span>{{ copied ? 'Copied!' : 'Copy MD' }}</span>
           </button>
 
-          <a v-if="showSourceCode" :href="sourceCodeUrl" target="_blank" rel="noopener" rounded-4 nq-pill-tertiary outline="~ 1.5 neutral-500" nq-arrow un-text="f-2xs neutral-900" flex="~ row gap-4">
+          <a
+            v-if="showSourceCode" :href="sourceCodeUrl" target="_blank" rel="noopener" rounded-4 nq-pill-tertiary
+            outline="~ 1.5 neutral-500" nq-arrow un-text="f-2xs neutral-900" flex="~ row gap-4"
+          >
             <div i-nimiq:logos-github-mono op-80 />
             <span class="hidden sm:inline">{{ sourceCodeLabel }}</span>
           </a>
@@ -53,7 +65,10 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
           Suggest changes on this page
         </a>
         <p text-neutral-700 font-normal italic>
-          Built with the <a href="https://onmax.github.io/nimiq-ui/vitepress-theme/" un-text-neutral-800 target="_blank" rel="noopener" underline>Nimiq Vitepress Theme</a>
+          Built with the <a
+            href="https://onmax.github.io/nimiq-ui/vitepress-theme/" un-text-neutral-800 target="_blank"
+            rel="noopener" underline
+          >Nimiq Vitepress Theme</a>
         </p>
       </div>
     </div>