From 6e0fa5b8c67993e3f1537278a13da9bb4ebb9a17 Mon Sep 17 00:00:00 2001 From: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com> Date: Wed, 11 Nov 2020 10:14:35 +0900 Subject: [PATCH] fix: Add react router to menu links (#46) --- package.json | 3 + src/components/Dropdown/index.stories.tsx | 2 +- src/components/Dropdown/index.tsx | 2 +- src/widgets/Nav/Panel.tsx | 51 +++++----- src/widgets/Nav/index.stories.tsx | 45 +++++---- yarn.lock | 111 +++++++++++++++++++++- 6 files changed, 167 insertions(+), 47 deletions(-) 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} + + ) + )}