glass mode

src/app/[name]/(Main)/components/MenuIndex.tsx

@@ -12,6 +12,7 @@ import useToggle from "@/hooks/helpers/useToggle";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { Candle2 } from "iconsax-react";
+import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
 import { useQueryState } from "next-usequerystate";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -175,11 +176,11 @@ const MenuIndex = () => {
         <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
           <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleFilterModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
               <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
             </button>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2')}>
               <TextAlignIcon className="text-foreground" />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
             </button>
@@ -196,7 +197,7 @@ const MenuIndex = () => {
             opacity: smallCategoriesVisible ? 1 : 0,
           }}
           transition={{ duration: 0.1 }}
-          className={clsx("fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20", !smallCategoriesVisible && "pointer-events-none")}
+          className={clsx(glassSurfaceFlat('fixed left-0 z-10 top-0 px-4 pt-16 right-0 xl:pr-72 xl:pt-20 border-x-0 border-t-0 rounded-none'), !smallCategoriesVisible && "pointer-events-none")}
         >
           <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
         </motion.div>