From d5b438cd45c1e5c696e656ab08d65777de2f188e Mon Sep 17 00:00:00 2001 From: Avior Date: Sun, 12 Dec 2021 14:53:11 +0100 Subject: [PATCH] Fix last Sidebar bugs Signed-off-by: Avior --- .storybook/mockNextRouter.js | 1 + src/Sidebar/Sidebar.module.styl | 6 ++++- src/Sidebar/Sidebar.stories.tsx | 18 +++++++++---- src/Sidebar/index.tsx | 48 ++++++++++++++++++++------------- 4 files changed, 48 insertions(+), 25 deletions(-) diff --git a/.storybook/mockNextRouter.js b/.storybook/mockNextRouter.js index 040a979..19e2d3d 100644 --- a/.storybook/mockNextRouter.js +++ b/.storybook/mockNextRouter.js @@ -7,5 +7,6 @@ Router.router = { replace: async () => {}, prefetch: () => {}, route: '/mock-route', + asPath: '/mock-route', pathname: 'mock-path', } diff --git a/src/Sidebar/Sidebar.module.styl b/src/Sidebar/Sidebar.module.styl index 65eb46f..013d12e 100644 --- a/src/Sidebar/Sidebar.module.styl +++ b/src/Sidebar/Sidebar.module.styl @@ -143,10 +143,10 @@ @media (prefers-color-scheme dark) color white background $darkGrayDark - &.active &:active color $textOnMain background $main + padding 8px display flex align-items center @@ -166,6 +166,10 @@ width 100% display flex //max-height 24px + + &.active > div + color $textOnMain + background $main ul list-style none margin 0 diff --git a/src/Sidebar/Sidebar.stories.tsx b/src/Sidebar/Sidebar.stories.tsx index e200b80..a68ab96 100644 --- a/src/Sidebar/Sidebar.stories.tsx +++ b/src/Sidebar/Sidebar.stories.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Meta, Story } from '@storybook/react/types-6-0' import { Zap, ZapOff } from 'lucide-react' import Component from '.' - export default { title: 'DZEIO/Sidebar', component: Component, @@ -19,10 +18,10 @@ Sidebar.args = { name: 'Username', menu: [{ path: '/logout', - value: 'Logout' + name: 'Logout' }, { - path: '/logout', - value: 'Logout' + path: '/mock-route', + name: 'Mock Route' }] }, menu: [{ @@ -31,11 +30,20 @@ Sidebar.args = { }, { name: 'With Childs', icon: Zap, + subMenu: [{ + name: 'Child 1' + }, { + name: 'Mock Route', + path: '/mock-route' + }] + }, { + name: 'With Childs2', + icon: Zap, subMenu: [{ name: 'Child 1' }, { name: 'Child with link', - path: '/dashboard' + path: '/mock-route2' }] }, { path: '/dashboard', diff --git a/src/Sidebar/index.tsx b/src/Sidebar/index.tsx index 9516dc7..05f2132 100644 --- a/src/Sidebar/index.tsx +++ b/src/Sidebar/index.tsx @@ -1,7 +1,7 @@ import React, { MouseEvent } from 'react' import Router from 'next/router' -import { ChevronDown, Minus, MoreHorizontal, Plus } from 'lucide-react' +import { ChevronDown, MoreHorizontal, Plus } from 'lucide-react' import Text from '../Text' import Col from '../Col' import Row from '../Row' @@ -71,7 +71,7 @@ interface State { * Sidebar Component * @version 1.0.0 */ -export default class Navbar extends React.Component { +export default class Sidebar extends React.Component { public state: State = { open: true, @@ -79,14 +79,12 @@ export default class Navbar extends React.Component { } public componentDidMount() { - this.setState({ - path: Router.asPath - }) + this.onRouteChange(Router.asPath) Router.events.on('routeChangeComplete', () => { - this.setState({path: Router.asPath, open: false}) + this.onRouteChange(Router.asPath) }) Router.events.on('routeChangeError', () => { - this.setState({path: Router.asPath, open: false}) + this.onRouteChange(Router.asPath) }) if (!this.props.fullWidth) { document.body.classList.add(css.sidebarBody) @@ -94,7 +92,18 @@ export default class Navbar extends React.Component { document.body.addEventListener('click', this.onBodyClick) } + private onRouteChange(newRoute: string) { + let activeMenu = undefined + for (const menu of this.props.menu) { + if (newRoute === menu.path || menu.subMenu?.find((it) => newRoute === it.path)) { + activeMenu = menu.name + (menu.path ?? '') + } + } + this.setState({path: newRoute, subMenu: undefined, userMenu: false, activeMenu}) + } + public componentDidUpdate() { + //console.log(this.state.path) if (this.state.open) { document.body.classList.remove(css.short) } else { @@ -114,14 +123,15 @@ export default class Navbar extends React.Component { public onClick = (id: string, subMenu?: Array) => (ev: MouseEvent) => { ev.stopPropagation() if (!this.state.open && subMenu) { - console.log(ev) + //console.log(ev) this.setState({ subMenu: { y: (ev.currentTarget as HTMLElement).offsetTop, menu: subMenu.map((v) => ({ display: v.name, value: v.path, - href: v.path + href: v.path, + selected: this.state.path === v.path })) } }) @@ -167,10 +177,11 @@ export default class Navbar extends React.Component { {this.props.user?.menu && this.state.userMenu && (
({ - display: v.name, - value: v.path, - href: v.path - }))} /> + display: v.name, + value: v.path, + href: v.path, + selected: this.state.path === v.path + }))} />
)} {this.state.subMenu && ( @@ -197,7 +208,7 @@ export default class Navbar extends React.Component { } private makeMenuItem(obj: MenuItem & {subMenu?: Array}, isSub = false) { - const id = obj.name + obj.path + const id = obj.name + (obj.path ?? '') const content = ( <> {obj.icon && ( @@ -211,9 +222,10 @@ export default class Navbar extends React.Component { )} ) + const isActive = this.state.path === obj.path || obj.subMenu?.find((it) => this.state.path === it.path) return
  • {obj.path ? ( @@ -224,9 +236,7 @@ export default class Navbar extends React.Component {
    {obj.subMenu && (
      - {obj.subMenu.map((it, key) => ( -
    • {this.makeMenuItem(it, true)}
      • - ))} + {obj.subMenu.map((it) => this.makeMenuItem(it, true))}
    )}