created mobile friendly version, fixed update bug with exercise

Author: xelacast

src/app/dashboard/components/nav.tsx

@@ -18,7 +18,7 @@ export const Navigation = () => {
   return (
     <NavigationMenu>
       <NavigationMenuList>
-        <NavigationMenuItem>
+        {/* <NavigationMenuItem>
           <Link href="/dashboard" legacyBehavior passHref>
             <NavigationMenuLink
               className={navigationMenuTriggerStyle()}
@@ -27,7 +27,7 @@ export const Navigation = () => {
               Dashboard
             </NavigationMenuLink>
           </Link>
-        </NavigationMenuItem>
+        </NavigationMenuItem> */}
         <NavigationMenuItem>
           <Link href="/dashboard/day" legacyBehavior passHref>
             <NavigationMenuLink
@@ -48,7 +48,7 @@ export const Navigation = () => {
             </NavigationMenuLink>
           </Link>
         </NavigationMenuItem>
-        <NavigationMenuItem>
+        {/* <NavigationMenuItem>
           <Link href="/dashboard/feedback" legacyBehavior passHref>
             <NavigationMenuLink
               className={navigationMenuTriggerStyle()}
@@ -57,17 +57,17 @@ export const Navigation = () => {
               Feedback
             </NavigationMenuLink>
           </Link>
-        </NavigationMenuItem>
+        </NavigationMenuItem> */}
         <NavigationMenuItem>
           <NavigationMenuTrigger>Configure</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-              <Link href="/dashboard/configure/supplements">
-                <h3 className="text-md font-medium leading-none">
-                  Supplements
-                </h3>
-                <p className="mt-1 text-sm">Configure your supplements.</p>
-              </Link>
+            <ul className="mx-2 grid w-[350px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <ListItem
+                title="Supplements"
+                href="/dashboard/configure/supplements "
+              >
+                Configure supplements you use
+              </ListItem>
             </ul>
           </NavigationMenuContent>
         </NavigationMenuItem>
@@ -97,8 +97,6 @@ const ListItem = React.forwardRef<
     <li>
       <NavigationMenuLink asChild>
         <Link
-          passHref
-          legacyBehavior
           href={props.href!}
           ref={ref}
           className={cn(
@@ -107,12 +105,10 @@ const ListItem = React.forwardRef<
           )}
           {...props}
         >
-          <a>
-            <div className="text-sm font-medium leading-none">{title}</div>
-            <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
-              {children}
-            </p>
-          </a>
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+            {children}
+          </p>
         </Link>
       </NavigationMenuLink>
     </li>

src/app/dashboard/components/navDemo.tsx

@@ -9,7 +9,7 @@ import { updateSupplementActivation } from "~/lib/actions/supplementAction";
 import { toCapitalize } from "~/lib/misc/useUpperCase";
 import type { readSupplementSchema } from "~/lib/schemas/supplement";
 import { SupplementHoverCard as SHC } from "./supplementHover";
-import { getSupplementsConfig, useSupplements } from "~/lib/hooks/supplements";
+import { getSupplementsConfig } from "~/lib/hooks/supplements";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useQuery } from "@tanstack/react-query";
 

src/app/dashboard/configure/supplements/components/showSupplements.tsx

@@ -36,9 +36,9 @@ export const SupplementHoverCard = ({
   children: React.ReactNode;
 }) => {
   return (
-    <HoverCard openDelay={100} closeDelay={50}>
+    <HoverCard openDelay={1000} closeDelay={50}>
       <HoverCardTrigger>{children}</HoverCardTrigger>
-      <HoverCardContent className="w-[400px] ">
+      <HoverCardContent className="w-[400px]">
         <SupplementFactsTable ingredients={supplement?.ingredients} />
       </HoverCardContent>
     </HoverCard>

src/app/dashboard/configure/supplements/components/supplementHover.tsx

@@ -28,7 +28,7 @@ export default async function Page() {
   return (
     <div className="grid h-[90vh] gap-4 md:grid-cols-5 lg:grid-cols-3">
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <ShowConfiguredSupplements className="rounded-md border p-4 shadow-lg md:col-span-2 md:col-start-1 lg:col-span-1 lg:col-start-1 " />
+        <ShowConfiguredSupplements className="h-[50vh] rounded-md border p-4 shadow-lg md:col-span-2 md:col-start-1 md:h-auto lg:col-span-1 lg:col-start-1" />
       </HydrationBoundary>
       <ConfigureSupplements className="rounded-md border p-4 shadow-lg md:col-span-4 md:col-start-3 lg:col-span-5 lg:col-start-2" />
     </div>

src/app/dashboard/configure/supplements/page.tsx

@@ -7,8 +7,7 @@ const Page = async ({ params }: { params: { date: string } }) => {
   const { supplements, id, exercise, form_misc, health, sleep, stress } =
     await readDayDataForEdit(date);
 
-  console.log(exercise);
-  // can I resuse the day form and make default values but send it to an update???
+  // can I reuse the day form and make default values but send it to an update???
   // how can I detect which fields are being updated? and then trigger only those fields?
   // ? Should I parse the data with the daySchema?
 
@@ -18,7 +17,7 @@ const Page = async ({ params }: { params: { date: string } }) => {
       id={id}
       supplements={supplements}
       // @ts-expect-error look below
-      exercise={exercise} // errors in config string != "low" | "medium" | "high" schema is set this way but the dat coming from the zod schema is just a string. Alter this in the data pull
+      exercise={exercise} // errors in config string != "low" | "medium" | "high" schema
       form_misc={form_misc}
       health={health}
       sleep={sleep}