Index: sources/gui/qml/components/MainMenu.qml
===================================================================
diff -u -r5c21e83a3fdc897cb99ac62e1cec0213f411cd73 -r6c6f1f5d466badd9b4fd67be7c907234c342b2a2
--- sources/gui/qml/components/MainMenu.qml	(.../MainMenu.qml)	(revision 5c21e83a3fdc897cb99ac62e1cec0213f411cd73)
+++ sources/gui/qml/components/MainMenu.qml	(.../MainMenu.qml)	(revision 6c6f1f5d466badd9b4fd67be7c907234c342b2a2)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2019-2023 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file MainMenu.qml
- * \author (last) Behrouz NematiPour
- * \date (last) 16-Oct-2020
- * \author (original) Behrouz NematiPour
- * \date (original) 17-Oct-2019
+ * \file    MainMenu.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      27-Apr-2023
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  17-Oct-2019
  *
  */
 
@@ -31,14 +31,15 @@
     }
 
     property var            titles          : []
+    property var            visibleItems    : []
     property bool           hidden          : false
     property int            position        : MainMenu.Position.Bottom
     property bool           hasRightText    : false
     property int            rightTextGaps   : 20
     property bool           hasLogo         : false
     property int            currentIndex    : 0
     property string         currentTitle    : titles[currentIndex]
-    readonly property var   currentItem     : _private.items[currentIndex]
+    property bool           disable         : false
 
     /*!
      * \brief Emits when a menu item pressed
@@ -47,11 +48,25 @@
     signal itemPressed(int vIndex)
     onItemPressed: {
         currentIndex = vIndex
-        _highlightRect.x = _private.items[vIndex].x
+        let itemAt = _repeater.itemAt(vIndex)
+        if (itemAt)
+            _highlightRect.x = itemAt.x
+        else {
+            _highlightRect.x = _rightTouchRect.x
+        }
     }
 
-    onCurrentIndexChanged: itemPressed(currentIndex)
+    function isItemVisible      ( vIndex ) {
+        return visibleItems     [ vIndex ] !== false // used "!== false" to cover undefined as true.
+    }
 
+    function emit_itemPressed   ( vIndex ) {
+        if ( isItemVisible      ( vIndex ) )
+            itemPressed         ( vIndex )
+    }
+
+    onCurrentIndexChanged: emit_itemPressed(currentIndex)
+
     /*!
      * this section olds somkind of the private sections of the object
      * this section is used as the calculation section whcih soppose not to be changed by user.
@@ -60,7 +75,6 @@
         readonly property var     repeaterTitles: hasRightText ? titles.slice(0,titles.length - 1) : titles
         readonly property string  rightText     : titles.length ? titles[titles.length - 1] : ""
         readonly property int     partitionWidth: _row.width / ( _private.repeaterTitles.length * 2 + 1)
-                 property var     items         : []
     }
 
     /*! type:int
@@ -106,19 +120,18 @@
                 animated    : false
                 width       : partitionWidth
                 height      : parent.height
-                text.text   : modelData
+                text.text   : isItemVisible(index) ? modelData : ""     // didn't change the visibility to preserve the button location and just didn't display the title and highlihgt bar.
                 border.width: 0
                 onPressed: {
-                    itemPressed(index)
+                    emit_itemPressed(index)
                 }
-                Component.onCompleted: _private.items[index] = _touchRect
             }
         }
     }
 
     // the right outer most text with vertical line as a separator
     Line {
-        visible: hasRightText
+        visible: hasRightText && isItemVisible(_rightTouchRect.index)
         orientation: Line.Orientation.Vertical
         length: parent.height - rightTextGaps
         anchors.right: _rightTouchRect.left
@@ -130,14 +143,14 @@
         visible     : hasRightText
         width       : partitionWidth + rightTextGaps
         height      : parent.height
-        text.text   : _private.rightText
+        text.text   : isItemVisible(index) ? _private.rightText : ""    // didn't change the visibility to preserve the button location and just didn't display the title and highlihgt bar.
         border.width: 0
         onPressed: {
-            itemPressed(index)
+            emit_itemPressed(index)
         }
         anchors.right: parent.right
+        anchors.rightMargin: parent.rightPdding
         anchors.verticalCenter: parent.verticalCenter
-        Component.onCompleted: _private.items[index] = _rightTouchRect
     }
 
     // normal text bottom highlighter
@@ -148,17 +161,18 @@
         height: 10
         radius: 10
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: -5
+        anchors.bottomMargin: -(height / 2)
         Behavior on x { PropertyAnimation { /*duration: 500; easing.type: Easing.OutBounce*/ } }
     }
 
     // hidden animation to hide the menu nicely.
     Behavior on y { PropertyAnimation { /*duration: 500; easing.type: Easing.OutBounce*/ } }
     onHiddenChanged: {
+        let isHidden = hidden || disable
         if ( position === MainMenu.Position.Top ) {
-            y = hidden ? - Variables.mainMenuHeight : 0
+            y = isHidden ? - Variables.mainMenuHeight : 0
         } else {
-            y = Variables.applicationHeight - (hidden ? 0 : Variables.mainMenuHeight)
+            y = Variables.applicationHeight - (isHidden ? 0 : Variables.mainMenuHeight)
         }
     }
 }