We Keep Coding

Vue 3 Breadcrumb did not work with <Script setup>

I need your help for my Breadcrumb component.
It did work last time but after I add the Pinia it did not work anymore.
I don't know if this is related to Pinia or not.
This is the screenshot of the project
my_vue_project_screenshot
If you additional detail more than below, please let me know
Thank you all in advance
Also, I'm not sure my Vue project structure is correct or not.
Main layout
|
|- BreadCrumb
|- RouterView
I put BreadCrumb component inside every View pages. Like this (for example)
<script setup>
import breadcrumb from '../../components/breadcrumb.vue';
const pages=[{ name: 'ช่าง', href: '/staff', current: true }]
const technicians = [
{ id: 0, name: 'Mr A', score: 25, role: 'กลึง' },
{ id: 1, name: 'Mr B', score: 35, role: 'เจาะ' },
]
</script>
<template>
<breadcrumb :pages="pages"/>
<div class="space-y-6 pt-8 sm:space-y-5 sm:pt-10">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">รายชื่อช่าง</h1>
<p class="mt-2 text-sm text-gray-700">Admin</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<router-link to="/staff/add">
<button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent
bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">เพิ่มช่าง</button>
</router-link>
</div>
</div>
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ชื่อ</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">แผนก</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">คะแนน</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="technician in technicians" :key="technician.id">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ technician.name }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.role }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.score }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<router-link :to="{ name: 'editstaff', params: { id: technician.id }}"
class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ technician.name }}</span>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
This is my BreadCrumb.vue
<script setup>
import { ChevronRightIcon, HomeIcon } from '#heroicons/vue/20/solid'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="/" class="text-gray-400 hover:text-gray-500">
<HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li v-for="page in pages" :key="page.name">
<div class="flex items-center">
<ChevronRightIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a :href="page.href" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
:aria-current="page.current ? 'page' : undefined">{{ page.name }}</a>
</div>
</li>
</ol>
</nav>
</template>
Lastly, this is my main Layout (Not sure if this is related too or not
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '#headlessui/vue'
import {
HomeIcon,
Bars3Icon,
FolderIcon,
UsersIcon,
XMarkIcon
} from '#heroicons/vue/24/outline'
const authenticated = false;
const navigation = [
{ name: 'home', to: '/', icon: HomeIcon },
{ name: 'enj', to: '/staff', icon: UsersIcon },
{ name: 'proj', to: '/project', icon: FolderIcon },
{ name: 'selectproj', to: '/selectproject', icon: FolderIcon },
{ name: 'validateproj', to: '/validateproject', icon: FolderIcon },
]
const sidebarOpen = ref(false)
</script>
<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" #close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" #click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 space-y-1 px-2">
<router-link v-for="item in navigation" :key="item.name" :to="item.to" class="['text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
<component :is="item.icon" :class="[isActive ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</router-link>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<p class="text-base font-medium text-white">Tom Cook</p>
<p class="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</a>
</div>
</DialogPanel>
</TransitionChild>
<div class="w-14 flex-shrink-0">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex min-h-0 flex-1 flex-col bg-gray-800">
<div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 flex-1 space-y-1 px-2">
<RouterLink v-for="item in navigation" :key="item.name" :to="item.to" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md']">
<component :is="item.icon" :class="[item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</RouterLink>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<div class="group block w-full flex-shrink-0">
<div v-if="authenticated" class="flex items-center">
<div class="ml-3">
<p class="text-base font-medium text-white pl-2">:Username</p>
<RouterLink to="/">
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">Logout</p>
</RouterLink>
</div>
</div>
<div v-else class="flex items-center">
<div class="ml-3">
<RouterLink to="/signin">
<p class="text-base font-medium text-gray-300 group-hover:text-gray-200">เข้าสู่ระบบ</p>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-1 flex-col md:pl-64">
<div class="sticky top-0 z-10 bg-gray-100 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
<button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" #click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main class="flex-1">
<div class="py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<slot>
<RouterView/>
</slot>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</template>

How to display an element in a certain height and keep it sticky using reactjs?

I have a sticky drop-down menu that needs to be displayed at a certain height on the scroll.
I am using reactjs, and what I tried is the following code:
const [stickyPillMenu, setStickyPillMenu] = useState(false);
useEffect(() => {
function handleSitckyPillMenu () {
if (window.screenY >= 300) {
setStickyPillMenu(true)
} else {
setStickyPillMenu(false)
}
}
window.addEventListener("scroll", handleSitckyPillMenu)
}, [])
Render code:
return (
<div>
<div className={stickyPillMenu ? "absolute top-0" : "flex sticky top-0 z-10 h-full"}>
<div className="flex flex-col float-right ml-auto mt-1" style={{ marginRight: '6px' }}>
<div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
<img className="h-5 w-5" src="../img/icons/Language.png" alt="" />
</div>
<div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
<a href="/login.html"> <img className="h-5 w-5" src="../img/icons/LoginRed.png" alt="" />
</a>
</div>
<div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
<a href="/made4me.html"> <img className="h-5 w-5" src="../img/icons/StarPointer.png" alt="" />
</a>
</div>
<div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
<img className="h-5 w-5" src="../img/icons/HeartRed.png" alt="" />
</div>
</div>
</div>
</div>
)
Any suggestion, please:)

Vue why click event not working in v-if or v-show

i am trying to fire click event from div but if v-if false on component rendering click event not working
here my code:
export default {
name: "ProSelect",
data() { return {
isActive: false,
}},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
}
}
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
if i change isActive variable to true on rendering click is working
i found the answer but i wonder why this is not working.If i use #mousedown.prevent instead of #click its working

I am not sure if I get it correctly but as per the code you posted. Your parent div will be removed from the DOM as v-if is false. You can assign isActive as true while mounting.
Working Demo :
new Vue({
el: '#app',
data() {
return {
isActive: false,
}
},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
},
mounted() {
this.isActive = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>

this is whole template code
<template>
<div>
<div class="flex flex-col items-center">
<div class="w-full flex flex-col items-center">
<div class="w-full">
<div class="flex flex-col items-center relative">
<div class="w-full">
<div class="flex">
<div class="flex flex-auto flex-wrap"></div>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:rounded-none focus:rounded-t-lg focus:border-b-0 focus:bg-white focus:border-indigo-500 border-transparent focus:border-transparent focus:ring-0"
type="text"
v-model="selected"
:name="name"
#focusin="isActive = !isActive"
#focusout="isActive = !isActive"
placeholder="Search by position">
</div>
</div>
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

Keeping a div at the bottom of it's parent always

My Component
return (
<div>
<section>
<div class="md:grid md:grid-cols-2 gap-4">
{pinnedRepos.map((r) => {
const bgColor = {
backgroundColor: r.node.primaryLanguage.color,
};
return (
<div
id="project-outer-container"
class="text-sm border-solid border border-gray-300 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div class="flex flex-col justify-between">
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</section>
</div>
);
I want to keep this section...
<div id="project-lang" class="flex items-center content-end">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
at the bottom of its parent always. Otherwise I end up with stuff like this:
which just looks messy. I have tried multiple flexbox alignments and justified rulings. I have set the parent element to absolute and the child to a relative still nothing.
I have even tried the way of using a sticky footer but nope.
Any CSS wizards to move me in the right direction would be great

With the tip of above this is how I managed to do it
<div
id="project-outer-container"
class="text-sm border-solid border border-slate-300 dark:border-slate-700 rounded shadow mb-4 md:mb-0 pb-4">
<div id="project-inner-container" class="p-4 h-full relative">
<div id="project-title" class="flex items-center">
<span class="mr-3 text-xl">
<GoRepo />
</span>
<a href={r.node.url}>{r.node.name}</a>
</div>
<div id="project-about" class="">
<p class="">{r.node.description}</p>
</div>
//----------------- this is what I wanted to be placed at the bottom
<div id="project-lang" class="flex items-center absolute bottom-0">
<div style={bgColor} class="rounded-full h-3 w-3"></div>
<span class="ml-3">{r.node.primaryLanguage.name}</span>
</div>
</div>
</div>

Random Blank Space is showing up after putting two divs inside one div and then using justify content

I am making a website using the Next.js framework for React and Tailwind Css for markup and am getting this annoying problem. Basically I am trying to put my image onto the right side while having my text on the left but it just won't work properly and when I try putting the heading and subheading divs into one separate div inside body, the entire navbar gets really wonky.
Code Before Extra Div
import Head from 'next/head'
import Avatar from '../components/Avatar'
import Image from 'next/image'
export default function Home() {
return (
<div>
<Head>
<title>Vasu Bansal</title>
<link rel="icon" href="logo.png" />
</Head>
{/* Navbar */}
<header className="flex w-full p-5 justify-between text-2xl text-white bg-gray-700">
<div className="flex">
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
<div className="flex items-center">
<button className="btn">Meet Vasu</button>
</div>
<div>
<button className="btn">The Blog</button>
</div>
<div>
<button className="btn">Other</button>
</div>
<div>
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
</header>
<body className="flex flex-wrap w-full bg-gray-500 bg-cover justify-between">
<div className="flex text-center mt-32 md:ml-40 md:pt-16">
<h1 className="flex text-white text-5xl font-extrabold">My Name is Vasu Bansal</h1>
</div>
<div className="flex text-center flex-nowrap w-full md:pl-40 md:pt-5">
<h1 className="flex text-white text-xl ">I am an experienced programmer who knows multiple languages</h1>
</div>
<div className="flex flex-col">
<img src="computer.png" width={400} height={400}/>
</div>
</body>
</div>
)
}
Picture Before Extra Div
Now for after the extra div
Code
import Head from 'next/head'
import Avatar from '../components/Avatar'
import Image from 'next/image'
export default function Home() {
return (
<div>
<Head>
<title>Vasu Bansal</title>
<link rel="icon" href="logo.png" />
</Head>
{/* Navbar */}
<header className="flex w-full p-5 justify-between text-2xl text-white bg-gray-700">
<div className="flex">
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
<div className="flex items-center">
<button className="btn">Meet Vasu</button>
</div>
<div>
<button className="btn">The Blog</button>
</div>
<div>
<button className="btn">Other</button>
</div>
<div>
<Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' />
</div>
</header>
<body className="flex flex-wrap w-full bg-gray-500 bg-cover justify-between">
<div>
<div className="flex text-center mt-32 md:ml-40 md:pt-16">
<h1 className="flex text-white text-5xl font-extrabold">My Name is Vasu Bansal</h1>
</div>
<div className="flex text-center flex-nowrap w-full md:pl-40 md:pt-5">
<h1 className="flex text-white text-xl ">I am an experienced programmer who knows multiple languages</h1>
</div>
</div>
<div className="flex flex-col">
<img src="computer.png" width={400} height={400}/>
</div>
</body>
</div>
)
}
Picture
Any help would be greatly appreciated. You could either help by telling how to fix problem or tell me how to put the image on right with text on left. Thanks in advance!/

You have overused your flex way too much. Keep things simple. Check a demo.
<div class="flex w-full h-96">
<!-- Content -->
<div class="flex flex-1 flex-col justify-center items-center">
<div class="text-5xl font-extrabold">My Name is Vasu Bansal</div>
<div class="text-xl">I am an experienced programmer who knows multiple languages</div>
</div>
<!-- Image -->
<div class="flex flex-1 justify-center items-center">
<img src="https://www.pngitem.com/pimgs/m/357-3579137_computer-silhouette-no-background-hd-png-download.png" width="400px" height="400px" />
</div>
</div>