@redocly/theme 0.15.1 → 0.16.0

package/src/components/Navbar/MobileNavbarMenu.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import {
-  NavbarMenuItem,
-  NavbarMenuItemWithDropdownWrapper,
-} from '@theme/components/Navbar/NavbarItem';
-import { MobileNavbarItem } from '@theme/components/Navbar/MobileNavbarItem';
-import { DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
-import { isPrimitive, isEmptyArray } from '@theme/utils';
-import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
-
-export function MobileNavbarMenu({
-  menuItems,
-  closeMenu,
-}: {
-  menuItems: ResolvedConfigLinks;
-  closeMenu: () => void;
-}): JSX.Element | null {
-  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
-    return null;
-  }
-
-  return (
-    <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
-      <NavbarItemsContainer>
-        {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
-          return (
-            <MobileNavbarItem
-              key={`${navItem.label}_${index}`}
-              data-cy={navItem.label}
-              navItem={navItem}
-            />
-          );
-        })}
-      </NavbarItemsContainer>
-      <NavbarItemsClosableArea onClick={closeMenu} />
-    </NavbarItemsWrapper>
-  );
-}
-
-const NavbarItemsWrapper = styled.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;
-  ${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.div`
-  display: flex;
-  flex: 1;
-  min-width: 50px;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.4);
-`;
-
-const NavbarItemsContainer = styled.ul`
-  width: 70%;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--navbar-background-color);
-
-  ${NavbarMenuItem} {
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-    }
-    border-radius: 0;
-    padding: 1em 0;
-    width: 100%;
-  }
-
-  ${NavbarMenuItemWithDropdownWrapper} {
-    display: block;
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
-      border-radius: 0;
-    }
-    ${NavbarMenuItem} {
-      border-bottom: none;
-    }
-  }
-
-  ${DropdownWrapper} {
-    background-color: var(--navbar-background-color);
-    width: 100%;
-    padding: 0;
-    position: relative;
-  }
-`;

package/src/components/Navbar/MobileNavbarMenuButton.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-import { Burger } from '@theme/ui/Burger';
-
-export const MobileNavbarMenuButton = styled(Burger).attrs(() => ({
-  'data-component-name': 'Navbar/MobileNavbarMenuButton',
-}))`
-  display: block;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    display: none;
-  }
-`;