Fixed nav header alignment (#118)

* the navigation header css * changed some navigation rendering code to be more qwik * removed working code from front page * the open is closed when loading * mobile menu has multiple columns * balanced the menu for mobile views. fixed 404 message to shared componenet.
bitcobblers · Mar 5, 2024 · c084618 · c084618
1 parent 270d3ed
commit c084618
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 31 deletions.
diff --git a/qwik-docs/src/components/template/404-message.tsx b/qwik-docs/src/components/template/404-message.tsx
@@ -0,0 +1,17 @@
+import ImgMissingLink from '/public/images/missing-link.jpg?jsx';
+import Notes from '~/components/template/notes'
+import { component$ } from "@builder.io/qwik";
+
+export default component$(() => {
+    return <>
+        <Notes title='You Found the Missing Link'>
+        This page seems to have gone the way of the dodo (or maybe just the yeti). But fret not, intrepid explorer, the [birdseye-view](/docs/birdseye-view/) or [getting-started](/docs/getting-started/) might have the answers you're searching for.
+        </Notes>
+        <div class="w-100% flex justify-items-center">
+            <ImgMissingLink class="mx-auto w-64 h-64 rounded-full" />
+        </div>
+        <div class="border-t-2 mt-4 pt-5">
+            Click <a href="/">Home</a> to find your way back.
+        </div>
+    </>
+});
diff --git a/qwik-docs/src/components/template/mobile-navigation.tsx b/qwik-docs/src/components/template/mobile-navigation.tsx
@@ -71,7 +71,7 @@ export default component$(() => {
           aria-label="Navigation"
         >
           <div class="h-full w-full bg-white px-4 pb-12 pt-5 sm:px-6 dark:bg-slate-900">            
-            <Navigation class="w-full" columns={2} />
+            <Navigation />
           </div>
         </div> 
         : <></>

diff --git a/qwik-docs/src/components/template/navigation.tsx b/qwik-docs/src/components/template/navigation.tsx
@@ -3,14 +3,13 @@ import { useLocation } from "@builder.io/qwik-city";
 import { navigation } from "~/routes/navigation";
 
 export default component$(( args: {
-  class?: string,
-  columns?: number,
+  class?: string,  
   onLinkClick?: any
 }) => {
   const pathname = useLocation();
   return (
     <nav class={'text-base lg:text-sm ' + args.class}>
-      <ul role="list" class={`space-y-9 grid grid-cols-${args.columns || 1} gap-4`}>
+      <ul role="list" class={`grid grid-cols-2 lg:grid-cols-1 gap-4`}>
         {navigation.map((section) => (
           <li key={section.title}>
             <h4 class="font-display font-medium text-slate-900 dark:text-white">

diff --git a/qwik-docs/src/routes/404.mdx b/qwik-docs/src/routes/404.mdx
@@ -1,13 +1,3 @@
-import ImgMissingLink from '/public/images/missing-link.jpg?jsx';
-import Notes from '~/components/template/notes'
+import Message from '~/components/template/404-message'
 
-<Notes title='You Found the Missing Link'>
-This page seems to have gone the way of the dodo (or maybe just the yeti). But fret not, intrepid explorer, the [birdseye-view](/docs/birdseye-view/) or [getting-started](/docs/getting-started/) might have the answers you're searching for.
-</Notes>
-<div class="w-100% flex justify-items-center">
-    <ImgMissingLink class="mx-auto w-64 h-64 rounded-full" />
-</div>
-
----
-
-Click [Home](/) to find your way back.
+<Message />
diff --git a/qwik-docs/src/routes/[...catchall]/index.mdx b/qwik-docs/src/routes/[...catchall]/index.mdx
@@ -1,13 +1,3 @@
-import ImgMissingLink from '/public/images/missing-link.jpg?jsx';
-import Notes from '~/components/template/notes'
+import Message from '~/components/template/404-message'
 
-<Notes title='You Found the Missing Link'>
-This page seems to have gone the way of the dodo (or maybe just the yeti). But fret not, intrepid explorer, the [birdseye-view](/docs/birdseye-view/) or [getting-started](/docs/getting-started/) might have the answers you're searching for.
-</Notes>
-<div class="w-100% flex justify-items-center">
-    <ImgMissingLink class="mx-auto w-64 h-64 rounded-full" />
-</div>
-
----
-
-Click [Home](/) to find your way back.
+<Message />
diff --git a/qwik-docs/src/routes/docs/testing-tools/index.mdx b/qwik-docs/src/routes/docs/testing-tools/index.mdx
@@ -0,0 +1,11 @@
+import Warning from '~/components/template/warning'
+
+# Testing Tools
+
+<Warning title="Under Construction" >
+    This page is under construction and may contain incomplete or incorrect information.
+</Warning>
+
+---
+
+Next Section: [Building Method Binders](/docs/building-method-binders/)
diff --git a/qwik-docs/src/routes/navigation.ts b/qwik-docs/src/routes/navigation.ts
@@ -4,13 +4,13 @@ export const navigation = [
     links: [
       { title: 'Why ZeUnit?', href: '/' },
       { title: 'Birdseye View', href: '/docs/birdseye-view/' },
-      { title: 'Getting Started', href: '/docs/getting-started' }
+      { title: 'Getting Started', href: '/docs/getting-started' },
+      { title: 'Testing Tools', href: '/docs/testing-tools/' },
     ],
   },
   {
     title: 'Core Concepts',
-    links: [
-      { title: 'Fact & Assertions', href: '/docs/facts-and-assertions/' },
+    links: [      
       { title: 'Method Binders', href: '/docs/core-method-binders/' },
       { title: 'Class Composers', href: '/docs/core-class-composers/' },
       { title: 'Test & Suite Lifecycle', href: '/docs/test-suite-lifecycle/' },
@@ -20,6 +20,7 @@ export const navigation = [
   {
     title: 'Advanced Guides',
     links: [
+      { title: 'Fact & Assertions', href: '/docs/facts-and-assertions/' },
       { title: 'Building Method Binders', href: '/docs/building-method-binders/' },
       { title: 'Building Class Composers', href: '/docs/building-class-composers/' },
       { title: 'Customizing Reporting', href: '/docs/customizing-reporting/' },