Fix Menu Lingkungan Darmasaba User

src/app/darmasaba/_com/NavbarSubMenu.tsx

@@ -1,20 +1,22 @@
 "use client";
 
 import stateNav from "@/state/state-nav";
-import { Button, Container, Stack } from "@mantine/core";
-import _ from "lodash";
+import { Button, Container, Stack, Text } from "@mantine/core";
 import { motion } from "motion/react";
+import { IconArrowRight } from "@tabler/icons-react";
 import { MenuItem } from "../../../../types/menu-item";
-import { useTransitionRouter } from 'next-view-transitions'
+import { useTransitionRouter } from "next-view-transitions";
+import colors from "@/con/colors";
 
 export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
-  const router = useTransitionRouter()
+  const router = useTransitionRouter();
+
   return (
     <motion.div
-      key={_.uniqueId()}
-      initial={{ opacity: 0.5 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 1 }}
+      key={Math.random().toString(36).slice(2)}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
     >
       <Container
         key={stateNav.item?.[0]?.id}
@@ -22,32 +24,50 @@ export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
           stateNav.item = null;
           stateNav.isSearch = false;
         }}
-        w={{
-          base: "100%",
-          md: "80%",
-        }}
+        w={{ base: "100%", md: "80%" }}
         fluid
+        py="xl"
       >
-        <Stack gap={0} align="start" py={"xl"}>
-          {item &&
-            item.map((item, k) => {
-              return (
-                <Button
-                  key={k}
-                  fz={"lg"}
-                  color="dark.9"
-                  variant="transparent"
-                  onClick={() => {
-                    router.push(item.href)
-                    stateNav.item = null
-                    stateNav.isSearch = false
-                  }}
-                >
-                  {item.name}
-                </Button>
-              );
-            })}
-        </Stack>
+        {item && item.length > 0 ? (
+          <Stack gap="xs" align="stretch">
+            {item.map((link, index) => (
+              <Button
+                key={index}
+                variant="subtle"
+                justify="space-between"
+                size="lg"
+                radius="md"
+                color="gray.0"
+                onClick={() => {
+                  router.push(link.href);
+                  stateNav.item = null;
+                  stateNav.isSearch = false;
+                }}
+                rightSection={<IconArrowRight size={18} />}
+                styles={(theme) => ({
+                  root: {
+                    background: "transparent",
+                    color: colors['blue-button'],
+                    fontWeight: 500,
+                    transition: "all 0.2s ease",
+                    "&:hover": {
+                      background: theme.colors.gray[8],
+                      boxShadow: `0 0 12px ${theme.colors.blue[6]}55`,
+                    },
+                  },
+                })}
+              >
+                {link.name}
+              </Button>
+            ))}
+          </Stack>
+        ) : (
+          <Stack align="center" py="xl">
+            <Text c="dimmed" size="sm">
+              No submenu available
+            </Text>
+          </Stack>
+        )}
       </Container>
     </motion.div>
   );