improve menu active dash

packages/app/src/layouts/components/sidebar/index.jsx

@@ -9,7 +9,7 @@ import Drawer from "@layouts/components/drawer"
 
 import { Icons } from "@components/Icons"
 
-import GenerateSidebarMenuItems from "@utils/generateSidebarMenuItems"
+import GenerateMenuItems from "@utils/generateMenuItems"
 
 import TopMenuItems from "@config/sidebar/TopItems"
 import BottomMenuItems from "@config/sidebar/BottomItems"
@@ -75,8 +75,8 @@ export default class Sidebar extends React.Component {
 		visible: false,
 		expanded: false,
 
-		topItems: GenerateSidebarMenuItems(TopMenuItems),
-		bottomItems: GenerateSidebarMenuItems(BottomMenuItems),
+		topItems: GenerateMenuItems(TopMenuItems),
+		bottomItems: GenerateMenuItems(BottomMenuItems),
 
 		selectedMenuItem: null,
 		navigationRender: null,
@@ -432,6 +432,6 @@ export default class Sidebar extends React.Component {
 			</AnimatePresence>
 
 			<Drawer />
-		</div >
+		</div>
 	}
 }

packages/app/src/layouts/components/sidebar/index.less

@@ -172,6 +172,8 @@
 			}
 
 			.ant-menu-item {
+				position: relative;
+
 				display: inline-flex;
 
 				align-items: center;

packages/app/src/pages/account/index.jsx

@@ -1,13 +1,14 @@
 import React from "react"
 import * as antd from "antd"
 import classnames from "classnames"
-import { Translation } from "react-i18next"
 import { motion, AnimatePresence } from "framer-motion"
 
 import { Icons } from "@components/Icons"
 import FollowButton from "@components/FollowButton"
 import UserCard from "@components/UserCard"
 
+import GenerateMenuItems from "@utils/generateMenuItems"
+
 import { SessionModel, UserModel, FollowsModel } from "@models"
 
 import DetailsTab from "./tabs/details"
@@ -225,43 +226,29 @@ export default class Account extends React.Component {
 						mode={app.isMobile ? "horizontal" : "vertical"}
 						selectedKeys={[this.state.tabActiveKey]}
 						onClick={(e) => this.handlePageTransition(e.key)}
-					>
-						<antd.Menu.Item
-							key="posts"
-							icon={<Icons.BookOpen />}
-						>
-							<Translation>
-								{t => t("Posts")}
-							</Translation>
-						</antd.Menu.Item>
-
-						<antd.Menu.Item
-							key="music"
-							icon={<Icons.MdAlbum />}
-						>
-							<Translation>
-								{t => t("Music")}
-							</Translation>
-						</antd.Menu.Item>
-
-						<antd.Menu.Item
-							key="followers"
-							icon={<Icons.Users />}
-						>
-							<Translation>
-								{t => t("Followers")}
-							</Translation>
-						</antd.Menu.Item>
-
-						<antd.Menu.Item
-							key="details"
-							icon={<Icons.Info />}
-						>
-							<Translation>
-								{t => t("Details")}
-							</Translation>
-						</antd.Menu.Item>
-					</antd.Menu>
+						items={GenerateMenuItems([
+							{
+								id: "posts",
+								label: "Posts",
+								icon: "BookOpen",
+							},
+							{
+								id: "music",
+								label: "Music",
+								icon: "MdAlbum",
+							},
+							{
+								id: "followers",
+								label: "Followers",
+								icon: "Users",
+							},
+							{
+								id: "details",
+								label: "Details",
+								icon: "Info",
+							}
+						])}
+					/>
 				</div>
 			</div>
 		</div>

packages/app/src/pages/account/index.less

@@ -191,7 +191,7 @@
 
 				justify-content: flex-start;
 
-				padding: 5px 10px !important;
+				padding: 5px 15px !important;
 
 				svg {
 					margin: 0 !important;

packages/app/src/styles/fixments.less

@@ -235,6 +235,32 @@
         p {
             color: var(--background-color-contrast);
         }
+
+        // active dash
+        &::before {
+            content: '';
+            display: block;
+            position: absolute;
+
+            top: auto;
+            left: 5px;
+
+            transition: all 150ms ease-in-out;
+
+            background-color: var(--colorPrimary);
+
+            width: @menu-selected-item-dash-width;
+
+            border-radius: @menu-selected-item-dash-border-radius;
+
+            // by default set opacity & height to 0
+            opacity: 0;
+            height: 0;
+        }
+
+        .ant-menu-title-content {
+            transition: @transition-ease-inout !important;
+        }
     }
 }
 
@@ -272,6 +298,12 @@
     &::after {
         opacity: 0;
     }
+
+    &::before {
+        opacity: 1;
+
+        height: @menu-selected-item-dash-height;
+    }
 }
 
 .ant-menu-item:active {
@@ -312,7 +344,6 @@
         border-radius: 12px;
         outline: 1px solid var(--border-color) !important;
         background-color: var(--background-color-primary) !important;
-
     }
 
     .ant-notification-notice {

packages/app/src/styles/vars.less

@@ -13,6 +13,10 @@
 
 @default-object-padding: 10px;
 
+@menu-selected-item-dash-width: 3px;
+@menu-selected-item-dash-height: 50%;
+@menu-selected-item-dash-border-radius: 12px;
+
 // Mobile
 @top_bar_height: 52px;
 @top_bar_padding: 10px;

packages/app/src/utils/generateMenuItems/index.jsx

@@ -1,3 +1,5 @@
+import React from "react"
+
 import { Translation } from "react-i18next"
 import { createIconRender } from "@components/Icons"