Fix algo filters showing both inline and dropdown at once
- Wrap inline algo buttons in a hidden/flex container so the parent div controls visibility instead of per-button classes (scoped .nav-button display:inline-block was overriding Tailwind's hidden class) - Add flex-shrink-0 to logo link so it never gets squeezed out on narrower desktop screens - Reduce logo-to-nav gap on md screens (gap-4) to prevent overflow, widen to gap-10 at lg+ Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -3,8 +3,8 @@
|
||||
<div class="floating-glass-header mx-auto px-4 md:px-6 py-3.5 rounded-2xl transition-all duration-300" style="max-width: 100%;">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Logo + Navigation (Left Side) -->
|
||||
<div class="flex items-center gap-10">
|
||||
<router-link to="/">
|
||||
<div class="flex items-center gap-4 lg:gap-10">
|
||||
<router-link to="/" class="flex-shrink-0">
|
||||
<img src="/assets/images/logo-desktop.svg" alt="IndeeHub" class="h-8 md:h-10 ml-2 md:ml-0" />
|
||||
</router-link>
|
||||
|
||||
@@ -14,18 +14,19 @@
|
||||
<button @click="handleMyListClick" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">My List</button>
|
||||
|
||||
<!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
|
||||
<button
|
||||
v-for="algo in algorithms"
|
||||
:key="'inline-' + algo.id"
|
||||
@click="handleAlgoSelect(algo.id)"
|
||||
:class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
|
||||
class="hidden xl:inline-block"
|
||||
>
|
||||
{{ algo.label }}
|
||||
</button>
|
||||
<div class="hidden xl:flex items-center gap-3">
|
||||
<button
|
||||
v-for="algo in algorithms"
|
||||
:key="'inline-' + algo.id"
|
||||
@click="handleAlgoSelect(algo.id)"
|
||||
:class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
|
||||
>
|
||||
{{ algo.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Algos Dropdown (md–xl screens where inline buttons would overflow) -->
|
||||
<div class="relative algos-dropdown xl:hidden">
|
||||
<div class="relative algos-dropdown flex xl:hidden">
|
||||
<button
|
||||
@click="toggleAlgosMenu"
|
||||
:class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"
|
||||
|
||||
Reference in New Issue
Block a user