DocPageLayoutAsideExpandButton refactor

facebook · Apr 29, 2022 · c5b1c58 · c5b1c58
1 parent 802aa4b
commit c5b1c58
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.module.css
@@ -6,7 +6,7 @@
  */
 
 @media (min-width: 997px) {
-  .collapsedDocSidebar {
+  .expandButton {
     position: sticky;
     top: 0;
     height: 100%;
@@ -17,21 +17,21 @@
     transition: background-color var(--ifm-transition-fast) ease;
   }
 
-  .collapsedDocSidebar:hover,
-  .collapsedDocSidebar:focus {
+  .expandButton:hover,
+  .expandButton:focus {
     background-color: var(--ifm-color-emphasis-200);
   }
 
-  .expandSidebarButtonIcon {
+  .expandButtonIcon {
     transform: rotate(0);
   }
 
-  [dir='rtl'] .expandSidebarButtonIcon {
+  [dir='rtl'] .expandButtonIcon {
     transform: rotate(180deg);
   }
 
-  [data-theme='dark'] .collapsedDocSidebar:hover,
-  [data-theme='dark'] .collapsedDocSidebar:focus {
+  [data-theme='dark'] .expandButton:hover,
+  [data-theme='dark'] .expandButton:focus {
     background-color: var(--collapse-button-bg-color-dark);
   }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Aside/ExpandButton.tsx
@@ -10,14 +10,14 @@ import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/DocPage/Layout/Aside/ExpandButton';
 
-import styles from '../index.module.css';
+import styles from './ExpandButton.module.css';
 
 export default function DocPageLayoutAsideExpandButton({
   toggleSidebar,
 }: Props): JSX.Element {
   return (
     <div
-      className={styles.collapsedDocSidebar}
+      className={styles.expandButton}
       title={translate({
         id: 'theme.docs.sidebar.expandButtonTitle',
         message: 'Expand sidebar',
@@ -34,7 +34,7 @@ export default function DocPageLayoutAsideExpandButton({
       role="button"
       onKeyDown={toggleSidebar}
       onClick={toggleSidebar}>
-      <IconArrow className={styles.expandSidebarButtonIcon} />
+      <IconArrow className={styles.expandButtonIcon} />
     </div>
   );
 }