tambahan menu mobile

src/com/MainLayout.tsx

@@ -11,7 +11,9 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
                 base: "2.2rem",
                 md: "2.5rem"
             }} />
-            <Box>
+            <Box style={{
+                overflow: "scroll"
+            }}>
                 {children}
             </Box>
             <Footer />

src/com/NavbarMainMenu.tsx

@@ -9,6 +9,7 @@ import { useSnapshot } from "valtio"
 import { MenuItem } from "../../types/menu-item"
 import { NavbarSearch } from "./NavBarSearch"
 import { NavbarSubMenu } from "./NavbarSubMenu"
+import { IconSearch } from "@tabler/icons-react"
 
 export function NavbarMainMenu({ listNavbar }: {
     listNavbar: MenuItem[]
@@ -40,7 +41,7 @@ export function NavbarMainMenu({ listNavbar }: {
                     }}
                 >
                     {/* TODO: add icon search */}
-                    {/* <MdSearch size={"1.5rem"} /> */}
+                    <IconSearch size={"1.5rem"} />
                 </ActionIcon>
             </Flex>
         </Container>

src/com/NavbarSubMenu.tsx

@@ -2,12 +2,13 @@
 
 import stateNav from "@/state/state-nav";
 import { Button, Container, Stack } from "@mantine/core";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { MenuItem } from "../../types/menu-item";
 import _ from "lodash";
+import { motion } from "motion/react";
+import { MenuItem } from "../../types/menu-item";
+import { useTransitionRouter } from 'next-view-transitions'
 
 export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
+  const router = useTransitionRouter()
   return (
     <motion.div
       key={_.uniqueId()}
@@ -32,12 +33,15 @@ export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
             item.map((item, k) => {
               return (
                 <Button
+                  key={k}
                   fz={"lg"}
                   color="dark.9"
                   variant="transparent"
-                  component={Link}
-                  href={item.href}
-                  key={k}
+                  onClick={() => {
+                    router.push(item.href)
+                    stateNav.item = null
+                    stateNav.isSearch = false
+                  }}
                 >
                   {item.name}
                 </Button>

src/com/main-page/content-1/ModuleView.tsx

@@ -1,7 +1,7 @@
 import images from "@/con/images";
 import stateNav from "@/state/state-nav";
-import { Card, Image, SimpleGrid } from "@mantine/core";
-import { useHover } from "@mantine/hooks";
+import { Center, Image, Paper, SimpleGrid } from "@mantine/core";
+import { motion } from 'framer-motion';
 import { useTransitionRouter } from 'next-view-transitions';
 
 
@@ -9,31 +9,33 @@ const listImageModule = Object.values(images.module);
 
 function ModuleItem({ item }: { item: string }) {
   const router = useTransitionRouter();
-  const { ref, hovered } = useHover();
   return (
-    <Card
+    <Paper
       onClick={() => {
         stateNav.module = item;
         router.push("/module");
       }}
-      h={100}
-      ref={ref}
       p={"md"}
       bg={"white"}
       radius={"32"}
-      style={{
-        border: `2px solid ${hovered ? "lightgray" : "transparent"}`,
-      }}
+      pos={"relative"}
     >
-      <Image src={item} alt="icon"
-        fit="contain"
-        sizes="100%"
-        style={{
-          objectFit:"contain",
-          objectPosition:"center"
-        }}
-      />
-    </Card>
+      <Center h={"100%"}>
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+        >
+          <Image src={item} alt="icon"
+            fit="contain"
+            sizes="100%"
+            loading="lazy"
+            style={{
+              objectFit: "contain",
+              objectPosition: "center"
+            }}
+          />
+        </motion.div>
+      </Center>
+    </Paper>
   );
 }