diff --git a/package.json b/package.json
index fb6298406..89e2d2545 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"@storybook/addon-links": "^6.0.26",
"@storybook/react": "^6.0.26",
"@types/react": "^16.9.52",
+ "@types/react-router-dom": "^5.1.6",
"@types/styled-components": "^5.1.4",
"@types/styled-system": "^5.1.10",
"@typescript-eslint/eslint-plugin": "^4.4.1",
@@ -57,6 +58,7 @@
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-is": "^16.13.1",
+ "react-router-dom": "^5.2.0",
"rollup": "^2.31.0",
"styled-components": "^5.2.0",
"themeprovider-storybook": "^1.6.4",
@@ -67,6 +69,7 @@
"peerDependencies": {
"react": "^16.14.0",
"react-dom": "^16.14.0",
+ "react-router-dom": "^5.2.0",
"styled-components": "^5.2.0"
},
"dependencies": {
diff --git a/src/components/Dropdown/index.stories.tsx b/src/components/Dropdown/index.stories.tsx
index 5ecc5b795..2b8789c0a 100644
--- a/src/components/Dropdown/index.stories.tsx
+++ b/src/components/Dropdown/index.stories.tsx
@@ -12,7 +12,7 @@ export const Default: React.FC = () => {
return (
Hover}>
- {[...Array(20)].map(() => (
+ {[...Array(30)].map(() => (
Content
))}
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index c2b2e2966..18be7114d 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -16,7 +16,7 @@ const DropdownContent = styled.div`
box-shadow: ${({ theme }) => theme.shadows.level1};
padding: 16px;
border-radius: 16px;
- max-height: 250px;
+ max-height: 500px;
overflow-y: auto;
z-index: ${({ theme }) => theme.zIndices.modal};
`;
diff --git a/src/widgets/Nav/Panel.tsx b/src/widgets/Nav/Panel.tsx
index 8b887ecf2..0f70d9d8b 100644
--- a/src/widgets/Nav/Panel.tsx
+++ b/src/widgets/Nav/Panel.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import Link from "../../components/Link";
+import { NavLink } from "react-router-dom";
import { CloseIcon } from "../../components/Svg";
import Button from "../../components/Button";
import Dropdown from "../../components/Dropdown";
@@ -43,22 +43,6 @@ const StyledPanel = styled.div<{ show: boolean }>`
}
`;
-const StyledLink = styled(Link)`
- width: 100%;
- height: 100%;
- padding: 8px 40px;
- transition: background-color 0.2s;
- :hover {
- background-color: ${({ theme }) => theme.nav.hover};
- text-decoration: none;
- }
- ${({ theme }) => theme.mediaQueries.md} {
- display: flex;
- align-items: center;
- padding: 0 12px;
- }
-`;
-
const LinkBlock = styled.div`
display: flex;
align-items: center;
@@ -70,6 +54,23 @@ const LinkBlock = styled.div`
margin-bottom: 0;
flex-direction: row;
}
+
+ a {
+ width: 100%;
+ height: 100%;
+ padding: 8px 40px;
+ font-weight: bold;
+ transition: background-color 0.2s;
+ color: ${({ theme }) => theme.colors.primary};
+ :hover {
+ background-color: ${({ theme }) => theme.nav.hover};
+ }
+ ${({ theme }) => theme.mediaQueries.md} {
+ display: flex;
+ align-items: center;
+ padding: 0 12px;
+ }
+ }
`;
const ControlBlock = styled.div`
@@ -107,11 +108,17 @@ const Panel: React.FC
= ({
- {config.nav.map((entry) => (
-
- {entry.label}
-
- ))}
+ {config.nav.map((entry) =>
+ entry.href.startsWith("http") ? (
+
+ {entry.label}
+
+ ) : (
+
+ {entry.label}
+
+ )
+ )}