fix: sidebar fixed position width

ccontrols · Jun 10, 2020 · 3672ade · 3672ade
1 parent 878d2ff
commit 3672ade
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -75,7 +75,7 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
         sx={{
           position: !responsive ? 'fixed' : undefined,
           height: '100vh',
-          width: 'inherit',
+          width,
           overflowY: 'auto',
           a: {
             '&.active': {

diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
@@ -30,7 +30,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
     0,
   );
   return (
-    <Flex sx={{ flex: '1 0 auto' }}>
+    <Box sx={{ flex: '1 0 auto' }}>
       <Sidebar />
       <Box sx={{ flexGrow: 1 }} id="content">
         <Tabs
@@ -67,7 +67,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
         </Tabs>
       </Box>
       <SideContext pageRef={pageRef} />
-    </Flex>
+    </Box>
   );
 };
 

diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
@@ -61,7 +61,7 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
       <SidebarContext.Consumer>
         {({ SidebarClose, SidebarToggle, collapsed, responsive }) => (
           <div>
-            <AppSidebar width={300} minWidth={250} id="contextbar">
+            <AppSidebar width={300} id="contextbar">
               {responsive && (
                 <Header shadow={false}>
                   <SidebarClose />

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -77,7 +77,8 @@ export const SidebarBase: FC<SidebarProps> = ({
   const { SidebarClose, responsive } = useContext(SidebarContext);
   const { storeProvider } = useContext(BlockContext);
   const config = storeProvider.config;
-  const { siteTitle } = config || {};
+  const { pages = {} } = config || {};
+  const { label = '' } = pages[type];
   const menuItems = useMemo(() => {
     if (storeProvider) {
       const docs: Pages = storeProvider.getPageList(type);
@@ -110,7 +111,9 @@ export const SidebarBase: FC<SidebarProps> = ({
         </Header>
       )}
       <Flex sx={{ px: 2, flexDirection: 'column' }}>
-        <Heading as="h3">{propsTitle || siteTitle}</Heading>
+        <Heading as="h3" sx={{ textAlign: 'center', py: 2 }}>
+          {propsTitle || label}
+        </Heading>
         <Box sx={{ py: 2, px: 3 }}>
           <Input
             placeholder="filter stories..."