Merge pull request #575 from TheMcnafaha/fix-hover-link

refactor(navigation-docs): make <a> wrap <li> instead of <li> wrap <a>

Author: thejackshelton

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -26,33 +26,31 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
   const location = useLocation();
   const rootStore = useAppState();
   const selectedKitSig = useSelectedKit();
-  const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center 
+  const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
     rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
   return (
     <nav
       class={`bg-background fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] pb-6 [grid-area:nav] lg:w-80
               ${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
     >
       <ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">
-        <li class={linkStyles}>
-          <a href="/about">About</a>
-        </li>
+        <a href="/about">
+          <li class={linkStyles}>About</li>
+        </a>
         {selectedKitSig.value !== KitName.HEADLESS && (
-          <li class={linkStyles}>
-            <a href="/docs/headless/introduction">Headless Kit</a>
-          </li>
+          <a href="/docs/headless/introduction">
+            <li class={linkStyles}>Headless Kit</li>
+          </a>
         )}
         {rootStore.featureFlags?.showFluffy &&
           selectedKitSig.value !== KitName.FLUFFY && (
-            <li class={linkStyles}>
-              <a href="/docs/fluffy/introduction">Styled Kit</a>
-            </li>
+            <a href="/docs/fluffy/introduction">
+              <li class={linkStyles}>Styled Kit</li>
+            </a>
           )}
-        <li class={linkStyles}>
-          <a href="https://discord.gg/PVWUUejrez" target="_blank">
-            Community
-          </a>
-        </li>
+        <a href="https://discord.gg/PVWUUejrez" target="_blank">
+          <li class={linkStyles}>Community</li>
+        </a>
         {/* <a href="/contact">Contact</a> */}
       </ul>
       {linksGroups?.map((group) => {