@redocly/theme 0.6.2 → 0.6.3-beta.1

package/lib/Navbar/MobileNavbarMenu.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ResolvedConfigLinks } from '@theme/types/portal';
-export declare function MobileNavbarMenu({ menuItems, closeMenu, }: {
+export declare function MobileNavbarMenu({ menuItems, closeMenu, search, }: {
     menuItems: ResolvedConfigLinks;
+    search: React.ReactNode | undefined;
     closeMenu: () => void;
 }): JSX.Element | null;

package/lib/Navbar/MobileNavbarMenu.js

@@ -10,14 +10,16 @@ const NavbarItem_1 = require("../Navbar/NavbarItem");
 const MobileNavbarItem_1 = require("../Navbar/MobileNavbarItem");
 const NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
 const utils_1 = require("../utils");
-function MobileNavbarMenu({ menuItems, closeMenu, }) {
+function MobileNavbarMenu({ menuItems, closeMenu, search, }) {
     if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
-        react_1.default.createElement(NavbarItemsContainer, null, menuItems.map((navItem, index) => {
-            return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
-        })),
+        react_1.default.createElement(NavbarItemsContainer, null,
+            react_1.default.createElement(MobileSearchWrapper, null, search || null),
+            menuItems.map((navItem, index) => {
+                return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+            })),
         react_1.default.createElement(NavbarItemsClosableArea, { onClick: closeMenu })));
 }
 exports.MobileNavbarMenu = MobileNavbarMenu;
@@ -89,4 +91,14 @@ const NavbarItemsContainer = styled_components_1.default.ul `
     position: relative;
   }
 `;
+const MobileSearchWrapper = styled_components_1.default.div `
+  padding: var(--navbar-item-padding-horizontal);
+  > div {
+    display: block;
+    width: 100%;
+  }
+  input {
+    width: 100%;
+  }
+`;
 //# sourceMappingURL=MobileNavbarMenu.js.map

package/lib/Navbar/Navbar.js

@@ -23,7 +23,7 @@ function Navbar({ menu, logo, search, profile }) {
     const closeMobileMenu = () => setIsOpen(false);
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
-        isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
+        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu, search: hideSearch ? null : search })),
         react_1.default.createElement(exports.NavbarRow, null,
             logo,
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
@@ -33,6 +33,8 @@ function Navbar({ menu, logo, search, profile }) {
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav `
+  --text-color: var(--navbar-text-color);
+
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;

package/lib/Profile/Profile.js

@@ -51,6 +51,11 @@ const ProfileWrapper = styled_components_1.default.div `
 `;
 const StyledUserName = styled_components_1.default.span `
   color: ${({ color }) => color || 'var(--navbar-text-color)'};
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: block;
+  }
 `;
 const AvatarWrapper = styled_components_1.default.div `
   width: 40px;

package/lib/Search/Autocomplete.js

@@ -48,6 +48,7 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
     const stopPropagation = (event) => event.stopPropagation();
     const onChange = (event) => {
         setActiveIdx(-1);
+        setIsOpen(true);
         change(event.target.value);
     };
     const onKeydown = (event) => {

package/lib/Search/Popover.js

@@ -13,7 +13,6 @@ exports.Popover = styled_components_1.default.div.attrs(() => ({
   right: 0;
   z-index: 100;
   min-width: 100%;
-  width: 550px;
   max-width: 90vw;
   max-height: 400px;
   overflow-y: auto;
@@ -22,5 +21,14 @@ exports.Popover = styled_components_1.default.div.attrs(() => ({
   list-style: none;
   border-radius: var(--search-popover-border-radius);
   border: var(--search-popover-border);
+  width: 100%;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    width: 400px;
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    width: 550px;
+  }
 `;
 //# sourceMappingURL=Popover.js.map

package/lib/Search/Search.js

@@ -1,10 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = void 0;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const search_1 = require("../mocks/search");
@@ -17,11 +40,21 @@ function Search() {
     const { query, setQuery, items } = (0, search_1.useFuseSearch)();
     // TODO: ask somebody about typings
     const navigate = (item) => history.push(item.url);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search" },
-        react_1.default.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(SearchIcon_1.SearchIcon, null)))));
+    const renderAutocomplete = () => (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? React.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : React.createElement(SearchIcon_1.SearchIcon, null))));
+    return React.createElement(Wrapper, { "data-component-name": "Search/Search" }, renderAutocomplete());
 }
 exports.Search = Search;
 const Wrapper = styled_components_1.default.div `
-  margin: 0 auto;
+  margin-left: auto;
+
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    display: block;
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    margin: 0 auto;
+  }
 `;
 //# sourceMappingURL=Search.js.map

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
+    backLink?: {
+        label: string;
+        slug: string;
+    };
 }
-export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -12,7 +12,9 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-function SidebarLayout({ versions, menu }) {
+const ArrowBack_1 = require("../Sidebar/ArrowBack");
+const Link_1 = require("../mocks/Link");
+function SidebarLayout({ versions, menu, backLink, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -23,9 +25,32 @@ function SidebarLayout({ versions, menu }) {
         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 },
+            (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),
+                    "Back to ",
+                    backLink.label)))) ||
+                null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
 }
 exports.SidebarLayout = SidebarLayout;
+const BackLinkWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/globalStyle.js

@@ -512,7 +512,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;

package/lib/ui/Burger.js

@@ -14,7 +14,8 @@ function BurgerComponent({ onClick, className }) {
 }
 const Button = styled_components_1.default.button `
   all: unset;
-  max-width: 30px;
+  max-width: 20px;
+  min-width: 20px;
   width: 100%;
   min-width: 10px;
   display: block;
@@ -24,7 +25,7 @@ const Line = styled_components_1.default.div `
   margin: 4px 0;
   width: 100%;
   height: 2px;
-  background: #fff;
+  background: var(--text-color);
   border-radius: 1px;
 `;
 exports.Burger = (0, styled_components_1.default)(BurgerComponent) ``;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.2",
+  "version": "0.6.3-beta.1",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -115,7 +115,10 @@
         ]
       },
       "test": {
-        "outputs": []
+        "outputs": [
+          "{projectRoot}/coverage",
+          "{projectRoot}/report.json"
+        ]
       }
     }
   }

package/src/Navbar/MobileNavbarMenu.tsx

@@ -10,8 +10,10 @@ import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 export function MobileNavbarMenu({
   menuItems,
   closeMenu,
+  search,
 }: {
   menuItems: ResolvedConfigLinks;
+  search: React.ReactNode | undefined;
   closeMenu: () => void;
 }): JSX.Element | null {
   if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
@@ -21,6 +23,7 @@ export function MobileNavbarMenu({
   return (
     <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
       <NavbarItemsContainer>
+        <MobileSearchWrapper>{search || null}</MobileSearchWrapper>
         {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
           return (
             <MobileNavbarItem
@@ -106,3 +109,14 @@ const NavbarItemsContainer = styled.ul`
     position: relative;
   }
 `;
+
+const MobileSearchWrapper = styled.div`
+  padding: var(--navbar-item-padding-horizontal);
+  > div {
+    display: block;
+    width: 100%;
+  }
+  input {
+    width: 100%;
+  }
+`;

package/src/Navbar/Navbar.tsx

@@ -32,7 +32,13 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
       <MobileNavbarMenuButton onClick={openMobileMenu} />
-      {isOpen && <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu} />}
+      {isOpen && (
+        <MobileNavbarMenu
+          closeMenu={closeMobileMenu}
+          menuItems={menu}
+          search={hideSearch ? null : search}
+        />
+      )}
       <NavbarRow>
         {logo}
         <NavbarMenu menuItems={menu} />
@@ -45,6 +51,8 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
 }
 
 export const NavbarContainer = styled.nav`
+  --text-color: var(--navbar-text-color);
+
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;

package/src/Profile/Profile.tsx

@@ -54,6 +54,11 @@ const ProfileWrapper = styled.div`
 
 const StyledUserName = styled.span`
   color: ${({ color }) => color || 'var(--navbar-text-color)'};
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    display: block;
+  }
 `;
 
 const AvatarWrapper = styled.div<{ background?: string }>`

package/src/Search/Autocomplete.tsx

@@ -46,6 +46,7 @@ export function Autocomplete<T>({
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     setActiveIdx(-1);
+    setIsOpen(true);
     change(event.target.value);
   };
 

package/src/Search/Popover.tsx

@@ -8,7 +8,6 @@ export const Popover = styled.div.attrs(() => ({
   right: 0;
   z-index: 100;
   min-width: 100%;
-  width: 550px;
   max-width: 90vw;
   max-height: 400px;
   overflow-y: auto;
@@ -17,4 +16,13 @@ export const Popover = styled.div.attrs(() => ({
   list-style: none;
   border-radius: var(--search-popover-border-radius);
   border: var(--search-popover-border);
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    width: 400px;
+  }
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    width: 550px;
+  }
 `;

package/src/Search/Search.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { usePreloadHistory } from '@portal/usePreloadHistory';
@@ -33,22 +33,32 @@ export function Search(): JSX.Element {
   // TODO: ask somebody about typings
   const navigate = (item: SearchDocument) => history.push(item.url);
 
-  return (
-    <Wrapper data-component-name="Search/Search">
-      <Autocomplete
-        items={items}
-        value={query}
-        change={setQuery}
-        select={navigate}
-        placeholder="Search the docs"
-        renderItem={(item) => <SearchItem key={item.id} item={item} />}
-      >
-        {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
-      </Autocomplete>
-    </Wrapper>
+  const renderAutocomplete = () => (
+    <Autocomplete
+      items={items}
+      value={query}
+      change={setQuery}
+      select={navigate}
+      placeholder="Search the docs"
+      renderItem={(item) => <SearchItem key={item.id} item={item} />}
+    >
+      {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
+    </Autocomplete>
   );
+
+  return <Wrapper data-component-name="Search/Search">{renderAutocomplete()}</Wrapper>;
 }
 
 const Wrapper = styled.div`
-  margin: 0 auto;
+  margin-left: auto;
+
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    display: block;
+  }
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    margin: 0 auto;
+  }
 `;

package/src/Sidebar/ArrowBack.tsx

@@ -7,7 +7,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 10"
-      width="12px"
+      width="10px"
       height="10px"
       className={className}
     >
@@ -19,7 +19,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/Sidebar/SidebarLayout.tsx

@@ -7,13 +7,23 @@ import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { ArrowBack } from '@theme/Sidebar/ArrowBack';
+import { Link } from '@portal/Link';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
   menu: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({
+  versions,
+  menu,
+  backLink,
+}: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -28,6 +38,15 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
+        {(backLink && (
+          <BackLinkWrapper>
+            <Link to={backLink.slug}>
+              <ArrowBack />
+              Back to {backLink.label}
+            </Link>
+          </BackLinkWrapper>
+        )) ||
+          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -35,4 +54,22 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
   );
 }
 
+const BackLinkWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
+
 const Wrapper = styled.div``;

package/src/globalStyle.ts

@@ -517,7 +517,7 @@ const sidebar = css`
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;

package/src/types/portal/src/shared/types/nav.d.ts

@@ -77,7 +77,7 @@ export interface PageStaticData {
   [k: string]: unknown;
 }
 export declare type UserData = {
-  isAuthorized: boolean;
+  isAuthenticated: boolean;
   name: string;
   picture: string;
 };

package/src/ui/Burger.tsx

@@ -20,7 +20,8 @@ function BurgerComponent({ onClick, className }: BurgerProps): JSX.Element {
 
 const Button = styled.button`
   all: unset;
-  max-width: 30px;
+  max-width: 20px;
+  min-width: 20px;
   width: 100%;
   min-width: 10px;
   display: block;
@@ -31,7 +32,7 @@ const Line = styled.div`
   margin: 4px 0;
   width: 100%;
   height: 2px;
-  background: #fff;
+  background: var(--text-color);
   border-radius: 1px;
 `;