fix home navsigaiotn sometimes hiding

src/components/Header/index.tsx

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

src/pages/Discovery/index.tsx

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