on sidebar.

milesj · Aug 4, 2024 · cf28f33 · cf28f33
1 parent b7f398e
commit cf28f33
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/packages/plugin/src/components/ApiItem.tsx b/packages/plugin/src/components/ApiItem.tsx
@@ -7,7 +7,6 @@ import type { TOCItem, TSDDeclarationReflection, TSDDeclarationReflectionMap } f
 import { escapeMdx } from '../utils/helpers';
 import { getKindIconHtml } from '../utils/icons';
 import ApiItemLayout from './ApiItemLayout';
-import ApiOptionsLayout from './ApiOptionsLayout';
 import { displayPartsToMarkdown } from './Comment';
 import { Flags } from './Flags';
 import { Reflection } from './Reflection';
@@ -93,8 +92,6 @@ export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
 
 	return (
 		<ApiOptionsContext.Provider value={apiOptions}>
-			<ApiOptionsLayout />
-
 			<ApiItemLayout
 				heading={
 					<>

diff --git a/packages/plugin/src/components/ApiItemLayout.tsx b/packages/plugin/src/components/ApiItemLayout.tsx
@@ -14,6 +14,7 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import { useBreadcrumbs } from '../hooks/useBreadcrumbs';
 import type { TOCItem } from '../types';
+import ApiOptionsLayout from './ApiOptionsLayout'
 import { Footer } from './Footer';
 import { VersionBanner } from './VersionBanner';
 
@@ -54,12 +55,15 @@ export default function ApiItemLayout({
 							<DocVersionBadge />
 
 							{canRenderTOC && (
-								<TOCCollapsible
-									className={`${ThemeClassNames.docs.docTocMobile ?? ''} apiTocMobile`}
-									maxHeadingLevel={6}
-									minHeadingLevel={1}
-									toc={toc}
-								/>
+								<>
+									{!renderTocDesktop && <ApiOptionsLayout className="tsd-api-options-mobile" />}
+									<TOCCollapsible
+										className={`${ThemeClassNames.docs.docTocMobile ?? ''} apiTocMobile`}
+										maxHeadingLevel={6}
+										minHeadingLevel={1}
+										toc={toc}
+									/>
+								</>
 							)}
 
 							<div className={`${ThemeClassNames.docs.docMarkdown ?? ''} markdown`}>
@@ -79,6 +83,7 @@ export default function ApiItemLayout({
 
 				{renderTocDesktop && (
 					<div className="col col--3">
+						<ApiOptionsLayout className="tsd-api-options" />
 						<TOC
 							className={ThemeClassNames.docs.docTocDesktop}
 							maxHeadingLevel={6}

diff --git a/packages/plugin/src/components/ApiOptionsLayout.tsx b/packages/plugin/src/components/ApiOptionsLayout.tsx
@@ -1,20 +1,21 @@
 import { useCallback, useContext } from 'react';
 import { ApiOptionsContext } from './ApiItem';
 
-export default function ApiOptionsLayout() {
+export default function ApiOptionsLayout({ className }: { className: string }) {
   const { hideInherited, setHideInherited } = useContext(ApiOptionsContext);
   const handleHideInherited = useCallback(() => {
     setHideInherited(!hideInherited);
   }, [hideInherited, setHideInherited]);
 
   return (
     <>
-      <div className="tsd-api-options">
+      <div className={className}>
         <div><b>Page Options</b></div>
         <label>
           <input checked={hideInherited} type="checkbox" onChange={handleHideInherited} />
           <span>Hide Inherited</span>
         </label>
+        <div />
       </div>
     </>
   );

diff --git a/packages/plugin/src/components/styles.css b/packages/plugin/src/components/styles.css
@@ -7,20 +7,48 @@
 }
 
 .tsd-api-options {
-	border-bottom: 1px solid #eee;
+	border-left: 1px solid var(--ifm-toc-border-color);
 	font-size: var(--tsd-font-small);
-	margin-bottom: 10px;
-	margin-right: 10px;
-	padding-bottom: 10px;
-	text-align: right;
+	padding-left: var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options > div:first-child {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options > label {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
 }
 .tsd-api-options > label > input {
-	margin-right: 5px;
+	margin: 0 5px 0 0;
 	vertical-align: middle;
 }
 .tsd-api-options > label > span {
 	vertical-align: middle;
 }
+.tsd-api-options > div:last-child {
+	border-bottom: 1px solid var(--ifm-toc-border-color);
+	margin-top: 1rem;
+}
+
+.tsd-api-options-mobile {
+	font-size: var(--tsd-font-small);
+}
+.tsd-api-options-mobile > div:first-child {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options-mobile > label {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options-mobile > label > input {
+	margin: 0 5px 0 0;
+	vertical-align: middle;
+}
+.tsd-api-options-mobile > label > span {
+	vertical-align: middle;
+}
+.tsd-api-options-mobile > div:last-child {
+	border-bottom: 1px solid var(--ifm-toc-border-color);
+	margin-top: 1rem;
+}
 
 .tsd-panel {
 	border: 1px solid var(--ifm-card-background-color);