diff options
| author | Dhravya Shah <[email protected]> | 2024-06-18 17:58:46 -0500 |
|---|---|---|
| committer | Dhravya Shah <[email protected]> | 2024-06-18 17:58:46 -0500 |
| commit | f4bb71e8f7e07bb2e919b7f222d5acb2905eb8f2 (patch) | |
| tree | 7310dc521ef3559055bbe71f50c3861be2fa0503 /apps/web/app/(dash)/menu.tsx | |
| parent | darkmode by default - so that the colors don't f up on lightmode devices (diff) | |
| parent | Create Embeddings for Canvas (diff) | |
| download | supermemory-default-darkmode.tar.xz supermemory-default-darkmode.zip | |
Diffstat (limited to 'apps/web/app/(dash)/menu.tsx')
| -rw-r--r-- | apps/web/app/(dash)/menu.tsx | 21 |
1 files changed, 13 insertions, 8 deletions
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx index 1177bca6..5f26f545 100644 --- a/apps/web/app/(dash)/menu.tsx +++ b/apps/web/app/(dash)/menu.tsx @@ -1,13 +1,14 @@ import React from "react"; import Image from "next/image"; import { MemoriesIcon, ExploreIcon, HistoryIcon } from "@repo/ui/icons"; +import Link from "next/link"; function Menu() { const menuItems = [ { icon: MemoriesIcon, text: "Memories", - url: "/", + url: "/memories", }, { icon: ExploreIcon, @@ -22,23 +23,27 @@ function Menu() { ]; return ( - <div className="absolute h-full p-4 flex items-center top-0 left-0"> + <div className="fixed h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none"> <div className=""> - <div className="hover:rounded-2x group inline-flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40"> + <div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40"> {menuItems.map((item) => ( - <div + <Link + href={item.url} key={item.url} - className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90" + className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90 justify-end md:justify-start" > + <p className="md:hidden opacity-0 duration-200 group-hover:opacity-100"> + {item.text} + </p> <Image src={item.icon} alt={`${item.text} icon`} - className="hover:brightness-125 duration-200" + className="hover:brightness-125 duration-200 " /> - <p className="opacity-0 duration-200 group-hover:opacity-100"> + <p className="hidden md:block opacity-0 duration-200 group-hover:opacity-100"> {item.text} </p> - </div> + </Link> ))} </div> </div> |