Skip to content

Commit

Permalink
perf: improve menu group style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Carrotzpc
Carrotzpc committed Jul 29, 2024
1 parent 2ca62a6 commit 27e2cb8
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 123 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "dumi-theme-yunti",
"version": "1.1.2",
"description": "dumi-theme-yunti is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on @lobehub/ui",
"description": "dumi-theme-yunti is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on dumi-theme-lobehub and dumi-theme-antd",
"keywords": [
"yuntijs",
"dumi",
"dumi theme"
"dumi-theme"
],
"homepage": "https://github.com/yuntijs/dumi-theme-yunti",
"homepage": "https://yuntijs.github.io/dumi-theme-yunti",
"bugs": {
"url": "https://github.com/yuntijs/dumi-theme-yunti/issues/new"
},
Expand Down
18 changes: 16 additions & 2 deletions src/slots/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import { ConfigProvider, Menu, theme as antTheme } from 'antd';
import React from 'react';
import { useLocation } from 'dumi';
import React, { useMemo } from 'react';

import { useAdditionalThemeConfig } from '@/hooks/useAdditionalThemeConfig';

import { useMenu } from '../../hooks/useMenu';
import { useStyles } from './style';

const Sidebar: React.FC = () => {
const { styles } = useStyles();
const { pathname } = useLocation();
const { sidebarGroupModePath } = useAdditionalThemeConfig();
const isSideBarGroupMode = useMemo(
() =>
sidebarGroupModePath === true
? true
: (sidebarGroupModePath ?? []).some(rule => {
return pathname.startsWith(rule);
}),
[pathname, sidebarGroupModePath]
);
const { styles } = useStyles({ isSideBarGroupMode });
const { token } = antTheme.useToken();
const [menuItems, selectedKey, openKeys] = useMenu();

Expand Down
226 changes: 108 additions & 118 deletions src/slots/Sidebar/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,128 @@
import { createStyles } from 'antd-style';

export const useStyles = createStyles(({ token, css, prefixCls }) => {
return {
asideContainer: css`
min-height: 100%;
padding-bottom: 48px;
font-family: Avenir, ${token.fontFamily}, sans-serif;
&.${prefixCls}-menu-inline {
user-select: none;
&.${prefixCls}-menu-root {
border-inline-end: none;
}
.${prefixCls}-menu-submenu-title h4,
> .${prefixCls}-menu-item, .${prefixCls}-menu-item a {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
}
> .${prefixCls}-menu-item-group > .${prefixCls}-menu-item-group-title {
margin-top: 16px;
margin-bottom: 16px;
font-size: 13px;
&::after {
content: '';
position: relative;
top: 12px;
display: block;
width: calc(100% - 20px);
height: 1px;
export const useStyles = createStyles(
({ token, css, prefixCls }, { isSideBarGroupMode }: { isSideBarGroupMode: boolean }) => {
return {
asideContainer: css`
min-height: 100%;
padding-bottom: 48px;
background: ${token.colorSplit};
&.${prefixCls}-menu-inline {
user-select: none;
&.${prefixCls}-menu-root {
border-inline-end: none;
}
}
> .${prefixCls}-menu-item,
> .${prefixCls}-menu-submenu
> .${prefixCls}-menu-submenu-title,
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-title,
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-list
> .${prefixCls}-menu-item,
&.${prefixCls}-menu-inline
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-list
> .${prefixCls}-menu-item {
padding-left: 40px !important;
.${prefixCls}-row-rtl & {
padding-right: 40px !important;
padding-left: 16px !important;
.${prefixCls}-menu-submenu-title h4,
> .${prefixCls}-menu-item, .${prefixCls}-menu-item a {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
}
}
// Nest Category > Type > Article
&.${prefixCls}-menu-inline {
.${prefixCls}-menu-item-group-title {
margin-left: 4px;
padding-left: 60px;
& > .${prefixCls}-menu-item-group:not(:first-child) {
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed ${token.colorBorder};
}
.${prefixCls}-row-rtl & {
padding-right: 60px;
padding-left: 16px;
.${prefixCls}-menu-item-group:first-of-type {
.${prefixCls}-menu-item-group-title {
margin-top: 0;
}
}
.${prefixCls}-menu-item-selected {
background-color: ${token.colorFillSecondary};
}
.${prefixCls}-menu-sub.${prefixCls}-menu-inline {
background-color: unset;
}
.${prefixCls}-menu-item {
height: 40px;
line-height: 40px;
}
.${prefixCls}-menu-inline .${prefixCls}-menu-item {
height: 40px;
line-height: 40px;
}
.${prefixCls}-menu-item-group-list > .${prefixCls}-menu-item {
padding-left: 80px !important;
${!isSideBarGroupMode &&
css`
> .${prefixCls}-menu-item,
> .${prefixCls}-menu-submenu
> .${prefixCls}-menu-submenu-title,
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-title,
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-list
> .${prefixCls}-menu-item,
&.${prefixCls}-menu-inline
> .${prefixCls}-menu-item-group
> .${prefixCls}-menu-item-group-list
> .${prefixCls}-menu-item {
padding-left: 40px !important;
.${prefixCls}-row-rtl & {
padding-right: 40px !important;
padding-left: 16px !important;
}
}
.${prefixCls}-row-rtl & {
padding-right: 80px !important;
padding-left: 16px !important;
// Nest Category > Type > Article
&.${prefixCls}-menu-inline {
.${prefixCls}-menu-item-group-title {
margin-left: 4px;
padding-left: 60px;
.${prefixCls}-row-rtl & {
padding-right: 60px;
padding-left: 16px;
}
}
.${prefixCls}-menu-item-group-list > .${prefixCls}-menu-item {
padding-left: 80px !important;
.${prefixCls}-row-rtl & {
padding-right: 80px !important;
padding-left: 16px !important;
}
}
}
}
`}
}
.${prefixCls}-menu-item-group:first-of-type {
.${prefixCls}-menu-item-group-title {
margin-top: 0;
}
}
.${prefixCls}-menu-item-selected {
background-color: ${token.colorFillSecondary};
}
.${prefixCls}-menu-sub.${prefixCls}-menu-inline {
background-color: unset;
a[disabled] {
color: ${token.colorTextDisabled};
}
> .${prefixCls}-menu-item {
height: 40px;
line-height: 40px;
}
.${prefixCls}-menu-inline .${prefixCls}-menu-item {
height: 40px;
line-height: 40px;
.chinese {
margin-left: 6px;
font-size: 12px;
font-weight: normal;
opacity: 0.67;
}
}
a[disabled] {
color: ${token.colorTextDisabled};
}
.chinese {
margin-left: 6px;
font-size: 12px;
font-weight: normal;
opacity: 0.67;
}
`,
mainMenu: css`
.main-menu-inner {
scrollbar-color: unset;
scrollbar-width: thin;
position: sticky;
top: ${token.headerHeight}px;
overflow: hidden;
overflow-y: auto;
`,
mainMenu: css`
.main-menu-inner {
scrollbar-color: unset;
scrollbar-width: thin;
position: sticky;
top: ${token.headerHeight}px;
width: 100%;
height: 100%;
max-height: calc(100vh - ${token.headerHeight}px);
padding-top: 16px;
}
overflow: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
max-height: calc(100vh - ${token.headerHeight}px);
padding-top: 16px;
}
/* &:hover .main-menu-inner {
/* &:hover .main-menu-inner {
overflow-y: auto;
} */
`,
};
});
`,
};
}
);

0 comments on commit 27e2cb8

Please sign in to comment.