nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix home navsigaiotn sometimes hiding

Browse Source
This commit is contained in:
goro 2026-07-05 09:31:24 +03:00
parent f1bf0ca0b5
commit b5a316af98
2 changed files with 66 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header/index.tsx
View File

@ -186,9 +186,7 @@ function Header() {
</button>
</div>
<div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}>
{dropdown &&
<a href="/" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
}
<Link to="/best-places" onClick={() => setDropdown(!dropdown)} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</Link>
<Link to="/discover" onClick={() => setDropdown(!dropdown)} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</Link>
<Link to="/stories" onClick={() => setDropdown(!dropdown)} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</Link>

68
src/pages/Discovery/index.tsx
View File

@ -1,8 +1,21 @@
import { CheckboxInput, DefaultSeparator, FilterButton, LocationCard, SpinnerLoading } from "../../components";
import { FloatFilter } from "../../components/Filter/FloatFilter";
import { useDiscovery } from "./useDiscovery";
import { useState } from "preact/hooks";
import { ChevronDown, ChevronUp } from "lucide-react";
function Discovery() {
const [ratingFilter, setRatingFilter] = useState<'user' | 'critics' | 'mixed'>('mixed')
const [reviewedFilter, setReviewedFilter] = useState<'user' | 'critics' | 'mixed'>('mixed')
const [ratingOpen, setRatingOpen] = useState(false)
const [reviewedOpen, setReviewedOpen] = useState(false)
const FILTER_OPTIONS: { label: string; value: 'user' | 'critics' | 'mixed' }[] = [
{ label: 'Mixed', value: 'mixed' },
{ label: 'User', value: 'user' },
{ label: 'Critics', value: 'critics' },
]
const {
data,
isFloatFilterOpen,
@ -36,9 +49,58 @@ function Discovery() {
<section name="header">
<h1 className="text-3xl mb-5 font-bold">Discovery</h1>
<DefaultSeparator />
<div className="flex items-center justify-end gap-5 mt-4 mb-2">
{/* Rating filter */}
<div className="relative">
<button
className="flex items-center gap-1 text-sm text-tertiary hover:text-white transition-colors"
onClick={() => { setRatingOpen(o => !o); setReviewedOpen(false); }}
>
Rating: {FILTER_OPTIONS.find(o => o.value === ratingFilter)?.label}
{ratingOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
{ratingOpen && (
<div className="absolute right-0 top-full mt-1 z-10 flex flex-col text-sm bg-secondary rounded-lg py-1 min-w-[100px] shadow-lg">
{FILTER_OPTIONS.map(o => (
<button
key={o.value}
onClick={() => { setRatingFilter(o.value); setRatingOpen(false); }}
className={`text-left px-4 py-1.5 hover:bg-primary transition-colors ${ratingFilter === o.value ? 'text-white' : 'text-tertiary'}`}
>
{o.label}
</button>
))}
</div>
)}
</div>
{/* Most Reviewed filter */}
<div className="relative">
<button
className="flex items-center gap-1 text-sm text-tertiary hover:text-white transition-colors"
onClick={() => { setReviewedOpen(o => !o); setRatingOpen(false); }}
>
Most Reviewed: {FILTER_OPTIONS.find(o => o.value === reviewedFilter)?.label}
{reviewedOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
{reviewedOpen && (
<div className="absolute right-0 top-full mt-1 z-10 flex flex-col text-sm bg-secondary rounded-lg py-1 min-w-[100px] shadow-lg">
{FILTER_OPTIONS.map(o => (
<button
key={o.value}
onClick={() => { setReviewedFilter(o.value); setReviewedOpen(false); }}
className={`text-left px-4 py-1.5 hover:bg-primary transition-colors ${reviewedFilter === o.value ? 'text-white' : 'text-tertiary'}`}
>
{o.label}
</button>
))}
</div>
)}
</div>
</div>
</section>
<section name="content">
<div className="pb-6 justify-start items-start inline-flex">
<div className="pb-6 flex items-start w-full">
{/* FILTER */}
<section name="discovery filter">
<div className="w-[195px] flex-col justify-start items-start gap-6 inline-flex mr-5 max-[920px]:hidden">
@ -88,10 +150,10 @@ function Discovery() {
</div>
</section>
{/* FILTER END */}
<div>
<div className="flex-1 min-w-0">
{data.locations.map((x: any) => (
<LocationCard
containerClass="p-[10px_1%_15px] inline-block m-[0_0_15px] align-top w-[20%] max-[1300px]:w-[24.3%] max-[1135px]:w-[25%] max-[1100px]:w-[33%] max-[920px]:w-[33%] max-[625px]:w-[50%]"
containerClass="p-[10px_1%_15px] inline-block m-[0_0_15px] align-top w-[20%] max-[1300px]:w-[24.3%] max-[1135px]:w-[25%] max-[1100px]:w-[33%] max-[920px]:w-[33%] max-[625px]:w-[50%] max-[380px]:w-full"
onCardClick={onClickLocation}
data={x}
/>