From ef1bfc81b4bdd8f7e0f7501919f184f9bf9c0205 Mon Sep 17 00:00:00 2001
From: ghaemaghaey <ghaemaghaey@gmail.com>
Date: Thu, 18 Dec 2025 15:25:51 +0330
Subject: [PATCH] optimized the code to be able to work with given props and
 not hard coded data

---
 src/App.vue               | 36 ++++++++++++++++-
 src/components/navbar.vue | 82 ++++++++++++---------------------------
 2 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3e4f4ca..bbedfbc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,41 @@
 <script setup>
 	import navbar from "./components/navbar.vue";
+	const navbarInput = [
+		{
+			name: "Products",
+			headers: {
+				"first Products Header": ["1", "2", "3"],
+				"Second Products Header": ["1", "2", "3"],
+				"Third Products Header": ["1", "2", "3"],
+			},
+		},
+		{
+			name: "Solutions",
+			headers: {
+				"first Solutions Header": ["1", "2", "3"],
+				"Second Solutions Header": ["1", "2", "3"],
+				"Third Solutions Header": ["1", "2", "3"],
+			},
+		},
+		{
+			name: "Knowledge Center",
+			headers: {
+				"first Knowledge Header": ["1", "2", "3"],
+				"Second Knowledge Header": ["1", "2", "3"],
+				"Third Knowledge Header": ["1", "2", "3"],
+			},
+		},
+		{
+			name: "Company",
+			headers: {
+				"first Company Header": ["1", "2", "3"],
+				"Second Company Header": ["1", "2", "3"],
+				"Third Company Header": ["1", "2", "3"],
+			},
+		},
+	];
 </script>
 
 <template>
-	<navbar />
+	<navbar :navbarInput="navbarInput" />
 </template>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 2bd4423..1fa6468 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -8,16 +8,11 @@
 			<nav class="flex flex-row w-full items-center">
 				<h1 class="text-2xl w-[30%] mx-2 font-black">Vue Navbar</h1>
 				<div class="flex flex-row justify-e gap-10 w-[60%]">
-					<h1 @mouseenter="ChangeState('Product')" class="nav-list">
-						Products
-					</h1>
-					<h1 @mouseenter="ChangeState('Solution')" class="nav-list">
-						Solutions
-					</h1>
-					<h1 @mouseenter="ChangeState('Center')" class="nav-list">
-						Knowledge Center
-					</h1>
-					<h1 @mouseenter="ChangeState('Company')" class="nav-list">Company</h1>
+					<div v-for="(navbarText, key) in navbarInput">
+						<h1 @mouseenter="ChangeState(key)" class="nav-list">
+							{{ navbarText.name }}
+						</h1>
+					</div>
 				</div>
 				<div class="flex flex-row w-[30%] justify-end gap-10">
 					<button class="nav-list">Contanct Us</button>
@@ -41,51 +36,17 @@
 					:key="a"
 					class="flex flex-row justify-evenly mt-10 gap-10"
 				>
-					<div>
-						<h1 class="font-mono text-sm font-light">
-							1-{{ selecteddata }} Header
-						</h1>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							Link to an {{ selecteddata }}
-						</p>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							Link to an another {{ selecteddata }}
-						</p>
-					</div>
-					<div>
-						<h1 class="font-mono text-sm font-light">
-							2-{{ selecteddata }} Header
-						</h1>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							Buy me a cup of {{ selecteddata }}
-						</p>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							I can't think of any {{ selecteddata }}
-						</p>
-					</div>
-					<div>
-						<h1 class="font-mono text-sm font-light">
-							3-{{ selecteddata }} Header
-						</h1>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							I guess it is {{ selecteddata }}
-						</p>
-						<p
-							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
-						>
-							Not yet i {{ selecteddata }}
-						</p>
+					<div v-for="(header, key) in selectedName.headers">
+						<h1 class="font-mono text-sm font-light">{{ key }}</h1>
+						<template v-for="headername in header">
+							<p
+								class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
+							>
+								{{ headername }}
+							</p>
+						</template>
 					</div>
+
 					<div class="w-60 h-45 object-fill">
 						<img :src="pic" class="rounded-xl" alt="" />
 					</div>
@@ -96,12 +57,19 @@
 </template>
 <script setup>
 	import pic from "/pic.jpg";
-	import { nextTick, ref } from "vue";
+	import { nextTick, ref, reactive, computed } from "vue";
+	const props = defineProps(["navbarInput"]);
+	function filterData() {
+		props.navbarInput.forEach((element) => {});
+	}
 	const selecteddata = ref("Product");
+	let selectedName = {};
+	selectedName = props.navbarInput[0];
 	const hoverd = ref(false);
 	const randomnumber = ref(0);
-	async function ChangeState(text) {
-		selecteddata.value = text;
+	const selectedText = computed(() => {});
+	async function ChangeState(key) {
+		selectedName = props.navbarInput[key];
 		hoverd.value = false;
 		await nextTick;
 		hoverd.value = true;