perf(style): use skill

components/layout/AppLayout.module.css

@@ -57,16 +57,56 @@
   padding: 8px 8px 0;
 }
 
+.navbarIconLink {
+  display: flex;
+  width: 100%;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #4e5969;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.navbarIconLink:hover {
+  background: #eef4ff;
+  color: #1874ff;
+}
+
+.navbarIconLinkActive {
+  background: #e7efff;
+  color: #1874ff;
+}
+
 .navbarFooter {
   border-top: 1px solid #e5e6eb;
-  padding: 6px 0 0;
+  padding: 4px 8px;
+}
+
+.navbarToggleIcon {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #4e5969;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.navbarToggleIcon:hover {
+  background: #f2f3f5;
+  color: #1874ff;
 }
 
 .main {
   background: #f7f8fa;
 }
 
-
 .userName {
   color: #1d2129;
   font-size: 14px;
@@ -78,4 +118,4 @@
   color: #86909c;
   font-size: 12px;
   line-height: 14px;
-}
+}

components/layout/AppLayout.tsx

@@ -22,6 +22,8 @@ import Avvvatars from "avvvatars-react"
 import { useDisclosure, useMediaQuery } from "@mantine/hooks"
 import {
   IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
   IconLogout,
   IconMoon,
   IconSun,
@@ -372,6 +374,10 @@ export default function AppLayout({
                         />
                       )
                     } else {
+                      const isGroupActive = pathname.startsWith(
+                        `/${activeHeaderMenu.url}/${item.url}`
+                      )
+
                       return (
                         <Menu
                           width={"auto"}
@@ -381,19 +387,25 @@ export default function AppLayout({
                           openDelay={100}
                           closeDelay={200}>
                           <Menu.Target>
-                            <NavLink
-                              noWrap={true}
-                              leftSection={
-                                item.icon && (
+                            <Tooltip
+                              label={item.title || ""}
+                              position="right"
+                              openDelay={100}
+                              closeDelay={200}
+                              transitionProps={{ duration: 100 }}>
+                              <UnstyledButton
+                                className={cx(classes.navbarIconLink, {
+                                  [classes.navbarIconLinkActive]: isGroupActive,
+                                })}
+                                aria-label={item.title}>
+                                {item.icon ? (
                                   <ClientIcon
                                     icon={item.icon}
                                     style={{ width: 14, height: 14 }}
                                   />
-                                )
-                              }
-                              label={item.title}
-                              styles={getShellNavLinkStyles(false)}
-                            />
+                                ) : null}
+                              </UnstyledButton>
+                            </Tooltip>
                           </Menu.Target>
                           <Menu.Dropdown>
                             {item.items?.map((sub) =>
@@ -436,23 +448,40 @@ export default function AppLayout({
                       openDelay={100}
                       closeDelay={200}
                       transitionProps={{ duration: 100 }}>
-                      <NavLink
-                        // href={`/${activeHeaderMenu.url}/${item.url}`}
-                        onClick={() => {
-                          toggleMobile()
-                          router.push(`/${activeHeaderMenu.url}/${item.url}`)
-                        }}
-                        noWrap={true}
-                        active={isActive}
-                        leftSection={
+                      {isOpen ? (
+                        <NavLink
+                          // href={`/${activeHeaderMenu.url}/${item.url}`}
+                          onClick={() => {
+                            toggleMobile()
+                            router.push(`/${activeHeaderMenu.url}/${item.url}`)
+                          }}
+                          noWrap={true}
+                          active={isActive}
+                          leftSection={
+                            <ClientIcon
+                              icon={item.icon}
+                              style={{ width: 14, height: 14 }}
+                            />
+                          }
+                          label={item.title}
+                          styles={getShellNavLinkStyles(isActive)}
+                        />
+                      ) : (
+                        <UnstyledButton
+                          className={cx(classes.navbarIconLink, {
+                            [classes.navbarIconLinkActive]: isActive,
+                          })}
+                          aria-label={item.title}
+                          onClick={() => {
+                            toggleMobile()
+                            router.push(`/${activeHeaderMenu.url}/${item.url}`)
+                          }}>
                           <ClientIcon
                             icon={item.icon}
                             style={{ width: 14, height: 14 }}
                           />
-                        }
-                        label={item.title}
-                        styles={getShellNavLinkStyles(isActive)}
-                      />
+                        </UnstyledButton>
+                      )}
                     </Tooltip>
                   )
                 }
@@ -460,17 +489,31 @@ export default function AppLayout({
             </ScrollArea>
           </Stack>
           <Stack justify="center" gap={0} className={classes.navbarFooter}>
-            <Flex
-              justify={isOpen ? "flex-end" : "center"}
-              align="center"
-              mb={"sm"}>
-              <Burger
-                opened={false}
-                onClick={() => updateIsOpen(!isOpen)}
-                size="sm"
-                visibleFrom="sm"
-                mr={isOpen ? "sm" : undefined}
-              />
+            <Flex justify={isOpen ? "flex-end" : "center"} align="center">
+              <Box visibleFrom="sm">
+                <Tooltip
+                  events={{
+                    hover: !isOpen,
+                    focus: false,
+                    touch: false,
+                  }}
+                  label={isOpen ? "收起菜单" : "展开菜单"}
+                  position="right"
+                  openDelay={100}
+                  closeDelay={200}
+                  transitionProps={{ duration: 100 }}>
+                  <UnstyledButton
+                    className={classes.navbarToggleIcon}
+                    aria-label={isOpen ? "收起菜单" : "展开菜单"}
+                    onClick={() => updateIsOpen(!isOpen)}>
+                    {isOpen ? (
+                      <IconChevronLeft size={18} />
+                    ) : (
+                      <IconChevronRight size={18} />
+                    )}
+                  </UnstyledButton>
+                </Tooltip>
+              </Box>
             </Flex>
           </Stack>
         </AppShell.Navbar>