Index: sources/gui/qml/components/MainMenu.qml
===================================================================
diff -u -rfbeafa0714f065bce0403e2e8ce68f6d8fbea6bd -r442d1c4f53c96991d4103485ff5ff683ed00d4f7
--- sources/gui/qml/components/MainMenu.qml	(.../MainMenu.qml)	(revision fbeafa0714f065bce0403e2e8ce68f6d8fbea6bd)
+++ sources/gui/qml/components/MainMenu.qml	(.../MainMenu.qml)	(revision 442d1c4f53c96991d4103485ff5ff683ed00d4f7)
@@ -1,6 +1,6 @@
 /*!
  *
- * Copyright (c) 2019-2019 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
  * \copyright                                                       \n
  *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
  *          IN PART OR IN WHOLE,                                    \n
@@ -20,46 +20,80 @@
 //  Qml imports
 import "qrc:/globals"
 
-/*
+/*!
  * \brief   The MainMenu Component
  * which contains three [Treatment, Manager, Settings]
  */
 Item { id: _root
-    property variant titles: []
+    enum Position {
+        Top,
+        Bottom
+    }
 
+    property variant    titles          : []
+    property bool       hidden          : false
+    property int        position        : MainMenu.Position.Bottom
+    property bool       hasRightText    : false
+    property int        rightTextGaps   : 20
+    property bool       hasLogo         : false
+
     /*!
      * \brief Emits when a menu item pressed
      * \param vIndex is the index of the pressed item
      */
     signal itemPressed(int vIndex)
 
+    /*!
+     * 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.
+     */
+    QtObject { id: _private
+        readonly property variant 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)
+    }
+
     /*! type:int
      * this property holds the width of each partition
      * regarding to the menuitem count and menu width
      */
-    property int partitionWidth: _row.width / (titles.length*2 + 1)
+    property int    partitionWidth  : _private.partitionWidth
+    property alias  spacing         : _row.spacing
+    property alias  leftPdding      : _row.leftPadding
+    property alias  rightPdding     : _row.rightPadding
 
+
+    clip: true
+    x: 0
+    y: Variables.applicationHeight - Variables.mainMenuHeight
+    width: parent.width
     height: Variables.mainMenuHeight
-    anchors {
-        right : parent.right
-        left  : parent.left
-        bottom: parent.bottom
-    }
 
     Rectangle { id: _backgroundRect
         anchors.fill: parent
         color: Colors.backgroundMainMenu
     }
+    MouseArea { id: _clickPropagationDisabler
+        anchors.fill: parent
+    }
 
+    Image { id: _image
+        visible: hasLogo
+        anchors.centerIn: parent
+        width : Variables.logoWidth
+        height: Variables.logoHeight
+        source: "qrc:/images/iLogoDDT"
+    }
 
+    // normal texts with highlighter bottom ribon.
     Row { id: _row
         anchors.fill: parent
         spacing     : partitionWidth
         leftPadding : partitionWidth
         rightPadding: partitionWidth
 
         Repeater { id: _repeater
-            model: titles
+            model: _private.repeaterTitles
             TouchRect { id : _touchRect
                 objectName: "_touchRect" + index //SquishQt testability
                 width: partitionWidth
@@ -74,14 +108,48 @@
         }
     }
 
+    // the right outer most text with vertical line as a separator
+    Line {
+        visible: hasRightText
+        orientation: Line.Orientation.Vertical
+        length: parent.height - rightTextGaps
+        anchors.right: _rightTouchRect.left
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    TouchRect { id : _rightTouchRect
+        visible: hasRightText
+        objectName: "_rightTouchRect" //SquishQt testability
+        width: partitionWidth + rightTextGaps
+        height: parent.height
+        text.text: _private.rightText
+        border.width: 0
+        button.onPressed: {
+            console.debug(titles)
+            itemPressed( titles.length ? titles.length - 1  : -1 )
+        }
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    // normal text bottom highlighter
     Rectangle { id : _highlightRect
         color: Colors.backgroundButtonSelect
         width: partitionWidth
-        x    : partitionWidth
+        x    : leftPdding
         height: 10
         radius: 10
         anchors.bottom: parent.bottom
         anchors.bottomMargin: -5
-        Behavior on x { PropertyAnimation {} }
+        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: {
+        if ( position === MainMenu.Position.Top ) {
+            y = hidden ? - Variables.mainMenuHeight : 0
+        } else {
+            y = Variables.applicationHeight - (hidden ? 0 : Variables.mainMenuHeight)
+        }
+    }
 }