diff --git a/src/components/common/sidebar_/SidebarFooter.tsx b/src/components/common/Sidebar/Footer.tsx similarity index 97% rename from src/components/common/sidebar_/SidebarFooter.tsx rename to src/components/common/Sidebar/Footer.tsx index 196686f..64e0901 100644 --- a/src/components/common/sidebar_/SidebarFooter.tsx +++ b/src/components/common/Sidebar/Footer.tsx @@ -6,7 +6,7 @@ import { useUpdatedEffect } from '@/util/hooks' import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth' import { r_auth_logout } from '@/services/auth' -const SidebarFooter: React.FC = () => { +const Footer: React.FC = () => { const matches = useMatches() const lastMatch = matches.reduce((_, second) => second) const location = useLocation() @@ -94,4 +94,4 @@ const SidebarFooter: React.FC = () => { ) } -export default SidebarFooter +export default Footer diff --git a/src/components/common/sidebar_/SidebarItem.tsx b/src/components/common/Sidebar/Item.tsx similarity index 87% rename from src/components/common/sidebar_/SidebarItem.tsx rename to src/components/common/Sidebar/Item.tsx index 6289ac2..87bd2ea 100644 --- a/src/components/common/sidebar_/SidebarItem.tsx +++ b/src/components/common/Sidebar/Item.tsx @@ -1,6 +1,6 @@ import React from 'react' import Icon from '@ant-design/icons' -import SidebarSubmenu from '@/components/common/sidebar_/SidebarSubmenu' +import Submenu from '@/components/common/Sidebar/Submenu' type ItemProps = { icon?: IconComponent @@ -10,7 +10,7 @@ type ItemProps = { end?: boolean } -const SidebarItem: React.FC = (props) => { +const Item: React.FC = (props) => { const [submenuTop, setSubmenuTop] = useState(0) const [submenuLeft, setSubmenuLeft] = useState(0) @@ -50,12 +50,12 @@ const SidebarItem: React.FC = (props) => { {props.children ? ( - + {props.children} - + ) : undefined} ) } -export default SidebarItem +export default Item diff --git a/src/components/common/Sidebar/ItemList.tsx b/src/components/common/Sidebar/ItemList.tsx new file mode 100644 index 0000000..661e94d --- /dev/null +++ b/src/components/common/Sidebar/ItemList.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const ItemList: React.FC = (props) => { + return
    {props.children}
+} + +export default ItemList diff --git a/src/components/common/sidebar_/SidebarScroll.tsx b/src/components/common/Sidebar/Scroll.tsx similarity index 86% rename from src/components/common/sidebar_/SidebarScroll.tsx rename to src/components/common/Sidebar/Scroll.tsx index 4a7c8d7..6fc0c1f 100644 --- a/src/components/common/sidebar_/SidebarScroll.tsx +++ b/src/components/common/Sidebar/Scroll.tsx @@ -5,7 +5,7 @@ export interface SidebarScrollElement { refreshLayout(): void } -const SidebarScroll = forwardRef((props, ref) => { +const Scroll = forwardRef((props, ref) => { useImperativeHandle(ref, () => { return { refreshLayout() { @@ -30,4 +30,4 @@ const SidebarScroll = forwardRef( ) }) -export default SidebarScroll +export default Scroll diff --git a/src/components/common/sidebar_/SidebarSeparate.tsx b/src/components/common/Sidebar/Separate.tsx similarity index 78% rename from src/components/common/sidebar_/SidebarSeparate.tsx rename to src/components/common/Sidebar/Separate.tsx index 84070ef..6e626e7 100644 --- a/src/components/common/sidebar_/SidebarSeparate.tsx +++ b/src/components/common/Sidebar/Separate.tsx @@ -1,9 +1,9 @@ import React from 'react' -const SidebarSeparate: React.FC< +const Separate: React.FC< React.DetailedHTMLProps, HTMLDivElement> > = ({ className, ...props }) => { return
} -export default SidebarSeparate +export default Separate diff --git a/src/components/common/sidebar_/SidebarSubmenu.tsx b/src/components/common/Sidebar/Submenu.tsx similarity index 80% rename from src/components/common/sidebar_/SidebarSubmenu.tsx rename to src/components/common/Sidebar/Submenu.tsx index ed2039b..6d7afdc 100644 --- a/src/components/common/sidebar_/SidebarSubmenu.tsx +++ b/src/components/common/Sidebar/Submenu.tsx @@ -5,7 +5,7 @@ interface SidebarSubmenuProps extends React.PropsWithChildren { submenuLeft: number } -const SidebarSubmenu: React.FC = (props) => { +const Submenu: React.FC = (props) => { return (
    = (props) => { ) } -export default SidebarSubmenu +export default Submenu diff --git a/src/components/common/sidebar_/index.tsx b/src/components/common/Sidebar/index.tsx similarity index 62% rename from src/components/common/sidebar_/index.tsx rename to src/components/common/Sidebar/index.tsx index 96e3a90..f12716b 100644 --- a/src/components/common/sidebar_/index.tsx +++ b/src/components/common/Sidebar/index.tsx @@ -2,8 +2,12 @@ import React from 'react' import Icon from '@ant-design/icons' import '@/assets/css/components/common/sidebar.scss' import { getLocalStorage, setLocalStorage } from '@/util/browser' -import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate' -import SidebarFooter from '@/components/common/sidebar_/SidebarFooter' +import Item from '@/components/common/Sidebar/Item' +import ItemList from '@/components/common/Sidebar/ItemList' +import Scroll from '@/components/common/Sidebar/Scroll' +import Separate from '@/components/common/Sidebar/Separate' +import Submenu from '@/components/common/Sidebar/Submenu' +import Footer from '@/components/common/Sidebar/Footer' interface SidebarProps extends React.PropsWithChildren { title: string @@ -12,7 +16,14 @@ interface SidebarProps extends React.PropsWithChildren { bottomFixed?: React.ReactNode } -const Sidebar: React.FC = (props) => { +const Sidebar: React.FC & { + Item: typeof Item + ItemList: typeof ItemList + Scroll: typeof Scroll + Separate: typeof Separate + Submenu: typeof Submenu + Footer: typeof Footer +} = (props) => { const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true') const switchSidebar = () => { @@ -33,16 +44,23 @@ const Sidebar: React.FC = (props) => { {props.title}
- +
{props.children}
{props.bottomFixed}
- - + +