diff --git a/package-lock.json b/package-lock.json index af2e22b..f4355be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-router": "6.2.1", "react-router-dom": "6.2.1", "react-syntax-highlighter": "15.4.4", + "remixicon-react": "^1.0.0", "semver": "7.3.5", "serve-handler": "6.1.3", "stream": "npm:stream-browserify", @@ -17254,6 +17255,14 @@ "node": ">= 0.10" } }, + "node_modules/remixicon-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz", + "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==", + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -32959,6 +32968,12 @@ "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", "dev": true }, + "remixicon-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz", + "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==", + "requires": {} + }, "renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", diff --git a/package.json b/package.json index 5ce7f37..8388131 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-router": "6.2.1", "react-router-dom": "6.2.1", "react-syntax-highlighter": "15.4.4", + "remixicon-react": "^1.0.0", "semver": "7.3.5", "serve-handler": "6.1.3", "stream": "npm:stream-browserify", diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 62c2d84..4b25328 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,48 +1,44 @@ -import { BeeModes } from '@ethersphere/bee-js' import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' -import { OpenInNewSharp } from '@material-ui/icons' -import { ReactElement, useContext } from 'react' -import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather' +import { ReactElement } from 'react' import { Link } from 'react-router-dom' +import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon' +import DocsIcon from 'remixicon-react/BookOpenLineIcon' +import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon' +import HomeIcon from 'remixicon-react/Home3LineIcon' +import SettingsIcon from 'remixicon-react/Settings2LineIcon' +import AccountIcon from 'remixicon-react/Wallet3LineIcon' import DashboardLogo from '../assets/dashboard-logo.svg' import DesktopLogo from '../assets/desktop-logo.svg' import { config } from '../config' import { useIsBeeDesktop } from '../hooks/apiHooks' -import { Context } from '../providers/Bee' import { ROUTES } from '../routes' +import Feedback from './Feedback' import SideBarItem from './SideBarItem' import SideBarStatus from './SideBarStatus' -import Feedback from './Feedback' const navBarItems = [ { label: 'Info', path: ROUTES.INFO, - icon: Home, + icon: HomeIcon, }, { label: 'Files', path: ROUTES.UPLOAD, - icon: FileText, + icon: FilesIcon, pathMatcherSubstring: '/files/', }, { label: 'Account', path: ROUTES.ACCOUNT_WALLET, - icon: Briefcase, + icon: AccountIcon, pathMatcherSubstring: '/account/', }, - { - label: 'Top Up', - path: ROUTES.WALLET, - icon: DollarSign, - requiresMode: BeeModes.ULTRA_LIGHT, - }, { label: 'Settings', path: ROUTES.SETTINGS, - icon: Settings, + icon: SettingsIcon, }, ] @@ -72,9 +68,6 @@ const useStyles = makeStyles((theme: Theme) => icon: { height: theme.spacing(4), }, - iconSmall: { - height: theme.spacing(2), - }, divider: { backgroundColor: '#2c2c2c', marginLeft: theme.spacing(4), @@ -97,7 +90,6 @@ const useStyles = makeStyles((theme: Theme) => export default function SideBar(): ReactElement { const classes = useStyles() - const { nodeInfo } = useContext(Context) const { isBeeDesktop } = useIsBeeDesktop() return ( @@ -110,26 +102,24 @@ export default function SideBar(): ReactElement { - {navBarItems - .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode) - .map(p => ( - - } - path={p.path} - pathMatcherSubstring={p.pathMatcherSubstring} - label={p.label} - /> - - ))} + {navBarItems.map(p => ( + + } + path={p.path} + pathMatcherSubstring={p.pathMatcherSubstring} + label={p.label} + /> + + ))} } - iconEnd={} + iconStart={} + iconEnd={} label={Docs} />