Improve profile part of header

1 files changed, 116 insertions, 15 deletions

diff --git a/Header.ui.qml b/Header.ui.qml
index 4ac854c..6071a9c 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -3,12 +3,15 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 import Eduport 1.4
+import "Label" as Lbl
 
 ToolBar {
 	property alias logo: logo
 	property alias profile: profile
 	property string imageSource: "https://eduport.webestica.com/assets/images/avatar/01.jpg"
 	property alias menu: menu
+	property string fullNameText: "Lori Ferguson"
+	property string emailText: "example@gmail.com"
 	property alias editProfile: editProfile
 	property alias accountSettings: accountSettings
 	property alias help: help
@@ -19,7 +22,11 @@ ToolBar {
 	}
 
 	Item {
-		anchors.fill: parent
+		anchors {
+			fill: parent
+			leftMargin: 15
+			rightMargin: 15
+		}
 
 		ToolButton {
 			id: logo
@@ -36,54 +43,148 @@ ToolBar {
 			}
 		}
 
-		ToolButton {
-			id: profile
-			anchors {
-				right: parent.right
-				verticalCenter: parent.verticalCenter
-			}
-			contentItem: Image {
+		Component {
+			id: image
+			Image {
 				source: imageSource
 				sourceSize {
-					width: 40
-					height: 40
+					width: size
+					height: size
 				}
 				layer {
 					enabled: true
 					effect: OpacityMask {
 						maskSource: Rectangle {
-							width: 40
-							height: 40
-							radius: 40
+							width: size
+							height: size
+							radius: size
 						}
 					}
 				}
 			}
+		}
+
+		ToolButton {
+			id: profile
+			padding: 0
+			anchors {
+				right: parent.right
+				verticalCenter: parent.verticalCenter
+			}
+			contentItem: Loader {
+				property real size: 40
+				sourceComponent: image
+			}
 			background: Rectangle {
 				color: "transparent"
 			}
 
 			Menu {
 				id: menu
+				onOpened: x -= 15
+				onClosed: x += 15
 				y: parent.height
+				horizontalPadding: 10
+				verticalPadding: 16
+				delegate: MenuItem {
+					font: Eduport.bsBtnFont
+				}
+				background: Rectangle {
+					implicitWidth: 260.734
+					implicitHeight: 295.406
+					radius: 5.2
+				}
+
+				Item {
+					implicitHeight: info.height + 16
+
+					RowLayout {
+						id: info
+						spacing: 16
+						anchors {
+							top: parent.top
+							topMargin: 0
+							left: parent.left
+							leftMargin: 16
+							right: parent.right
+							rightMargin: 16
+						}
+
+						Loader {
+							property real size: 48
+							sourceComponent: image
+						}
+
+						ColumnLayout {
+							spacing: 0
+
+							Lbl.H6 {
+								text:
+								fullNameText
+							}
+
+							Lbl.Body {
+								text: emailText
+								font.pointSize:
+									14
+							}
+						}
+					}
+				}
+
+				MenuSeparator {
+				}
+
 				Action {
 					id: editProfile
 					text: qsTr("Edit Profile")
 				}
+
 				Action {
 					id: accountSettings
 					text: qsTr("Account Settings")
 				}
+
 				Action {
 					id: help
 					text: qsTr("Help")
 				}
+
 				Action {
 					id: log
 					text: qsTr("Sign Out")
 				}
-				delegate: MenuItem {
-					font: Eduport.bsBtnFont
+
+				MenuSeparator {
+				}
+
+				Item {
+					implicitHeight: mode.height + 16
+
+					RowLayout {
+						id: mode
+						spacing: 0
+						anchors {
+							left: parent.left
+							leftMargin: 4
+							right: parent.right
+							rightMargin: 4
+							bottom: parent.bottom
+							bottomMargin: 4
+						}
+
+						Button {
+							text: qsTr("Light")
+							Layout.fillWidth: true
+						}
+
+						Button {
+							text: qsTr("Dark")
+							Layout.fillWidth: true
+							Layout.alignment:
+								Qt.AlignRight
+						}
+					}
 				}
 			}
 		}