From 527c0b565f2b8b6d546cb4639b69c2ff7d5a4e28 Mon Sep 17 00:00:00 2001
From: prudho <prudho@outlook.com>
Date: Tue, 11 Oct 2022 15:52:37 +0200
Subject: [PATCH] feat(menu): support descriptions in vertical menu

---
 src/definitions/collections/menu.less         | 31 ++++++++++++++++++-
 src/themes/default/collections/menu.variables | 11 +++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index e4183d36c0..39ff16f863 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -97,6 +97,11 @@
   border-radius: @borderRadius 0 0 @borderRadius;
 }
 
+.ui.menu > .item.vertical {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 /* Border */
 .ui.menu .item::before {
   position: absolute;
@@ -126,6 +131,26 @@
   margin-bottom: 0;
 }
 
+.ui.menu > .item.vertical > .text {
+  margin-bottom: @verticalItemMargin;
+}
+
+/*-----------------
+  Item Description
+-------------------*/
+
+.ui.menu > .item > .description {
+  float: @itemDescriptionFloat;
+  margin: @itemDescriptionMargin;
+  color: @itemDescriptionColor;
+}
+
+.ui.menu > .item.vertical > .description {
+  margin: 0;
+}
+
+
+
 /*--------------
       Icons
 ---------------*/
@@ -282,6 +307,10 @@
   .ui.inverted.menu .search.dropdown.item > .text {
     color: @invertedSelectionDropdownColor;
   }
+
+  .ui.inverted.menu > .item > .description {
+    color: @invertedItemDescriptionColor;
+  }
 }
 
 & when (@variationMenuVertical) {
@@ -545,7 +574,7 @@ Floated Menu / Item
   }
 
   /*--- Item ---*/
-  .ui.vertical.menu .item {
+  .ui.vertical.menu .item:not(.vertical) {
     display: block;
     background: @verticalItemBackground;
     border-top: none;
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index f9236e012e..b50cb01ba8 100644
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -53,6 +53,14 @@
     Elements
 ---------------*/
 
+/* Description */
+@itemDescriptionFloat: right;
+@itemDescriptionMargin: 0 0 0 1em;
+@itemDescriptionColor: @lightTextColor;
+
+/* Vertical Item */
+@verticalItemMargin: 0.25em;
+
 /* Icon */
 @iconFloat: none;
 @iconMargin: 0 @relative5px 0 0;
@@ -427,6 +435,9 @@
 @invertedColoredDividerBackground: @dividerBackground;
 @invertedColoredActiveBackground: @strongTransparentBlack;
 
+/* Inverted Vertical Description */
+@invertedItemDescriptionColor: @invertedUnselectedTextColor;
+
 /* Fixed */
 @fixedPrecedingGridMargin: 2.75rem;