danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

glass mode

Browse Source
This commit is contained in:
hamid zarghami
2026-06-21 12:58:29 +03:30
parent d3ef8e1a98
commit b5653906dc
17 changed files with 325 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/components/CategoryScroll.tsx
+2 -1
View File
@@ -6,6 +6,7 @@ import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRe
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
import clsx from "clsx";
import { usePathname } from "next/navigation";
import { GLASS_SURFACE_SELECTED } from "@/lib/styles/glassSurface";
/** TODO: remove when backend sends avatarRenderMode */
const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);
@@ -110,7 +111,7 @@ const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "lar
const isSelected = item.id === selectedCategory;
return (
<Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
<Renderer key={item.id} className={clsx(isSelected && GLASS_SURFACE_SELECTED)} onClick={handleSelect(item.id)}>
<CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
<span className="text-xs text-foreground text-center whitespace-nowrap">{item.title}</span>
</Renderer>
src/app/[name]/(Main)/components/MenuIndex.tsx
+4 -3
View File
@@ -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>