NavLinks replace TabItem

7 files changed, 55 insertions, 47 deletions

diff --git a/Button/NavLink.ui.qml b/Button/NavLink.ui.qml
new file mode 100644
index 0000000..45bffe3
--- /dev/null
+++ b/Button/NavLink.ui.qml
@@ -0,0 +1,21 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Bootstrap 5.3
+
+Btn {
+	id: button
+	font: Bootstrap.bodyFont
+	contentItem: Text {
+		text: modelData
+		font: button.font
+		color: checked
+			? Bootstrap.navPillsLinkActiveColor : Bootstrap.primary
+		horizontalAlignment: Text.AlignHCenter
+		verticalAlignment: Text.AlignVCenter
+	}
+	background: Rectangle {
+		color: checked
+			? Bootstrap.navPillsLinkActiveBg : Bootstrap.btnBg
+		radius: Bootstrap.navPillsBorderRadius
+	}
+}
diff --git a/Button/NavLink/TabsLine.ui.qml b/Button/NavLink/TabsLine.ui.qml
new file mode 100644
index 0000000..0d17f21
--- /dev/null
+++ b/Button/NavLink/TabsLine.ui.qml
@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Bootstrap 5.3
+import ".."
+
+NavLink {
+	id: button
+	contentItem: Text {
+		text: modelData
+		font: button.font
+		color: Bootstrap.primary
+		horizontalAlignment: Text.AlignHCenter
+		verticalAlignment: Text.AlignVCenter
+	}
+	background: Rectangle {
+		color: checked ? "#1a066ac9" : Bootstrap.btnBg
+		radius: Bootstrap.navPillsBorderRadius
+	}
+}
diff --git a/Course/Detail/Classic/Content/Main.ui.qml b/Course/Detail/Classic/Content/Main.ui.qml
index a1071e7..91cbce3 100644
--- a/Course/Detail/Classic/Content/Main.ui.qml
+++ b/Course/Detail/Classic/Content/Main.ui.qml
@@ -3,8 +3,8 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 import Bootstrap 5.3
-import "../../../.."
 import "../../../../Label" as Lbl
+import "../../../../Button/NavLink" as NavLink
 import "Main/TabContents" as MainTabContents
 
 ColumnLayout {
@@ -58,21 +58,7 @@ ColumnLayout {
 					model: ["Overview", "Curriculum",
 						"Instructor", "Reviews", "FAQs",
 						"Comment"]
-					delegate: TabItem {
-						contentItem: Text {
-							text: modelData
-							color: "#066ac9"
-							font {
-								family: Bootstrap.bodyFont.family
-								weight: Bootstrap.bodyFont.weight
-								pointSize: Bootstrap.bodyFont.pointSize
-							}
-						}
-						background: Rectangle {
-							color: index == currentIndex ? "#1a0fffff" : "transparent"
-							radius: 5.2
-						}
-					}
+					delegate: NavLink.TabsLine {}
 				}
 
 				StackLayout {
diff --git a/Eduport.qrc b/Eduport.qrc
index d7c38f0..3b3f6c5 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -19,7 +19,8 @@
 		<file>Button/Btn.ui.qml</file>
 		<file>Button/Primary.ui.qml</file>
 		<file>Button/Success.ui.qml</file>
+		<file>Button/NavLink.ui.qml</file>
+		<file>Button/NavLink/TabsLine.ui.qml</file>
 		<file>Header.ui.qml</file>
-		<file>TabItem.ui.qml</file>
 	</qresource>
 </RCC>
diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml
index 5d1a8ee..999b74d 100644
--- a/Home/Default.ui.qml
+++ b/Home/Default.ui.qml
@@ -6,6 +6,7 @@ import Bootstrap 5.3
 import Eduport 1.4
 import ".."
 import "../Label" as Lbl
+import "../Button" as Btn
 import "Default" as Default
 
 Flickable {
@@ -234,7 +235,7 @@ Flickable {
 					model: ["Web Design", "Development",
 						"Graphic Design", "Marketing",
 						"Finance"]
-					delegate: TabItem {}
+					delegate: Btn.NavLink {}
 				}
 			}
 
diff --git a/TabItem.ui.qml b/TabItem.ui.qml
deleted file mode 100644
index 82c8c7d..0000000
--- a/TabItem.ui.qml
+++ /dev/null
@@ -1,23 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import Bootstrap 5.3
-
-Button {
-	property int currentIndex: 0
-
-	height: 38
-	horizontalPadding: 16
-	verticalPadding: 8
-	contentItem: Text {
-		text: modelData
-		color: index == currentIndex ? "white" : "#066ac9"
-		font {
-			family: Bootstrap.bodyFont.family
-			pointSize: Bootstrap.bodyFont.pointSize
-		}
-	}
-	background: Rectangle {
-		color: index == currentIndex ? "#066ac9" : "transparent"
-		radius: 5.2
-	}
-}
diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml
index 827b7a2..845e4f1 100644
--- a/imports/Bootstrap/Bootstrap.qml
+++ b/imports/Bootstrap/Bootstrap.qml
@@ -2,6 +2,7 @@ pragma Singleton
 import QtQuick 2.15
 
 QtObject {
+	readonly property color primary: "#066ac9"
 	readonly property real badgeFontSize: 13.6
 
 	readonly property real btnPaddingX: 16
@@ -18,20 +19,22 @@ QtObject {
 	readonly property real btnBorderRadius: 5.2
 	readonly property real btnLgFontSize: 16
 	readonly property real btnLgBorderRadius: 8
-	readonly property color btnPrimaryBg: "#066ac9"
-	readonly property color btnPrimaryBorderColor: btnPrimaryBg
+	readonly property color btnPrimaryBg: primary
+	readonly property color btnPrimaryBorderColor: primary
 	readonly property color btnPrimaryActiveBg: "#0555a1"
 	readonly property color btnPrimaryActiveBorderColor: "#055097"
 	readonly property color btnPrimaryDisabledBg: "#a6066ac9"
-	readonly property color btnPrimaryDisabledBorderColor
-							: btnPrimaryDisabledBg
+	readonly property color btnPrimaryDisabledBorderColor: btnPrimaryDisabledBg
 	readonly property color btnSuccessBg: "#0cbc87"
 	readonly property color btnSuccessBorderColor: btnSuccessBg
 	readonly property color btnSuccessActiveBg: "#0a966c"
 	readonly property color btnSuccessActiveBorderColor: "#098d65"
 	readonly property color btnSuccessDisabledBg: "#a60cbc87"
-	readonly property color btnSuccessDisabledBorderColor
-							: btnSuccessDisabledBg
+	readonly property color btnSuccessDisabledBorderColor: btnSuccessDisabledBg
+
+	readonly property real navPillsBorderRadius: btnBorderRadius
+	readonly property color navPillsLinkActiveColor: btnColor
+	readonly property color navPillsLinkActiveBg: primary
 
 	readonly property font bodyFont: Qt.font({
 		family: haveRoboto ? "Roboto" : regular.name,