Fix Menu Lingkungan Darmasaba User

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -2,7 +2,7 @@
 
 import colors from "@/con/colors"
 import stateNav from "@/state/state-nav"
-import { ActionIcon, Button, Container, Flex, Image, Stack } from "@mantine/core"
+import { ActionIcon, Button, Container, Flex, Image, Stack, Tooltip } from "@mantine/core"
 import { useHover } from "@mantine/hooks"
 import { IconSearch, IconUser } from "@tabler/icons-react"
 import { useTransitionRouter } from 'next-view-transitions'
@@ -12,68 +12,91 @@ import { NavbarSearch } from "./NavBarSearch"
 import { NavbarSubMenu } from "./NavbarSubMenu"
 import { useRouter } from "next/navigation"
 
-export function NavbarMainMenu({ listNavbar }: {
-    listNavbar: MenuItem[]
-}) {
-    const { item, isSearch } = useSnapshot(stateNav)
-    const router = useTransitionRouter()
-    const next = useRouter()
-    return <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
-        <Container pos={"relative"} w={{
-            base: '100%',
-            md: '80%',
-        }} fluid>
-            <Flex align={"center"} justify={"space-between"} wrap={{
-                base: "wrap",
-                md: "nowrap"
-            }}>
-                <ActionIcon radius={"100"} variant="transparent" onClick={() => {
-                    router.push("/darmasaba")
-                    stateNav.clear()
+export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
+  const { item, isSearch } = useSnapshot(stateNav)
+  const router = useTransitionRouter()
+  const next = useRouter()
 
-                }} >
-                    <Image radius={"100"} src={"/assets/images/darmasaba-icon.png"} alt="icon" w={24} h={24} loading="lazy" />
-                </ActionIcon>
-                {listNavbar.map((item, k) => {
-                    return <MenuItemCom key={k} item={item} />
-                })}
-                <ActionIcon variant="transparent" c={isSearch ? 'grey' : colors["blue-button"]}
-                    onClick={() => {
-                        stateNav.item = null
-                        stateNav.isSearch = !stateNav.isSearch
-                    }}
-                >
-                    {/* TODO: add icon search */}
-                    <IconSearch size={"1.5rem"} />
-                </ActionIcon>
-                <ActionIcon onClick={() => {
-                    next.push("/admin/landing-page/profile/program-inovasi")
-                }} color={colors["blue-button"]} radius={'xl'}>
-                    <IconUser size={24} />
-                </ActionIcon>
-            </Flex>
-        </Container>
-        {item && <NavbarSubMenu item={item as MenuItem[]} />}
-        {isSearch && <NavbarSearch />}
+  return (
+    <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
+      <Container pos="relative" w={{ base: '100%', md: '80%' }} fluid>
+        <Flex align="center" justify="space-between" wrap={{ base: "wrap", md: "nowrap" }}>
+          <Tooltip label="Go to Homepage" position="bottom" withArrow>
+            <ActionIcon
+              radius="xl"
+              variant="transparent"
+              onClick={() => {
+                router.push("/darmasaba")
+                stateNav.clear()
+              }}
+            >
+              <Image
+                radius="xl"
+                src="/assets/images/darmasaba-icon.png"
+                alt="Darmasaba Logo"
+                w={28}
+                h={28}
+                loading="lazy"
+              />
+            </ActionIcon>
+          </Tooltip>
+          {listNavbar.map((item, k) => (
+            <MenuItemCom key={k} item={item} />
+          ))}
+          <Tooltip label="Search content" position="bottom" withArrow>
+            <ActionIcon
+              variant="transparent"
+              c={isSearch ? 'gray' : colors["blue-button"]}
+              onClick={() => {
+                stateNav.item = null
+                stateNav.isSearch = !stateNav.isSearch
+              }}
+              radius="xl"
+            >
+              <IconSearch size="1.5rem" />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label="My Profile" position="bottom" withArrow>
+            <ActionIcon
+              onClick={() => {
+                next.push("/admin/landing-page/profile/program-inovasi")
+              }}
+              color={colors["blue-button"]}
+              radius="xl"
+              variant="light"
+            >
+              <IconUser size={22} />
+            </ActionIcon>
+          </Tooltip>
+        </Flex>
+      </Container>
+      {item && <NavbarSubMenu item={item as MenuItem[]} />}
+      {isSearch && <NavbarSearch />}
     </Stack>
-
+  )
 }
 
-function MenuItemCom({ item, }: { item: MenuItem }) {
-    const { ref, hovered } = useHover()
-    const router = useTransitionRouter()
+function MenuItemCom({ item }: { item: MenuItem }) {
+  const { ref, hovered } = useHover()
+  const router = useTransitionRouter()
 
-    return <Button
-        ref={ref}
-        color={hovered ? "grey" : colors["blue-button"]}
-        onMouseEnter={() => {
-            stateNav.item = item.children || null
-            stateNav.isSearch = false
-        }}
-        variant="transparent"
-        onClick={() => {
-            router.push(item.href)
-            stateNav.clear()
-        }}
-    >{item.name}</Button>
-}
+  return (
+    <Button
+      ref={ref}
+      color={hovered ? "gray" : colors["blue-button"]}
+      onMouseEnter={() => {
+        stateNav.item = item.children || null
+        stateNav.isSearch = false
+      }}
+      variant="subtle"
+      radius="xl"
+      onClick={() => {
+        router.push(item.href)
+        stateNav.clear()
+      }}
+      fw={500}
+    >
+      {item.name}
+    </Button>
+  )
+}