From c7884480c50aa0ba6bf64cadb760751b8fdbed00 Mon Sep 17 00:00:00 2001
From: "s.esmaeili" <s.esmaeili@feep.ir>
Date: Fri, 23 Oct 2026 21:17:51 +0330
Subject: [PATCH] fix(admin): perfectly center sidebar menu icons inside badge

---
 apps/admin/src/layouts/AdminLayout.vue | 38 ++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/apps/admin/src/layouts/AdminLayout.vue b/apps/admin/src/layouts/AdminLayout.vue
index ac80734..f091da4 100644
--- a/apps/admin/src/layouts/AdminLayout.vue
+++ b/apps/admin/src/layouts/AdminLayout.vue
@@ -799,8 +799,8 @@ watch(() => route.fullPath, () => (drawer.value = false));
 }
 
 .admin-menu :deep(.ant-menu-item) {
-  display: flex;
-  align-items: center;
+  display: flex !important;
+  align-items: center !important;
   height: 48px !important;
   margin: 0 0 6px !important;
   padding-inline: 10px 14px !important;
@@ -808,7 +808,7 @@ watch(() => route.fullPath, () => (drawer.value = false));
   border-radius: 12px !important;
   color: #475569 !important;
   font-weight: 500;
-  line-height: 48px !important;
+  line-height: 1.5 !important;
   transition:
     background 0.2s ease,
     color 0.2s ease,
@@ -816,8 +816,7 @@ watch(() => route.fullPath, () => (drawer.value = false));
     box-shadow 0.2s ease;
 }
 
-.admin-menu :deep(.ant-menu-item-icon),
-.admin-menu :deep(.ant-menu-item .anticon) {
+.admin-menu :deep(.ant-menu-item-icon) {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -825,10 +824,14 @@ watch(() => route.fullPath, () => (drawer.value = false));
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
+  margin: 0 !important;
   margin-inline-end: 12px !important;
+  padding: 0 !important;
   font-size: 0 !important;
+  line-height: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
+  flex-shrink: 0 !important;
 }
 
 .admin-menu :deep(.admin-menu__icon) {
@@ -839,17 +842,21 @@ watch(() => route.fullPath, () => (drawer.value = false));
   height: 36px !important;
   min-width: 36px !important;
   min-height: 36px !important;
+  margin: 0 !important;
+  padding: 0 !important;
   flex-shrink: 0 !important;
   border-radius: 10px !important;
   background: #f1f5f9;
   color: #64748b;
+  line-height: 0 !important;
   transition:
     background 0.2s ease,
     color 0.2s ease,
     box-shadow 0.2s ease;
 }
 
-.admin-menu :deep(.admin-menu__icon .vx-icon) {
+.admin-menu :deep(.admin-menu__icon .vx-icon),
+.admin-menu :deep(.admin-menu__icon .anticon) {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -857,6 +864,14 @@ watch(() => route.fullPath, () => (drawer.value = false));
   height: 20px !important;
   min-width: 20px !important;
   min-height: 20px !important;
+  max-width: 20px !important;
+  max-height: 20px !important;
+  margin: 0 !important;
+  margin-inline-end: 0 !important;
+  margin-inline-start: 0 !important;
+  padding: 0 !important;
+  line-height: 0 !important;
+  vertical-align: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   color: inherit !important;
@@ -865,7 +880,18 @@ watch(() => route.fullPath, () => (drawer.value = false));
 .admin-menu :deep(.admin-menu__icon svg) {
   width: 20px !important;
   height: 20px !important;
+  max-width: 20px !important;
+  max-height: 20px !important;
   display: block !important;
+  margin: 0 auto !important;
+  transform: none !important;
+}
+
+.admin-menu :deep(.ant-menu-title-content) {
+  display: flex !important;
+  align-items: center !important;
+  margin-inline-start: 0 !important;
+  line-height: 1.5 !important;
 }
 
 .admin-menu :deep(.ant-menu-item:hover) {