Improve menu items

7 files changed, 81 insertions, 0 deletions

diff --git a/Bootstrap/icons/gear.svg b/Bootstrap/icons/gear.svg
new file mode 100644
index 0000000..c11dbc1
--- /dev/null
+++ b/Bootstrap/icons/gear.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
+  <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+  <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
+</svg>
\ No newline at end of file
diff --git a/Bootstrap/icons/info-circle.svg b/Bootstrap/icons/info-circle.svg
new file mode 100644
index 0000000..8f48f86
--- /dev/null
+++ b/Bootstrap/icons/info-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+</svg>
\ No newline at end of file
diff --git a/Bootstrap/icons/person.svg b/Bootstrap/icons/person.svg
new file mode 100644
index 0000000..18d6411
--- /dev/null
+++ b/Bootstrap/icons/person.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
+</svg>
\ No newline at end of file
diff --git a/Bootstrap/icons/power.svg b/Bootstrap/icons/power.svg
new file mode 100644
index 0000000..6fb9756
--- /dev/null
+++ b/Bootstrap/icons/power.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power" viewBox="0 0 16 16">
+  <path d="M7.5 1v7h1V1h-1z"/>
+  <path d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z"/>
+</svg>
\ No newline at end of file
diff --git a/Eduport.qrc b/Eduport.qrc
index c4ed534..5a6e7fd 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -5,6 +5,10 @@
 		<file>Heebo/Heebo-Regular.ttf</file>
 		<file>imports/Eduport/Eduport.qml</file>
 		<file>imports/Eduport/qmldir</file>
+		<file>Bootstrap/icons/person.svg</file>
+		<file>Bootstrap/icons/gear.svg</file>
+		<file>Bootstrap/icons/info-circle.svg</file>
+		<file>Bootstrap/icons/power.svg</file>
 		<file>Bootstrap/icons/sun.svg</file>
 		<file>Bootstrap/icons/moon-stars.svg</file>
 		<file>Button/Sm.ui.qml</file>
diff --git a/Header.ui.qml b/Header.ui.qml
index c951096..b722078 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -103,7 +103,42 @@ ToolBar {
 				horizontalPadding: 10
 				verticalPadding: 16
 				delegate: MenuItem {
+					id: menuItem
 					font: Eduport.bsBtnFont
+					horizontalPadding: 16
+					verticalPadding: 6.4
+					spacing: 8
+					contentItem: RowLayout {
+
+						Image {
+							source: menuItem.icon
+								.source
+							sourceSize {
+								width:
+								menuItem.icon
+									.width
+								height:
+								menuItem.icon
+								.height
+							}
+
+							ColorOverlay {
+								color: Eduport
+								.bsDropdownLinkColor
+								source: parent
+								anchors.fill:
+									parent
+							}
+						}
+
+						Text {
+							text: menuItem.text
+							font: menuItem.font
+							color: Eduport
+							.bsDropdownLinkColor
+							Layout.fillWidth: true
+						}
+					}
 				}
 				background: Item {
 					implicitWidth: 260.734
@@ -168,21 +203,45 @@ ToolBar {
 
 				Action {
 					id: editProfile
+					icon {
+						source:
+						"Bootstrap/icons/person.svg"
+						width: 19
+						height: 22
+					}
 					text: qsTr("Edit Profile")
 				}
 
 				Action {
 					id: accountSettings
+					icon {
+						source:
+						"Bootstrap/icons/gear.svg"
+						width: 19
+						height: 22
+					}
 					text: qsTr("Account Settings")
 				}
 
 				Action {
 					id: help
+					icon {
+						source:
+						"Bootstrap/icons/info-circle.svg"
+						width: 19
+						height: 22
+					}
 					text: qsTr("Help")
 				}
 
 				Action {
 					id: log
+					icon {
+						source:
+						"Bootstrap/icons/power.svg"
+						width: 19
+						height: 22
+					}
 					text: qsTr("Sign Out")
 				}
 
diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml
index d6fac62..ab9957c 100644
--- a/imports/Eduport/Eduport.qml
+++ b/imports/Eduport/Eduport.qml
@@ -87,6 +87,9 @@ QtObject {
 	readonly property color bsBtnSuccessDisabledBorderColor:
 							bsBtnSuccessDisabledBg
 
+	property color bsDropdownLinkColor: mode == Eduport.Mode.Light
+						? "#747579" : "#c5c6cc"
+
 	property color bsGray300: mode == Eduport.Mode.Light
 					? "#dde0e3" : "#3e3e40"
 	property color bsGray500: mode == Eduport.Mode.Light