Optimize submenu in ToolsFramework

src/assets/css/components/common/hide-scrollbar.scss

@@ -18,6 +18,10 @@
     }
   }
 
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
   .scrollbar {
     position: absolute;
     z-index: 1000;

src/assets/css/pages/tools-framework.scss

@@ -12,10 +12,6 @@ body {
   background-color: constants.$origin-color;
   user-select: none;
 
-  .hide-scrollbar-selection {
-    height: 100% !important;
-  }
-
   .title {
     font-size: 2em;
     text-align: center;
@@ -26,9 +22,20 @@ body {
   }
 
   .content {
-    > ul {
+    display: flex;
-      > li {
+    min-height: 0;
+    flex-direction: column;
 
+    .toolsMenu {
+      min-height: 0;
+
+      .hide-scrollbar-mask {
+        flex: 1;
+      }
+    }
+
+    ul {
+      > li {
         &.item {
           position: relative;
           margin: 4px 14px;
@@ -61,17 +68,16 @@ body {
 
               &.active {
                 color: constants.$origin-color;
-                background-color: constants.$main-color;
+                background-color: constants.$main-color !important;
               }
             }
           }
 
           .submenu {
-            display: block;
+            display: none;
-            position: absolute;
+            position: fixed;
             padding-left: 20px;
-            left: 100%;
+            z-index: 10000;
-            top: 0;
 
             .content {
               display: flex;
@@ -105,9 +111,11 @@ body {
           }
 
           &:hover {
+            .menu-bt {
               a {
                 background-color: constants.$background-color;
               }
+            }
 
             .submenu {
               display: block;
@@ -130,6 +138,7 @@ body {
       }
     }
   }
+
   .separate {
     height: 0;
     margin: 10px 5px;

src/pages/ToolsFramework.tsx

@@ -6,13 +6,32 @@ import { toolsJsonObjects } from '@/router/tools.tsx'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 
 const ToolsFramework: React.FC = () => {
+    const [submenuTop, setSubmenuTop] = useState(0)
+    const [submenuLeft, setSubmenuLeft] = useState(0)
+
+    const showSubmenu = (e: React.MouseEvent) => {
+        const parentElement = e.currentTarget.parentElement
+        if (parentElement && parentElement.childElementCount === 2) {
+            const parentClientRect = parentElement.getBoundingClientRect()
+            if (parentClientRect.top <= screen.height / 2) {
+                setSubmenuTop(parentClientRect.top)
+            } else {
+                setSubmenuTop(
+                    parentClientRect.top -
+                        (parentElement.lastElementChild?.clientHeight ?? 0) +
+                        e.currentTarget.clientHeight
+                )
+            }
+            setSubmenuLeft(parentClientRect.right)
+        }
+    }
+
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <div className={'title'}>氮工具</div>
                     <div style={{ marginTop: '0' }} className={'separate'} />
-                    <HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
                     <div className={'content'}>
                         <ul>
                             <li className={'item'}>
@@ -30,9 +49,7 @@ const ToolsFramework: React.FC = () => {
                                                 component={toolsJsonObjects[0].icon}
                                             />
                                         </div>
-                                            <span className={'text'}>
+                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
-                                                {toolsJsonObjects[0].name}
-                                            </span>
                                     </NavLink>
                                 </div>
                             </li>
@@ -50,21 +67,30 @@ const ToolsFramework: React.FC = () => {
                                                 component={toolsJsonObjects[1].icon}
                                             />
                                         </div>
-                                            <span className={'text'}>
+                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
-                                                {toolsJsonObjects[1].name}
-                                            </span>
                                     </NavLink>
                                 </div>
                             </li>
                             <li>
                                 <div className={'separate'} />
                             </li>
+                        </ul>
+                        <div className={'toolsMenu'}>
+                            <HideScrollbar
+                                isShowVerticalScrollbar={true}
+                                isShowHorizontalScrollbar={true}
+                                scrollbarWidth={2}
+                            >
+                                <ul>
                                     {toolsJsonObjects.map((tool) => {
                                         return tool.menu &&
                                             tool.id !== 'tools' &&
                                             tool.id !== 'tools-all' ? (
                                             <li className={'item'} key={tool.id}>
-                                            <div className={'menu-bt'}>
+                                                <div
+                                                    className={'menu-bt'}
+                                                    onMouseEnter={showSubmenu}
+                                                >
                                                     <NavLink
                                                         to={tool.path}
                                                         className={({ isActive, isPending }) =>
@@ -87,7 +113,13 @@ const ToolsFramework: React.FC = () => {
                                                     </NavLink>
                                                 </div>
                                                 {tool.children ? (
-                                                <ul className={'submenu'}>
+                                                    <ul
+                                                        className={'submenu'}
+                                                        style={{
+                                                            top: submenuTop,
+                                                            left: submenuLeft
+                                                        }}
+                                                    >
                                                         <div className={'content'}>
                                                             {tool.children.map((subTool) => {
                                                                 return subTool.menu ? (
@@ -108,7 +140,9 @@ const ToolsFramework: React.FC = () => {
                                                                                     : ''
                                                                             }
                                                                         >
-                                                                        <span className={'text'}>
+                                                                            <span
+                                                                                className={'text'}
+                                                                            >
                                                                                 {subTool.name}
                                                                             </span>
                                                                         </NavLink>
@@ -122,9 +156,9 @@ const ToolsFramework: React.FC = () => {
                                         ) : undefined
                                     })}
                                 </ul>
-                        </div>
                             </HideScrollbar>
-
+                        </div>
+                    </div>
                     <div className={'title'}>氮工具</div>
                 </div>
                 <div className={'right-panel'}></div>

src/router/tools.tsx

@@ -259,7 +259,23 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         name: '翻译--10-',
         icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
         menu: true,
+        auth: false,
+        children: [
+            {
+                path: '1-1',
+                id: '1-1',
+                name: '翻译1-',
+                menu: true,
                 auth: false
+            },
+            {
+                path: '2-1',
+                id: '2-1',
+                name: '翻译2-',
+                menu: true,
+                auth: false
+            }
+        ]
     }
 ]