Fix last Sidebar bugs

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

.storybook/mockNextRouter.js

@@ -7,5 +7,6 @@ Router.router = {
 	replace: async () => {},
 	prefetch: () => {},
 	route: '/mock-route',
+	asPath: '/mock-route',
 	pathname: 'mock-path',
 }

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

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',
+			path: '/mock-route',
-			value: 'Logout'
+			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',

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<Props, State> {
+export default class Sidebar extends React.Component<Props, State> {
 
 	public state: State = {
 		open: true,
@@ -79,14 +79,12 @@ export default class Navbar extends React.Component<Props, State> {
 	}
 
 	public componentDidMount() {
-		this.setState({
+		this.onRouteChange(Router.asPath)
-			path: 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<Props, State> {
 		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<Props, State> {
 	public onClick = (id: string, subMenu?: Array<MenuItem>) => (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<Props, State> {
 			{this.props.user?.menu && this.state.userMenu && (
 				<div className={buildClassName(css.userMenu, [css.fullWidth, this.props.fullWidth], [css.short, !this.state.open])}>
 					<Menu onClick={this.onMenuClick} outline items={this.props.user.menu.map((v) => ({
-						display: v.name,
+							display: v.name,
-						value: v.path,
+							value: v.path,
-						href: v.path
+							href: v.path,
-					}))} />
+							selected: this.state.path === v.path
+						}))} />
 				</div>
 			)}
 			{this.state.subMenu && (
@@ -197,7 +208,7 @@ export default class Navbar extends React.Component<Props, State> {
 	}
 
 	private makeMenuItem(obj: MenuItem & {subMenu?: Array<MenuItem>}, 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<Props, State> {
 					)}
 				</>
 			)
+			const isActive = this.state.path === obj.path || obj.subMenu?.find((it) => this.state.path === it.path)
 			return <li key={id} className={buildClassName(
-				[css.active, obj?.path && this.state.path?.startsWith(obj.path)],
+				[css.active, isActive],
-				[css.activeMenu, id === this.state.activeMenu]
+				[css.activeMenu, id === this.state.activeMenu && this.state.open]
 			)}>
 				<div onClick={isSub ? undefined : this.onClick(id, obj.subMenu)}>
 					{obj.path ? (
@@ -224,9 +236,7 @@ export default class Navbar extends React.Component<Props, State> {
 				</div>
 				{obj.subMenu && (
 					<ul>
-						{obj.subMenu.map((it, key) => (
+						{obj.subMenu.map((it) => this.makeMenuItem(it, true))}
-							<li key={it.name + key}>{this.makeMenuItem(it, true)}</li>
-						))}
 					</ul>
 				)}
 			</li>