#254 Docs menu key fix (#262)

* refactor(layout.tsx): removed deprecated function and used suported one

* fix(menu.tsx, types.ts): added key property for menu list and fixed menu broken links

Resolved issue where links were not updating on the client side despite a context update, due to
reliance on the initial value from the server-side rendered component

fix #254

* fix(menu.tsx, layout.tsx): used server side location object for setting theme state on server render

#254

* refactor(layout.tsx): changed toLocaleLowerCase for toLowerCase

#254

* refactor(menu.tsx): changed toLocaleLowerCase for toLowerCase

#254

* Update apps/website/src/types.ts

---------

Co-authored-by: Giorgio Boa <[email protected]>

Author: PatrykGodlewski

apps/website/src/components/menu/menu.tsx

@@ -10,6 +10,7 @@ type Props = {
 
 export const Menu = component$<Props>(({ onClose$ }) => {
   const appState = useContext(APP_STATE);
+
   const menu = [
     {
       label: 'Accordion',
@@ -27,7 +28,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
       label: 'Breadcrumb',
       path: `/docs/${appState.theme.toLowerCase()}/breadcrumb`,
     },
-    { label: 'Button', path: `/docs/${appState.theme.toLowerCase()}/button` },
+    {
+      label: 'Button',
+      path: `/docs/${appState.theme.toLowerCase()}/button`,
+    },
     {
       label: 'ButtonGroup',
       path: `/docs/${appState.theme.toLowerCase()}/button-group`,
@@ -41,21 +45,48 @@ export const Menu = component$<Props>(({ onClose$ }) => {
       label: 'Navigation Bar',
       path: `/docs/${appState.theme.toLowerCase()}/navigation-bar`,
     },
-    { label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
+    {
+      label: 'Drawer',
+      path: `/docs/${appState.theme.toLowerCase()}/drawer`,
+    },
     { label: 'Input Phone', path: `/docs/headless/input-phone` },
-    { label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
-    { label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
-    { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
-    { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
+    {
+      label: 'Rating',
+      path: `/docs/${appState.theme.toLowerCase()}/rating`,
+    },
+    {
+      label: 'Radio',
+      path: `/docs/${appState.theme.toLowerCase()}/radio`,
+    },
+    {
+      label: 'Popover',
+      path: `/docs/${appState.theme.toLowerCase()}/popover`,
+    },
+    {
+      label: 'Select',
+      path: `/docs/${appState.theme.toLowerCase()}/select`,
+    },
     {
       label: 'Spinner',
       path: `/docs/${appState.theme.toLowerCase()}/spinner`,
     },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
-    { label: 'Toast', path: `/docs/${appState.theme.toLowerCase()}/toast` },
-    { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },
-    { label: 'Tooltip', path: `/docs/${appState.theme.toLowerCase()}/tooltip` },
-    { label: 'Slider', path: `/docs/${appState.theme.toLowerCase()}/slider` },
+    {
+      label: 'Toast',
+      path: `/docs/${appState.theme.toLowerCase()}/toast`,
+    },
+    {
+      label: 'Toggle',
+      path: `/docs/${appState.theme.toLowerCase()}/toggle`,
+    },
+    {
+      label: 'Tooltip',
+      path: `/docs/${appState.theme.toLowerCase()}/tooltip`,
+    },
+    {
+      label: 'Slider',
+      path: `/docs/${appState.theme.toLowerCase()}/slider`,
+    },
     {
       label: 'Pagination',
       path: `/docs/${appState.theme.toLowerCase()}/pagination`,
@@ -109,8 +140,8 @@ export const Menu = component$<Props>(({ onClose$ }) => {
         <ul class="py-2 px-4">
           {menu
             .sort((a, b) => (a.label > b.label ? 1 : -1))
-            .map((menuItem) => (
-              <li>
+            .map((menuItem, index) => (
+              <li key={index}>
                 <Link href={menuItem.path}>
                   <span class="text-lg" onClick$={onChangePage}>
                     {menuItem.label}

apps/website/src/routes/layout.tsx

@@ -1,10 +1,12 @@
 import {
   component$,
   Slot,
-  useBrowserVisibleTask$,
   useContextProvider,
   useStore,
+  useTask$,
+  useVisibleTask$,
 } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
 import Header from '../components/header/header';
 import { APP_STATE } from '../constants';
 import { AppState } from '../types';
@@ -14,14 +16,18 @@ export default component$(() => {
     darkMode: false,
     theme: 'NOT_DEFINED',
   });
+  const loc = useLocation();
   useContextProvider(APP_STATE, state);
 
-  useBrowserVisibleTask$(() => {
+  useVisibleTask$(() => {
     state.darkMode = localStorage.getItem('theme') === 'dark';
+  });
+
+  useTask$(() => {
     state.theme =
-      location.pathname.indexOf('/headless') !== -1
+      loc.url.pathname.indexOf('/headless') !== -1
         ? 'HEADLESS'
-        : location.pathname.indexOf('/material') !== -1
+        : loc.url.pathname.indexOf('/material') !== -1
         ? 'MATERIAL'
         : 'DAISY';
   });