Optimize file name

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

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<ItemProps> = (props) => {
+const Item: React.FC<ItemProps> = (props) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
@@ -50,12 +50,12 @@ const SidebarItem: React.FC<ItemProps> = (props) => {
                 </NavLink>
             </div>
             {props.children ? (
-                <SidebarSubmenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
+                <Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
                     {props.children}
-                </SidebarSubmenu>
+                </Submenu>
             ) : undefined}
         </li>
     )
 }
 
-export default SidebarItem
+export default Item

src/components/common/Sidebar/ItemList.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+    return <ul>{props.children}</ul>
+}
+
+export default ItemList

src/components/common/Sidebar/Scroll.tsx

@@ -5,7 +5,7 @@ export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {
@@ -30,4 +30,4 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
     )
 })
 
-export default SidebarScroll
+export default Scroll

src/components/common/Sidebar/Separate.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const SidebarSeparate: React.FC<
+const Separate: React.FC<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = ({ className, ...props }) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
-export default SidebarSeparate
+export default Separate

src/components/common/Sidebar/Submenu.tsx

@@ -5,7 +5,7 @@ interface SidebarSubmenuProps extends React.PropsWithChildren {
     submenuLeft: number
 }
 
-const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
     return (
         <ul
             className={'submenu'}
@@ -19,4 +19,4 @@ const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
     )
 }
 
-export default SidebarSubmenu
+export default Submenu

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<SidebarProps> = (props) => {
+const Sidebar: React.FC<SidebarProps> & {
+    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<SidebarProps> = (props) => {
                     </span>
                     <span className={'text'}>{props.title}</span>
                 </div>
-                <SidebarSeparate style={{ marginTop: 0 }} />
+                <Separate style={{ marginTop: 0 }} />
                 <div className={'content'}>{props.children}</div>
                 <div className={'bottom-fixed'} style={{ flex: 'none' }}>
                     {props.bottomFixed}
                 </div>
-                <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
-                <SidebarFooter />
+                <Separate style={{ marginTop: 0, marginBottom: 0 }} />
+                <Footer />
             </div>
         </>
     )
 }
 
+Sidebar.Item = Item
+Sidebar.ItemList = ItemList
+Sidebar.Scroll = Scroll
+Sidebar.Separate = Separate
+Sidebar.Submenu = Submenu
+Sidebar.Footer = Footer
+
 export default Sidebar

src/components/common/sidebar_/SidebarItemList.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-const SidebarItemList: React.FC<React.PropsWithChildren> = (props) => {
-    return <ul>{props.children}</ul>
-}
-
-export default SidebarItemList