feat: use Link component, fix mobile menu

src/components/layout/Group.tsx

@@ -1,20 +1,16 @@
 import { Slot, component$ } from "@builder.io/qwik";
-import { useNavigate } from "@builder.io/qwik-city";
+import { Link } from "@builder.io/qwik-city";
 
 export default component$((props: { title: string; href?: string }) => {
-  const nav = useNavigate();
   return (
     <section>
       <div class="u-flex u-cross-center u-main-space-between">
         <h2 class="eyebrow-heading-2">{props.title}</h2>
 
         {props.href && (
-          <button
-            onClick$={async () => await nav(props.href)}
-            class="button is-text"
-          >
+          <Link href={props.href} class="button is-text">
             <span class="text">See All</span>
-          </button>
+          </Link>
         )}
       </div>
 

src/components/layout/Header.tsx

@@ -1,16 +1,14 @@
 import type { Signal } from "@builder.io/qwik";
 import { useContext } from "@builder.io/qwik";
 import { $, component$, useSignal } from "@builder.io/qwik";
-import { useNavigate } from "@builder.io/qwik-city";
+import { Link } from "@builder.io/qwik-city";
 import type { Models } from "appwrite";
 import { AppwriteService } from "~/AppwriteService";
 import { SearchModalContext, ThemeContext } from "~/routes/layout";
 import Cookies from "js-cookie";
 
 export default component$(
   (props: { account: Signal<null | Models.User<any>> }) => {
-    const nav = useNavigate();
-
     const searchModal = useContext(SearchModalContext);
 
     const links = [
@@ -52,8 +50,8 @@ export default component$(
               <span aria-hidden="true" class="icon-menu"></span>
             )}
           </button>
-          <button
-            onClick$={async () => await nav("/")}
+          <Link
+            href="/"
             class="u-flex u-cross-center u-gap-8 u-margin-inline-end-8"
           >
             <svg
@@ -80,7 +78,7 @@ export default component$(
                 fill="#F02E65"
               />
             </svg>
-          </button>
+          </Link>
           <div class="logo is-not-mobile">
             <ul class="buttons-list is-with-padding">
               {/* <li></li> */}
@@ -90,12 +88,9 @@ export default component$(
                   key={link.name}
                   class="buttons-list-item u-padding-inline-0"
                 >
-                  <button
-                    onClick$={async () => await nav(link.url)}
-                    class="button is-text"
-                  >
+                  <Link href={link.url} class="button is-text">
                     {link.name}
-                  </button>
+                  </Link>
                 </li>
               ))}
             </ul>
@@ -174,12 +169,9 @@ export default component$(
               ) : (
                 <>
                   <li class="buttons-list-item u-padding-inline-0">
-                    <button
-                      onClick$={async () => await nav("/submit-project")}
-                      class="button is-text"
-                    >
+                    <Link href="/submit-project" class="button is-text">
                       <span class="text">Submit</span>
-                    </button>
+                    </Link>
                   </li>
                   <li class="buttons-list-item u-padding-inline-0">
                     <button onClick$={signOut} class="button is-text">
@@ -209,20 +201,21 @@ export default component$(
         </header>
 
         {isMenuOpened.value && (
-          <aside class="main-side u-block" style="padding-top: 0;">
+          /* style="display: block;" required over u-block for specifity */
+          <aside class="main-side" style="display: block; padding-top: 0;">
             <nav class="side-nav">
               <div class="side-nav-main">
                 <section class="drop-section">
                   <ul class="drop-list">
                     {links.map((link) => (
                       <li key={link.name} class="drop-list-item">
-                        <button
-                          onClick$={async () => await nav(link.url)}
+                        <Link
+                          href={link.url}
                           class="drop-button u-capitalize u-small u-bold"
                           aria-current="page"
                         >
                           <span>{link.name}</span>
-                        </button>
+                        </Link>
                       </li>
                     ))}
                   </ul>

src/components/layout/Project.tsx

@@ -1,13 +1,12 @@
 import { component$ } from "@builder.io/qwik";
-import { useNavigate } from "@builder.io/qwik-city";
+import { Link } from "@builder.io/qwik-city";
 import type { Project } from "~/AppwriteService";
 import { AppwriteService } from "~/AppwriteService";
 import Upvote from "../blocks/Upvote";
 import ProjectTags from "./ProjectTags";
 
 export default component$((props: { project: Project | null }) => {
   const { project } = props;
-  const nav = useNavigate();
 
   return project === null ? (
     <div
@@ -20,12 +19,9 @@ export default component$((props: { project: Project | null }) => {
       >
         <div class="u-flex u-cross-center u-main-center u-width-full-line">
           <div class="u-flex-vertical u-gap-12 u-main-center u-cross-center u-width-full-line">
-            <button
-              onClick$={async () => await nav("/submit-project")}
-              class="button is-secondary"
-            >
+            <Link href="/submit-project" class="button is-secondary">
               <span class="text">Submit Project</span>
-            </button>
+            </Link>
           </div>
         </div>
       </div>
@@ -48,32 +44,28 @@ export default component$((props: { project: Project | null }) => {
         <div class="u-flex u-cross-center u-gap-8 u-main-space-between u-width-full-line">
           <div class="u-stretch u-flex-vertical u-gap-16">
             <div class="u-flex u-main-space-between u-cross-center">
+              <Link href={`/projects/${project.$id}`}>
+                <p class="heading-level-4 c-trim" style="font-size: 1.3rem;">
+                  {project.name}
+                </p>
+              </Link>
+              <Upvote projectId={project.$id} votes={project.upvotes} inline />
+            </div>
+            <Link href={`/projects/${project.$id}`}>
               <p
-                class="heading-level-4 c-trim u-cursor-pointer "
-                style="font-size: 1.3rem;"
-                onClick$={async () => await nav(`/projects/${project.$id}`)}
+                class="u-margin-block-start-4 c-trim-2"
+                style="min-height: 3em;"
               >
-                {project.name}
+                {project.tagline}
               </p>
-              <Upvote projectId={project.$id} votes={project.upvotes} inline />
-            </div>
-            <p
-              class="u-margin-block-start-4 c-trim-2 u-cursor-pointer "
-              style="min-height: 3em;"
-              onClick$={async () => await nav(`/projects/${project.$id}`)}
-            >
-              {project.tagline}
-            </p>
+            </Link>
           </div>
         </div>
       </div>
 
-      <div
-        class="object-og u-cursor-pointer"
-        onClick$={async () => await nav(`/projects/${project.$id}`)}
-      >
+      <Link class="object-og" href={`/projects/${project.$id}`}>
         <img src={AppwriteService.getProjectThumbnail(project.imageId)} />
-      </div>
+      </Link>
 
       <div
         class="u-flex u-main-start u-cross-start u-gap-4 u-flex-wrap u-stretch u-width-full-line"

src/components/layout/ProjectFeatured.tsx

@@ -1,35 +1,34 @@
 import { component$ } from "@builder.io/qwik";
 import Upvote from "../blocks/Upvote";
 import { AppwriteService, type Project } from "~/AppwriteService";
-import { useNavigate } from "@builder.io/qwik-city";
+import { Link } from "@builder.io/qwik-city";
 import ProjectTags from "./ProjectTags";
 
 export default component$((props: { project: Project }) => {
-  const nav = useNavigate();
   const { project } = props;
 
   return (
     <article class="card u-min-width-100-percent">
       <div class="u-flex u-flex-vertical-mobile u-gap-24">
         <div class="u-flex-basis-50-percent u-flex-shrink-0">
-          <button
-            onClick$={async () => await nav(`/projects/${project.$id}`)}
+          <Link
+            href={`/projects/${project.$id}`}
             class="object-og object-og-rounded"
           >
             <img
               src={AppwriteService.getProjectThumbnail(project.imageId, 1920)}
             />
-          </button>
+          </Link>
         </div>
 
         <div class="u-flex u-flex-vertical u-stretch u-gap-8">
           <div class="u-flex u-main-space-between u-cross-center">
-            <button
-              onClick$={async () => await nav(`/projects/${project.$id}`)}
+            <Link
+              href={`/projects/${project.$id}`}
               class="heading-level-3 u-margin-block-start-12 c-trim"
             >
               {project.name}
-            </button>
+            </Link>
             <Upvote
               projectId={project.$id}
               inline={true}

src/components/layout/ProjectList.tsx

@@ -1,12 +1,10 @@
 import { component$ } from "@builder.io/qwik";
 import Project from "./Project";
 import type { Project as ProjectType } from "~/AppwriteService";
-import { useNavigate } from "@builder.io/qwik-city";
+import { Link } from "@builder.io/qwik-city";
 
 export default component$(
   (props: { href?: string; projects: ProjectType[] }) => {
-    const nav = useNavigate();
-
     return (
       <div class="project-list u-gap-16">
         {props.projects.slice(0, 3).map((project) => (
@@ -26,26 +24,21 @@ export default component$(
                 </p>
               </div>
               <div class="u-flex u-gap-16 u-main-center">
-                <button
-                  onClick$={async () => await nav("/submit-project")}
-                  class="button is-secondary"
-                  type="button"
-                >
+                <Link href="/submit-project" class="button is-secondary">
                   <span class="text">Submit Project</span>
-                </button>
+                </Link>
               </div>
             </div>
           </article>
         )}
 
         {props.projects.length >= 1 && props.href && (
-          <button
-            onClick$={async () => await nav(props.href)}
+          <Link
+            href={props.href}
             class="is-only-mobile button is-secondary u-width-full-line u-text-center"
-            type="button"
           >
             <span class="text u-width-full-line">See More</span>
-          </button>
+          </Link>
         )}
       </div>
     );