Ilgeldi
/
turkmen-textile-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hover menu for mobile

This commit is contained in:
Batyr 2025-06-02 12:57:01 +05:00
parent ca7f2d6247
commit 6528f1cbd8
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/shared/hover-menu.tsx
View File

@ -9,6 +9,7 @@ import {
} from "../ui/navigation-menu";
import { cn } from "@/lib/utils";
import { Link } from "react-router-dom";
import { useUiStore } from "@/store/ui";
interface Props {
className?: string;
@ -26,6 +27,8 @@ export const HoverMenu: FC<Props> = ({
hoverItems,
setIsOpen,
}) => {
const setSheet = useUiStore((state) => state.setSheet);
return (
<NavigationMenu>
<NavigationMenuList>
@ -42,7 +45,10 @@ export const HoverMenu: FC<Props> = ({
{hoverItems?.map((item, i) => (
<NavigationMenuLink
key={i}
onClick={() => setIsOpen(false)}
onClick={() => {
setIsOpen(false);
setSheet(false);
}}
className="h-14 py-2 flex items-center w-40 cursor-pointer px-4 hover:bg-slate-300/50 transition-all"
>
<Link to={item.link ?? ""}>{item.text}</Link>

8
src/components/ui/navigation-menu.tsx
View File

@ -84,10 +84,14 @@ const NavigationMenuViewport = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<div className={cn("absolute left-full top-0 flex justify-center w-40")}>
<div
className={cn(
"absolute xl:left-full xl:top-0 -top-36 flex justify-center w-40"
)}
>
<NavigationMenuPrimitive.Viewport
className={cn(
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-40 overflow-hidden rounded-md text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-40 rounded-md text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
className
)}
ref={ref}