ghaem/vue-navbar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimized the code to be able to work with given props and not hard coded data

Browse Source
This commit is contained in:
ghaemaghaey
2025-12-18 15:25:51 +03:30
parent 1e8976e519
commit ef1bfc81b4
2 changed files with 60 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.vue
View File

@@ -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>

82
src/components/navbar.vue
View File

@@ -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;