From 1931dbd152ebd1482dd33cf540b3a98d881236ba Mon Sep 17 00:00:00 2001 From: EleanorMao Date: Mon, 1 May 2023 21:22:14 +0800 Subject: [PATCH] feat; munu stryle --- src/components/Menu/Menu.tsx | 6 ++++-- src/components/Menu/styled.ts | 13 +++++++++++-- src/icons/bell.svg | 4 ++-- src/icons/gear.svg | 2 +- src/icons/history.svg | 2 +- src/icons/home.svg | 2 +- src/icons/question.svg | 6 +++--- src/routes/AppRoutes.tsx | 3 ++- src/routes/RequireAuth.tsx | 14 ++++++++++++++ src/stores/AuthStore.ts | 1 + 10 files changed, 40 insertions(+), 13 deletions(-) create mode 100644 src/routes/RequireAuth.tsx diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 0bffcd5..bcb1542 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -27,7 +27,8 @@ export const Menu: FC = ({ onLogout, onClose }) => { Activate Kit {menuConfig.map((item) => ( - + {item.title} @@ -42,7 +43,8 @@ export const Menu: FC = ({ onLogout, onClose }) => { {menuConfig.map((item) => ( - + {item.title} diff --git a/src/components/Menu/styled.ts b/src/components/Menu/styled.ts index 30afec7..f5cf844 100644 --- a/src/components/Menu/styled.ts +++ b/src/components/Menu/styled.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' import { Button } from '../Button' import Icon from '@ant-design/icons' +import { NavLink } from 'react-router-dom' export const StyledExtraContent = styled.div` text-align: center; @@ -43,7 +44,7 @@ export const StyledActivateButton = styled(Button)` border-radius: 8px; margin-bottom: 11px; ` -export const StyledMenuItem = styled.div` +export const StyledMenuItem = styled(NavLink)` height: 64px; line-height: 64px; text-align: center; @@ -52,6 +53,8 @@ export const StyledMenuItem = styled.div` font-size: 16px; letter-spacing: 0.02em; color: #000022; + text-decoration: none; + display: block; ` export const StyledIcon = styled(Icon)` margin-right: 6px; @@ -85,14 +88,20 @@ export const StyledPlainMenuContainer = styled.aside` } ` -export const StyledPlainMenuItem = styled.div` +export const StyledPlainMenuItem = styled(NavLink)` height: 64px; line-height: 64px; padding: 0 20px; color: #000022; font-weight: 500; font-size: 16px; + display: block; letter-spacing: 0.02em; position: relative; border-bottom: 2px solid #FDFDFD; + text-decoration: none; + + &:focus, &:active, &.active { + color: ${props => props.theme.brandPrimary}; + } ` diff --git a/src/icons/bell.svg b/src/icons/bell.svg index 543863b..9578c2c 100644 --- a/src/icons/bell.svg +++ b/src/icons/bell.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/icons/gear.svg b/src/icons/gear.svg index 1e06920..766ae53 100644 --- a/src/icons/gear.svg +++ b/src/icons/gear.svg @@ -1,3 +1,3 @@ - + diff --git a/src/icons/history.svg b/src/icons/history.svg index 1cbf81c..07dd8d9 100644 --- a/src/icons/history.svg +++ b/src/icons/history.svg @@ -1,3 +1,3 @@ - + diff --git a/src/icons/home.svg b/src/icons/home.svg index 052894d..a6d3bd4 100644 --- a/src/icons/home.svg +++ b/src/icons/home.svg @@ -1,3 +1,3 @@ - + diff --git a/src/icons/question.svg b/src/icons/question.svg index 8a436e3..274f9f7 100644 --- a/src/icons/question.svg +++ b/src/icons/question.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index 002b34a..03053ff 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -6,6 +6,7 @@ import { Home } from 'pages/activation/home' import { Login } from 'pages/activation/login' import { Activate } from 'pages/activation/activate' import { Dashboard } from 'pages/customerPortal/dashboard' +import { RequireAuth } from './RequireAuth' export const AppRoutes: FC = () => { return ( @@ -15,7 +16,7 @@ export const AppRoutes: FC = () => { } /> } /> - }> + }> } /> } /> diff --git a/src/routes/RequireAuth.tsx b/src/routes/RequireAuth.tsx new file mode 100644 index 0000000..4f35582 --- /dev/null +++ b/src/routes/RequireAuth.tsx @@ -0,0 +1,14 @@ +import React, { FC, PropsWithChildren, useState } from 'react' +import { observer } from 'mobx-react-lite' +import { AuthStore } from '../stores/AuthStore' +import { Navigate, useLocation } from 'react-router-dom' +import { Paths } from './Paths' + +export const RequireAuth: FC = observer(({ children }) => { + const [store] = useState(AuthStore.instance()) + const location = useLocation() + if (!store.logined) { + return + } + return <>{children} +}) diff --git a/src/stores/AuthStore.ts b/src/stores/AuthStore.ts index 3190a81..249ea46 100644 --- a/src/stores/AuthStore.ts +++ b/src/stores/AuthStore.ts @@ -39,6 +39,7 @@ export class AuthStore { } get logined() { + console.log(this.token) return !!this.token }