I use tailwindcss
and vue
. Now I create header and I have a problem.
<template>
<header
class="w-[100vw] max-w-[100vw] box-border bg-white whitespace-nowrap px-7 shadow-lg border-b border-b-gray-300 py-[2px] flex flex-row items-center select-none"
>
<div class="border-2 border-black p-[2px] flex flex-row cursor-pointer mr-3">
// logo
</div>
<div class="flex flex-row items-center gap-1">
// some routes
</div>
<div class="flex-1 flex flex-row justify-between items-center gap-2">
<TemalarSlider :dynamic-width="dynamicWidth" />
<Search @searchToggled="handleSearchToggle" />
</div>
<div class="select-none flex flex-row gap-2 relative items-center justify-end py-1">
// also some routes
</div>
</header>
</template>
<script setup>
const dynamicWidth = ref('100%')
function handleSearchToggle(isOpen) {
dynamicWidth.value = isOpen ? 'calc(100% - 300px)' : '100%' // Adjust as needed
}
</script>
Here I want flex-1 must be max-width. here Search
this animated search bar.
My TemalarSlider
this:
<template>
<div
:style="{ maxWidth: dynamicWidth, width: dynamicWidth }"
class="overflow-hidden bg-gray-400 transition-all duration-500"
>
<AnOutlinedArrowLeft />
<div class="overflow-x-auto flex flex-row items-center pr-4">
// more items
</div>
<AnOutlinedArrowRight />
</div>
</template>
<script setup>
import useOthers from '@/stores/others'
import { AnOutlinedArrowLeft, AnOutlinedArrowRight } from '@kalimahapps/vue-icons'
const others = useOthers()
defineProps(['dynamicWidth'])
</script>
<style scoped></style>
When I dont add items work well. after i add item width TemalarSlider increased. How to do this? I try do this overflow-x-scroll. But dont be.