path: root/Header.ui.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import Bootstrap 5.3
import Eduport 1.4
import "DropShadow" as DrpShdw
import "Button" as Btn
import "Header"

ToolBar {
	property alias logo: logo
	property alias cart: cart
	property alias cartMenu: cartMenu
	property alias cartItems: cartItems
	property alias checkout: checkout
	property alias profile: profile
	property string profileImageSource:
		"https://eduport.webestica.com/assets/images/avatar/01.jpg"
	property alias profileMenu: profileMenu
	property alias info: info
	property alias divider: divider
	property string fullNameText: "Lori Ferguson"
	property string emailText: "example@gmail.com"
	property alias editProfile: editProfile
	property alias accountSettings: accountSettings
	property alias help: help
	property alias log: log
	property alias light: light
	property alias dark: dark

	horizontalPadding: 15
	background: Rectangle {
		implicitHeight: 70
		color: light.Bootstrap.bodyBg
	}

	ToolButton {
		id: logo
		anchors {
			left: parent.left
			verticalCenter: parent.verticalCenter
		}
		icon {
			source:
			"https://eduport.webestica.com/assets/images/logo.svg"
			width: 115
		}
		background: Rectangle {
			color: "transparent"
		}
	}

	Component {
		id: background

		Item {
			implicitWidth: width

			Rectangle {
				id: rectangle
				anchors.fill: parent
				radius: 5.2
				color: light.Bootstrap.mode
					? Eduport.bsDark
					: light.Bootstrap.bodyBg
			}

			DrpShdw.Box {
				source: rectangle
				anchors.fill: rectangle
			}
		}
	}

	Component {
		id: menuSeparator

		MenuSeparator {
			contentItem: Rectangle {
				implicitWidth: width
				implicitHeight: 1
				color: light.Bootstrap.mode
					? Eduport.bsGray300
					: Eduport.bsGray500
			}
		}
	}

	ToolButton {
		id: cart
		padding: 0
		width: 40
		height: 40
		anchors {
			right: profile.left
			rightMargin: 12
			verticalCenter: parent.verticalCenter
		}
		layer {
			enabled: true
			effect: OpacityMask {
				maskSource: Rectangle {
					width: 40
					height: 40
					radius: 40
				}
			}
		}
		contentItem: Item {

			Image {
				anchors.centerIn: parent
				source: "Bootstrap/icons/cart3.svg"
				fillMode: Image.PreserveAspectFit

				ColorOverlay {
					color: Eduport.bsGray900
					source: parent
					anchors.fill: parent
				}
			}
		}
		background: Rectangle {
			color: Eduport.bsLight
			border {
				color: Eduport.bsLight
				width: 1
			}
		}

		Menu {
			id: cartMenu
			y: parent.height
			background: Loader {
				width: 256
				sourceComponent: background
			}

			Label {
				text: qsTr("Cart items")
				wrapMode: Label.Wrap
				Bootstrap.heading: 5
				topPadding: 25.6
				leftPadding: 16
				rightPadding: 16
				bottomPadding: 25.6
			}

			Loader {
				sourceComponent: menuSeparator
			}

			ListView {
				id: cartItems
				interactive: true
				clip: true
				implicitHeight: 236.5
				model: ListModel {
					ListElement {
						image: "https://eduport.webestica.com/assets/images/book/02.jpg"
						title: "Angular 4 Tutorial in audio (Compact Disk)"
					}
					ListElement {
						image: "https://eduport.webestica.com/assets/images/book/04.jpg"
						title: "The Principles of Beautiful Graphics Design (Paperback)"
					}
				}
				delegate: CartItem {
					width: cartItems.width
					imageSource: image
					titleText: title
				}
			}

			Loader {
				sourceComponent: menuSeparator
			}

			RowLayout {

				Btn.Light {
					id: viewCart
					text: qsTr("View Cart")
					horizontalPadding: 12.8
					verticalPadding: 6.4
					font.pointSize: 13
					bsBtnBorderRadius: 3.2
					Layout.margins: 16
				}

				Btn.Success {
					id: checkout
					text: qsTr("Checkout")
					horizontalPadding: 12.8
					verticalPadding: 6.4
					font.pointSize: 13
					bsBtnBorderRadius: 3.2
					Layout.margins: 16
					Layout.alignment: Qt.AlignRight
				}
			}
		}
	}

	Component {
		id: image

		Image {
			source: imageSource
			sourceSize {
				width: imageWidth
				height: imageHeight
			}
			layer {
				enabled: true
				effect: OpacityMask {
					maskSource: Rectangle {
						width: imageWidth
						height: imageHeight
						radius: maskRadius
					}
				}
			}
		}
	}

	ToolButton {
		id: profile
		padding: 0
		anchors {
			right: parent.right
			verticalCenter: parent.verticalCenter
		}
		contentItem: Loader {
			property string imageSource: profileImageSource
			property int imageWidth: 40
			property int imageHeight: 40
			property real maskRadius: 40
			sourceComponent: image
		}
		background: Rectangle {
			color: "transparent"
		}

		Menu {
			id: profileMenu
			y: parent.height
			horizontalPadding: 10
			verticalPadding: 16
			background: Loader {
				width: 260.734
				sourceComponent: background
			}
			delegate: MenuItem {
				id: menuItem
				font: Eduport.bsBtnFont
				horizontalPadding: 16
				verticalPadding: 6.4
				spacing: 8
				contentItem: RowLayout {

					Image {
						source: menuItem.icon.source

						ColorOverlay {
							color: highlighted
								? Eduport.bsDropdownLinkHoverColor
								: Eduport.bsDropdownLinkColor
							source: parent
							anchors.fill: parent
						}
					}

					Text {
						text: menuItem.text
						font: menuItem.font
						color: highlighted
							? Eduport.bsDropdownLinkHoverColor
							: Eduport.bsDropdownLinkColor
						Layout.fillWidth: true
					}
				}
				background: Rectangle {
					color: highlighted
						? Eduport.bsDropdownLinkHoverBg
						: Eduport.mode
							? Eduport.bsDark
							: light.Bootstrap.bodyBg
					radius: 5.2
				}
			}

			Item {
				id: info
				implicitHeight: layout.height + 16

				RowLayout {
					id: layout
					spacing: 16
					anchors {
						top: parent.top
						topMargin: 0
						left: parent.left
						leftMargin: 16
						right: parent.right
						rightMargin: 16
					}

					Loader {
						property string imageSource:
							profileImageSource
						property int imageWidth: 48
						property int imageHeight: 48
						property real maskRadius: 48
						sourceComponent: image
					}

					ColumnLayout {
						spacing: 0

						Label {
							text: fullNameText
							wrapMode: Label.Wrap
							Bootstrap.heading: 6
						}

						Label {
							text: emailText
							font.pointSize: 14
							wrapMode: Label.Wrap
							color: Eduport
								.bsDropdownColor
						}
					}
				}
			}

			Loader {
				id: divider
				sourceComponent: menuSeparator
			}

			Action {
				id: editProfile
				icon.source: "Bootstrap/icons/person.svg"
				text: qsTr("Edit Profile")
			}

			Action {
				id: accountSettings
				icon.source: "Bootstrap/icons/gear.svg"
				text: qsTr("Account Settings")
			}

			Action {
				id: help
				icon.source: "Bootstrap/icons/info-circle.svg"
				text: qsTr("Help")
			}

			Action {
				id: log
				icon.source: "Bootstrap/icons/power.svg"
				text: qsTr("Sign Out")
			}

			Loader {
				sourceComponent: menuSeparator
			}

			Item {
				implicitHeight: mode.height + 16

				Rectangle {
					implicitHeight: mode.height + 8
					color: Eduport.bsLight
					radius: Eduport.bsBorderRadius
					anchors {
						left: parent.left
						right: parent.right
						bottom: parent.bottom
					}

					RowLayout {
						id: mode
						spacing: 0
						anchors {
							left: parent.left
							leftMargin: 4
							right: parent.right
							rightMargin: 4
							verticalCenter: parent
								.verticalCenter
						}

						Btn.Sm {
							id: light
							icon {
								source: "Bootstrap/icons/sun.svg"
								width: 16
								height: 16
							}
							text: qsTr("Light")
							checked: Bootstrap.mode
								== Bootstrap
									.Mode
									.Light
							enabled: !checked
							Layout.fillWidth: true
						}

						Btn.Sm {
							id: dark
							icon {
								source: "Bootstrap/icons/moon-stars.svg"
								width: 16
								height: 16
							}
							text: qsTr("Dark")
							checked: Bootstrap.mode
								== Bootstrap
									.Mode
									.Dark
							enabled: !checked
							Layout.fillWidth: true
						}
					}
				}
			}
		}
	}
}