@redocly/theme 0.9.0-beta.1 → 0.9.0-beta.2

package/lib/Sidebar/MenuContainer.d.ts

@@ -1,3 +1,5 @@
-export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+interface MenuContainerProps {
+    growContent?: boolean;
+}
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
+export {};

package/lib/Sidebar/MenuContainer.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuContainer = styled_components_1.default.div.attrs(() => ({
+exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent }) => ({
     'data-component-name': 'Sidebar/MenuContainer',
+    growContent: growContent === undefined ? true : growContent,
 })) `
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;
 //# sourceMappingURL=MenuContainer.js.map

package/lib/Sidebar/SidebarLayout.d.ts

@@ -7,7 +7,9 @@ interface SidebarLayoutProps {
         slug: string;
     };
     footer?: React.ReactNode;
+    header?: React.ReactNode;
+    growContent?: boolean;
     hasNavbar: boolean;
 }
-export declare function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, footer, header, growContent, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -15,7 +15,7 @@ const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const ArrowBack_1 = require("../Sidebar/ArrowBack");
 const Link_1 = require("../mocks/Link");
 const Button_1 = require("../Button/Button");
-function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
+function SidebarLayout({ versions, menu, backLink, footer, header, growContent, hasNavbar, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -26,6 +26,7 @@ function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, hasNavbar: hasNavbar },
+            header ? react_1.default.createElement(HeaderWrapper, null, header) : null,
             (backLink && (react_1.default.createElement(BackLinkWrapper, null,
                 react_1.default.createElement(Link_1.Link, { to: backLink.slug },
                     react_1.default.createElement(ArrowBack_1.ArrowBack, null),
@@ -33,7 +34,7 @@ function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
                     backLink.label)))) ||
                 null,
             versions,
-            react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu),
+            react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
             footer ? react_1.default.createElement(FooterWrapper, null, footer) : null)));
 }
 exports.SidebarLayout = SidebarLayout;
@@ -46,6 +47,10 @@ const FooterWrapper = styled_components_1.default.div `
     margin: 0;
   }
 `;
+const HeaderWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+`;
 const BackLinkWrapper = styled_components_1.default.div `
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.0-beta.1",
+  "version": "0.9.0-beta.2",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Sidebar/MenuContainer.tsx

@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div.attrs(() => ({
+interface MenuContainerProps {
+  growContent?: boolean;
+}
+
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
   'data-component-name': 'Sidebar/MenuContainer',
-}))`
+  growContent: growContent === undefined ? true : growContent,
+}))<MenuContainerProps>`
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;

package/src/Sidebar/SidebarLayout.tsx

@@ -19,6 +19,8 @@ interface SidebarLayoutProps {
     slug: string;
   };
   footer?: React.ReactNode;
+  header?: React.ReactNode;
+  growContent?: boolean;
 
   hasNavbar: boolean;
 }
@@ -28,6 +30,8 @@ export function SidebarLayout({
   menu,
   backLink,
   footer,
+  header,
+  growContent,
   hasNavbar,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
@@ -44,6 +48,7 @@ export function SidebarLayout({
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen} hasNavbar={hasNavbar}>
+        {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
         {(backLink && (
           <BackLinkWrapper>
             <Link to={backLink.slug}>
@@ -54,7 +59,7 @@ export function SidebarLayout({
         )) ||
           null}
         {versions}
-        <MenuContainer>{menu}</MenuContainer>
+        <MenuContainer growContent={growContent}>{menu}</MenuContainer>
         {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
       </Sidebar>
     </Wrapper>
@@ -71,6 +76,11 @@ const FooterWrapper = styled.div`
   }
 `;
 
+const HeaderWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+`;
+
 const BackLinkWrapper = styled.div`
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)