@redocly/theme 0.15.1 → 0.16.0

package/src/icons/CloseIcon/index.ts

@@ -0,0 +1 @@
+export { CloseIcon } from '@theme/icons/CloseIcon/CloseIcon';

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -47,7 +47,11 @@ function Icon({ mode, className }: ColorModeIconProps) {
 export const ColorModeIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
 }))`
-  width: var(--navbar-item-font-size);
+  width: var(--mobile-menu-icons-size);
   box-sizing: border-box;
   fill: var(--navbar-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--navbar-item-font-size);
+  }
 `;

package/src/icons/ExpandIcon/ExpandIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ArrowIconProps {
+  direction?: 'up' | 'right' | 'left' | 'down';
+  visibility?: 'visible' | 'hidden';
+}
+
+function directionToTransform({ direction }: ArrowIconProps) {
+  switch (direction) {
+    case 'up':
+      return 180;
+    case 'right':
+      return -90;
+    case 'left':
+      return 90;
+    default:
+      return 0;
+  }
+}
+
+const Icon = ({ className }: { className?: string }) => (
+  <span data-component-name="icons/ExpandIcon/ExpandIcon">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z"
+        fill="inherit"
+      />
+    </svg>
+  </span>
+);
+
+export const ExpandIcon = styled(Icon)`
+  fill: var(--sidebar-group-item-chevron-color);
+  transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
+
+  vertical-align: middle;
+`;

package/src/icons/ExpandIcon/index.ts

@@ -0,0 +1 @@
+export { ExpandIcon } from '@theme/icons/ExpandIcon/ExpandIcon';

package/src/icons/LogoutIcon/LogoutIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="18" height="18" transform="translate(11 11)" />
+    <path
+      d="M14.375 27.875H21.125C21.4233 27.8747 21.7092 27.756 21.9201 27.5451C22.131 27.3342 22.2497 27.0483 22.25 26.75V25.0625H21.125V26.75H14.375V13.25H21.125V14.9375H22.25V13.25C22.2497 12.9517 22.131 12.6658 21.9201 12.4549C21.7092 12.244 21.4233 12.1253 21.125 12.125H14.375C14.0767 12.1253 13.7908 12.244 13.5799 12.4549C13.369 12.6658 13.2503 12.9517 13.25 13.25V26.75C13.2503 27.0483 13.369 27.3342 13.5799 27.5451C13.7908 27.756 14.0767 27.8747 14.375 27.875Z"
+      fill="#FF4D6D"
+    />
+    <path
+      d="M22.5796 22.5796L24.5968 20.5625H16.625V19.4375H24.5968L22.5796 17.4204L23.375 16.625L26.75 20L23.375 23.375L22.5796 22.5796Z"
+      fill="#FF4D6D"
+    />
+  </svg>
+);
+
+export const LogoutIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/LogoutIcon/LogoutIcon',
+}))``;

package/src/icons/LogoutIcon/index.ts

@@ -0,0 +1 @@
+export { LogoutIcon } from '@theme/icons/LogoutIcon/LogoutIcon';

package/src/icons/index.ts

@@ -5,3 +5,7 @@ export * from '@theme/icons/ColorModeIcon';
 export * from '@theme/icons/AnchorIcon';
 export * from '@theme/icons/ExternalIcon';
 export * from '@theme/icons/SpinnerIcon';
+export * from '@theme/icons/BurgerIcon';
+export * from '@theme/icons/CloseIcon';
+export * from '@theme/icons/LogoutIcon';
+export * from '@theme/icons/ExpandIcon';

package/src/mocks/Sidebar/useSidebarItems.tsx

@@ -0,0 +1,7 @@
+import type { ItemState } from '../../components/Sidebar/types';
+
+import type { Version } from '@theme/types/portal';
+
+export function useSidebarItems(_?: Version): ItemState[] {
+  return [];
+}

package/src/mocks/hooks/index.ts

@@ -1,5 +1,5 @@
 import type { ThemeUIConfig } from '@theme/config';
-import type { ResolvedNavItem, TFunction } from '@theme/types/portal';
+import type { ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
 import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
@@ -95,3 +95,18 @@ export function useI18nConfig() {
     locales: [{ code: 'en', name: 'en' }],
   };
 }
+
+export function usePageVersions(): { versions: Version[] } {
+  return {
+    versions: [
+      {
+        version: '1.0',
+        label: 'First',
+        link: '',
+        default: true,
+        active: true,
+        folderId: 'id',
+      },
+    ],
+  };
+}

package/src/mocks/media-css.ts

@@ -0,0 +1 @@
+export const breakpoints = { small: '550px', medium: '900px', large: '1200px' };

package/src/ui/Dropdown.tsx

@@ -49,7 +49,7 @@ const DropDownList = styled.div`
   padding: 0;
   border-radius: 4px;
   border: 1px solid var(--border-color);
-  z-index: 9999;
+  z-index: var(--z-index-popover);
   left: 0;
   right: 0;
 `;

package/src/ui/darkColors.tsx

@@ -5,9 +5,17 @@ export const darkMode = css`
      * @tokens Dark Colors
      * @presenter Color
      */
-  --background-color: #0d1117;
-  --footer-background-color: #16202e;
-  --navbar-background-color: #16202e;
+  --background-color: #141414;
+  --footer-background-color: #1F1F1F;
+  --navbar-background-color: #1F1F1F;
+  --mobile-menu-background: #141414;
+  --mobile-menu-profile-background: var(--mobile-menu-background);
+  --mobile-menu-login-button-background: var(--mobile-menu-profile-background); rgba(255, 255, 255, 0.6);
+  --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
+  --mobile-menu-item-active-color: #1F1F1F;
+  --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
+  --mobile-menu-control-button-color: #ffffff;
+  --mobile-menu-profile-border-color: #222222;
   --color-primary-500: #57a5fd;
   --color-primary-300: #15396e;
   --color-secondary-300: #22262e;

package/lib/components/Navbar/MobileNavbarDropdown.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { ResolvedNavLinkItem } from '../../types/portal';
-interface NavbarDropdownProps {
-    items: ResolvedNavLinkItem[];
-}
-export declare function MobileNavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
-export declare const MobileDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/lib/components/Navbar/MobileNavbarDropdown.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileDropdownWrapper = exports.MobileNavbarDropdown = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
-function MobileNavbarDropdown({ items }) {
-    return (react_1.default.createElement(exports.MobileDropdownWrapper, { "data-component-name": "Navbar/MobileNavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
-        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))));
-}
-exports.MobileNavbarDropdown = MobileNavbarDropdown;
-exports.MobileDropdownWrapper = styled_components_1.default.div `
-  padding: 0 15px;
-  width: max-content;
-  transition: all 0.2s ease-in-out;
-  overflow: hidden;
-  box-shadow: var(--navbar-dropdown-shadow);
-  & > div {
-    padding: 10px 0;
-    cursor: pointer;
-    a {
-      color: var(--navbar-text-color);
-      text-decoration: none;
-    }
-  }
-`;
-//# sourceMappingURL=MobileNavbarDropdown.js.map

package/lib/components/Navbar/MobileNavbarItem.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { Link } from '../../mocks/Link';
-import type { ResolvedNavItem } from '../../types/portal';
-export interface NavbarItemProps {
-    navItem: ResolvedNavItem;
-    className?: string;
-}
-export declare function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavMenuItem: import("styled-components").StyledComponent<"li", any, {
-    active?: boolean | undefined;
-}, never>;
-export declare const NavMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
-    expanded: boolean;
-}, never>;
-export declare const NavLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;

package/lib/components/Navbar/MobileNavbarItem.js

@@ -1,110 +0,0 @@
-"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.NavLink = exports.NavMenuItemWithDropdownWrapper = exports.NavMenuItem = exports.MobileNavbarItem = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
-const Link_1 = require("../../mocks/Link");
-const hooks_1 = require("../../mocks/hooks");
-const utils_1 = require("../../mocks/utils");
-const utils_2 = require("../../utils");
-const MobileNavbarDropdown_1 = require("./MobileNavbarDropdown");
-function MobileNavbarItem({ navItem, className }) {
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    const [expandedDropdown, setExpandedDropdown] = (0, react_1.useState)(false);
-    const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
-    const { defaultLocale, currentLocale, locales } = (0, hooks_1.useI18nConfig)();
-    if (navItem.link) {
-        const item = navItem;
-        const isActive = pathname ===
-            (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
-        return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/MobileNavbarItem", className: className },
-            react_1.default.createElement(exports.NavLink, { to: item.link, active: isActive },
-                react_1.default.createElement(NavLabel, null, item.label))));
-    }
-    if (navItem.items) {
-        const item = navItem;
-        return (react_1.default.createElement(exports.NavMenuItemWithDropdownWrapper, { expanded: expandedDropdown },
-            react_1.default.createElement(exports.NavMenuItem, { active: false, onClick: toggleDropdown, "data-component-name": "Navbar/MobileNavbarItem", className: className },
-                react_1.default.createElement(NavLabel, null, item.label),
-                react_1.default.createElement(ExpandedArrow, null)),
-            react_1.default.createElement(MobileNavbarDropdown_1.MobileNavbarDropdown, { items: item.items })));
-    }
-    return null;
-}
-exports.MobileNavbarItem = MobileNavbarItem;
-const ExpandedArrow = styled_components_1.default.div `
-  width: 5px;
-  height: 5px;
-  border: 1px solid;
-  border-left: none;
-  border-top: none;
-  transition: all 0.3s ease-out;
-`;
-exports.NavMenuItem = styled_components_1.default.li `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--navbar-item-padding-horizontal);
-  text-align: left;
-  line-height: 1;
-  font-size: var(--navbar-item-font-size);
-  font-weight: var(--navbar-item-font-weight);
-  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-  }
-`;
-exports.NavMenuItemWithDropdownWrapper = styled_components_1.default.div `
-  display: inline-block;
-  position: relative;
-  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-
-  ${ExpandedArrow} {
-    transform: rotate(${({ expanded }) => (expanded ? '' : '-')}45deg);
-  }
-
-  ${MobileNavbarDropdown_1.MobileDropdownWrapper} {
-    height: ${({ expanded }) => (expanded ? '100%' : '0')};
-    opacity: ${({ expanded }) => (expanded ? '1' : '0')};
-  }
-
-  ${exports.NavMenuItem} {
-    border-bottom: none;
-  }
-`;
-exports.NavLink = (0, styled_components_1.default)(Link_1.Link) `
-  color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
-  text-decoration: ${({ active }) => active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
-`;
-const NavLabel = styled_components_1.default.span `
-  cursor: pointer;
-  vertical-align: middle;
-`;
-//# sourceMappingURL=MobileNavbarItem.js.map

package/lib/components/Navbar/MobileNavbarMenu.d.ts

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

package/lib/components/Navbar/MobileNavbarMenu.js

@@ -1,92 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavbarMenu = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
-const MobileNavbarItem_1 = require("../../components/Navbar/MobileNavbarItem");
-const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
-const utils_1 = require("../../utils");
-function MobileNavbarMenu({ menuItems, closeMenu, }) {
-    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(NavbarItemsClosableArea, { onClick: closeMenu })));
-}
-exports.MobileNavbarMenu = MobileNavbarMenu;
-const NavbarItemsWrapper = styled_components_1.default.div `
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  z-index: 201; //more than Search
-  left: 0;
-  top: 0;
-  overflow-x: hidden;
-  transition: 0.5s;
-  display: flex;
-  ${NavbarDropdown_1.DropdownWrapper} {
-    & > div {
-      text-align: center;
-      padding: 10px 0;
-      cursor: pointer;
-      a {
-        color: var(--navbar-text-color);
-        text-decoration: none;
-      }
-      :hover {
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-const NavbarItemsClosableArea = styled_components_1.default.div `
-  display: flex;
-  flex: 1;
-  min-width: 50px;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.4);
-`;
-const NavbarItemsContainer = styled_components_1.default.ul `
-  width: 70%;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--navbar-background-color);
-
-  ${NavbarItem_1.NavbarMenuItem} {
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-    }
-    border-radius: 0;
-    padding: 1em 0;
-    width: 100%;
-  }
-
-  ${NavbarItem_1.NavbarMenuItemWithDropdownWrapper} {
-    display: block;
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-      border-radius: 0;
-    }
-    ${NavbarItem_1.NavbarMenuItem} {
-      border-bottom: none;
-    }
-  }
-
-  ${NavbarDropdown_1.DropdownWrapper} {
-    background-color: var(--navbar-background-color);
-    width: 100%;
-    padding: 0;
-    position: relative;
-  }
-`;
-//# sourceMappingURL=MobileNavbarMenu.js.map

package/lib/components/Navbar/MobileNavbarMenuButton.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const MobileNavbarMenuButton: import("styled-components").StyledComponent<({ onClick, className }: import("../../ui/Burger").BurgerProps) => JSX.Element, any, {
-    'data-component-name': string;
-}, "data-component-name">;

package/lib/components/Navbar/MobileNavbarMenuButton.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavbarMenuButton = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const Burger_1 = require("../../ui/Burger");
-exports.MobileNavbarMenuButton = (0, styled_components_1.default)(Burger_1.Burger).attrs(() => ({
-    'data-component-name': 'Navbar/MobileNavbarMenuButton',
-})) `
-  display: block;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    display: none;
-  }
-`;
-//# sourceMappingURL=MobileNavbarMenuButton.js.map

package/src/components/Navbar/MobileNavbarDropdown.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-
-interface NavbarDropdownProps {
-  items: ResolvedNavLinkItem[];
-}
-
-export function MobileNavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
-  return (
-    <MobileDropdownWrapper data-component-name="Navbar/MobileNavbarDropdown">
-      {items.map((item, index) => (
-        <div key={`${item.label}_${index}`}>
-          <Link to={item.link}>{item.label}</Link>
-        </div>
-      ))}
-    </MobileDropdownWrapper>
-  );
-}
-
-export const MobileDropdownWrapper = styled.div`
-  padding: 0 15px;
-  width: max-content;
-  transition: all 0.2s ease-in-out;
-  overflow: hidden;
-  box-shadow: var(--navbar-dropdown-shadow);
-  & > div {
-    padding: 10px 0;
-    cursor: pointer;
-    a {
-      color: var(--navbar-text-color);
-      text-decoration: none;
-    }
-  }
-`;

package/src/components/Navbar/MobileNavbarItem.tsx

@@ -1,121 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
-
-import { Link } from '@portal/Link';
-import { useI18nConfig } from '@portal/hooks';
-import { getPathnameForLocale } from '@portal/utils';
-import type {
-  ResolvedNavItem,
-  ResolvedNavLinkItem,
-  ResolvedNavGroupItem,
-} from '@theme/types/portal';
-import { withPathPrefix } from '@theme/utils';
-
-import { MobileNavbarDropdown, MobileDropdownWrapper } from './MobileNavbarDropdown';
-
-export interface NavbarItemProps {
-  navItem: ResolvedNavItem;
-  className?: string;
-}
-
-export function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
-  const { pathname } = useLocation();
-  const [expandedDropdown, setExpandedDropdown] = useState(false);
-  const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
-
-  if ((navItem as ResolvedNavLinkItem).link) {
-    const item = navItem as ResolvedNavLinkItem;
-    const isActive =
-      pathname ===
-      withPathPrefix(getPathnameForLocale(item.link, defaultLocale, currentLocale, locales));
-
-    return (
-      <NavMenuItem
-        active={isActive}
-        data-component-name="Navbar/MobileNavbarItem"
-        className={className}
-      >
-        <NavLink to={item.link} active={isActive}>
-          <NavLabel>{item.label}</NavLabel>
-        </NavLink>
-      </NavMenuItem>
-    );
-  }
-
-  if ((navItem as ResolvedNavGroupItem).items) {
-    const item = navItem as ResolvedNavGroupItem;
-    return (
-      <NavMenuItemWithDropdownWrapper expanded={expandedDropdown}>
-        <NavMenuItem
-          active={false}
-          onClick={toggleDropdown}
-          data-component-name="Navbar/MobileNavbarItem"
-          className={className}
-        >
-          <NavLabel>{item.label}</NavLabel>
-          <ExpandedArrow />
-        </NavMenuItem>
-        <MobileNavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
-      </NavMenuItemWithDropdownWrapper>
-    );
-  }
-
-  return null;
-}
-
-const ExpandedArrow = styled.div`
-  width: 5px;
-  height: 5px;
-  border: 1px solid;
-  border-left: none;
-  border-top: none;
-  transition: all 0.3s ease-out;
-`;
-
-export const NavMenuItem = styled.li<{ active?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--navbar-item-padding-horizontal);
-  text-align: left;
-  line-height: 1;
-  font-size: var(--navbar-item-font-size);
-  font-weight: var(--navbar-item-font-weight);
-  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-  }
-`;
-
-export const NavMenuItemWithDropdownWrapper = styled.div<{ expanded: boolean }>`
-  display: inline-block;
-  position: relative;
-  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-
-  ${ExpandedArrow} {
-    transform: rotate(${({ expanded }) => (expanded ? '' : '-')}45deg);
-  }
-
-  ${MobileDropdownWrapper} {
-    height: ${({ expanded }) => (expanded ? '100%' : '0')};
-    opacity: ${({ expanded }) => (expanded ? '1' : '0')};
-  }
-
-  ${NavMenuItem} {
-    border-bottom: none;
-  }
-`;
-
-export const NavLink = styled(Link)`
-  color: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
-  text-decoration: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
-`;
-
-const NavLabel = styled.span`
-  cursor: pointer;
-  vertical-align: middle;
-`;