diff --git a/packages/app/src/layouts/components/sidebar/index.jsx b/packages/app/src/layouts/components/sidebar/index.jsx
index bec98376..42b75667 100755
--- a/packages/app/src/layouts/components/sidebar/index.jsx
+++ b/packages/app/src/layouts/components/sidebar/index.jsx
@@ -139,16 +139,13 @@ export default class Sidebar extends React.Component {
 
 	events = {
 		"router.navigate": (path) => {
-			// recalculate sidebar selected item
-			const item = [...this.state.topItems, ...this.state.bottomItems].find((item) => item.path === path)
-
-			this.setState({
-				selectedMenuItem: item
-			})
-		}
+			this.calculateSelectedMenuItem(path)
+		},
 	}
 
 	componentDidMount = async () => {
+		this.calculateSelectedMenuItem(window.location.pathname)
+
 		for (const [event, handler] of Object.entries(this.events)) {
 			app.eventBus.on(event, handler)
 		}
@@ -170,6 +167,12 @@ export default class Sidebar extends React.Component {
 		delete app.layout.sidebar
 	}
 
+	calculateSelectedMenuItem = (path) => {
+		this.setState({
+			selectedMenuItem: [...this.state.topItems, ...this.state.bottomItems].find((item) => item.path === path)
+		})
+	}
+
 	addMenuItem = (group, item) => {
 		group = this.getMenuItemGroupStateKey(group)