aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDhravya Shah <[email protected]>2024-07-20 20:56:16 -0500
committerDhravya Shah <[email protected]>2024-07-20 20:56:16 -0500
commit4f21f36065725d598890fb7b68fd441b980cb717 (patch)
tree49dc0b49f9529c6b03f7260e033ed1c449e6bec7
parentmerging (diff)
downloadsupermemory-4f21f36065725d598890fb7b68fd441b980cb717.tar.xz
supermemory-4f21f36065725d598890fb7b68fd441b980cb717.zip
minor changes in nav icons
-rw-r--r--apps/web/app/(dash)/menu.tsx298
1 files changed, 149 insertions, 149 deletions
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 5112eb4a..0b487e61 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,176 +1,176 @@
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { MemoriesIcon, CanvasIcon, AddIcon } from "@repo/ui/icons";
-import { DialogTrigger } from "@repo/ui/shadcn/dialog";
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { MemoriesIcon, CanvasIcon, AddIcon } from '@repo/ui/icons';
+import { DialogTrigger } from '@repo/ui/shadcn/dialog';
-import { HomeIcon } from "@heroicons/react/24/solid";
+import { HomeIcon } from '@heroicons/react/24/solid';
import {
- PencilSquareIcon,
- PlusIcon,
- PresentationChartLineIcon,
- RectangleStackIcon,
-} from "@heroicons/react/24/solid";
+ PencilSquareIcon,
+ PlusIcon,
+ PresentationChartLineIcon,
+ RectangleStackIcon,
+} from '@heroicons/react/24/solid';
import DialogTriggerWrapper, {
- DialogDesktopTrigger,
- DialogMobileTrigger,
-} from "./dialogTriggerWrapper";
+ DialogDesktopTrigger,
+ DialogMobileTrigger,
+} from './dialogTriggerWrapper';
const menuItems = [
- {
- icon: MemoriesIcon,
- text: "Memories",
- url: "/memories",
- disabled: false,
- },
- {
- icon: CanvasIcon,
- text: "Canvas",
- url: "/canvas",
- disabled: true,
- },
+ {
+ icon: MemoriesIcon,
+ text: 'Memories',
+ url: '/memories',
+ disabled: false,
+ },
+ {
+ icon: CanvasIcon,
+ text: 'Canvas',
+ url: '/canvas',
+ disabled: true,
+ },
];
const items = [
- {
- icon: <HomeIcon className="h-6 w-6" />,
- name: "home",
- url: "/home",
- disabled: false,
- },
- {
- icon: <RectangleStackIcon className="h-6 w-6" />,
- name: "memories",
- url: "/memories",
- disabled: false,
- },
- {
- icon: <PencilSquareIcon className="h-6 w-6" />,
- name: "editor",
- url: "/#",
- disabled: true,
- },
- {
- icon: <PresentationChartLineIcon className="h-6 w-6" />,
- name: "thinkpad",
- url: "/#",
- disabled: true,
- },
+ {
+ icon: <HomeIcon className="h-6 w-6" />,
+ name: 'home',
+ url: '/home',
+ disabled: false,
+ },
+ {
+ icon: <RectangleStackIcon className="h-6 w-6" />,
+ name: 'memories',
+ url: '/memories',
+ disabled: false,
+ },
+ {
+ icon: <PencilSquareIcon className="h-6 w-6" />,
+ name: 'editor',
+ url: '/#',
+ disabled: true,
+ },
+ {
+ icon: <PresentationChartLineIcon className="h-6 w-6" />,
+ name: 'thinkpad',
+ url: '/#',
+ disabled: true,
+ },
];
function Menu() {
- return (
- <>
- {/* Desktop Menu */}
- <div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
- <div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
- <div className="pointer-events-auto flex flex-col gap-2">
- <DialogDesktopTrigger />
- <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
- {items.map((v) => (
- <NavItem {...v} />
- ))}
- </div>
- </div>
- </div>
+ return (
+ <>
+ {/* Desktop Menu */}
+ <div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
+ <div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
+ <div className="pointer-events-auto flex flex-col gap-2">
+ <DialogDesktopTrigger />
+ <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+ {items.map((v) => (
+ <NavItem {...v} />
+ ))}
+ </div>
+ </div>
+ </div>
- {/* Mobile Menu */}
- <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
- <div className="flex justify-around items-center">
- <Link
- href={"/"}
- className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
- >
- <HomeIcon width={24} height={24} />
- <p className="text-xs text-foreground-menu mt-2">Home</p>
- </Link>
+ {/* Mobile Menu */}
+ <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
+ <div className="flex justify-around items-center">
+ <Link
+ href={'/'}
+ className={`flex flex-col items-center text-white ${'cursor-pointer'}`}
+ >
+ <HomeIcon width={24} height={24} />
+ <p className="text-xs text-foreground-menu mt-2">Home</p>
+ </Link>
- <DialogMobileTrigger />
- {menuItems.map((item) => (
- <Link
- aria-disabled={item.disabled}
- href={item.disabled ? "#" : item.url}
- key={item.url}
- className={`flex flex-col items-center ${
- item.disabled
- ? "opacity-50 pointer-events-none"
- : "cursor-pointer"
- }`}
- >
- <Image
- src={item.icon}
- alt={`${item.text} icon`}
- width={24}
- height={24}
- />
- <p className="text-xs text-foreground-menu mt-2">{item.text}</p>
- </Link>
- ))}
- </div>
- </div>
- </>
- );
+ <DialogMobileTrigger />
+ {menuItems.map((item) => (
+ <Link
+ aria-disabled={item.disabled}
+ href={item.disabled ? '#' : item.url}
+ key={item.url}
+ className={`flex flex-col items-center ${
+ item.disabled
+ ? 'opacity-50 pointer-events-none'
+ : 'cursor-pointer'
+ }`}
+ >
+ <Image
+ src={item.icon}
+ alt={`${item.text} icon`}
+ width={24}
+ height={24}
+ />
+ <p className="text-xs text-foreground-menu mt-2">{item.text}</p>
+ </Link>
+ ))}
+ </div>
+ </div>
+ </>
+ );
}
export function Navbar() {
- return (
- <div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
- <div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
- <div className="pointer-events-auto">
- <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-[#1f24289b] px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
- <Top />
- {items.map((v) => (
- <NavItem {...v} />
- ))}
- </div>
- </div>
- </div>
- );
+ return (
+ <div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
+ <div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
+ <div className="pointer-events-auto">
+ <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-2 border-border px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+ <Top />
+ {items.map((v) => (
+ <NavItem {...v} />
+ ))}
+ </div>
+ </div>
+ </div>
+ );
}
function Top() {
- return (
- <DialogTriggerWrapper>
- <DialogTrigger>
- <div className="space-y-4 group relative">
- <div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
- <PlusIcon className="h-6 w-6" />
- </div>
- <div className="h-[1px] w-full bg-[#323b41]"></div>
- <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap -top-1 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
- Add Memories
- </div>
- </div>
- </DialogTrigger>
- </DialogTriggerWrapper>
- );
+ return (
+ <DialogTriggerWrapper>
+ <DialogTrigger>
+ <div className="space-y-4 group relative">
+ <div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
+ <PlusIcon className="h-6 w-6" />
+ </div>
+ <div className="h-[1px] w-full bg-[#323b41]"></div>
+ <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap -top-1 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-2xl px-2 py-1">
+ Add Memories
+ </div>
+ </div>
+ </DialogTrigger>
+ </DialogTriggerWrapper>
+ );
}
function NavItem({
- disabled,
- icon,
- url,
- name,
+ disabled,
+ icon,
+ url,
+ name,
}: {
- disabled: boolean;
- icon: React.JSX.Element;
- name: string;
- url: string;
+ disabled: boolean;
+ icon: React.JSX.Element;
+ name: string;
+ url: string;
}) {
- return (
- <div className="relative group">
- <Link aria-disabled={disabled} href={disabled ? "#" : url}>
- <div
- className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && "opacity-50"}`}
- >
- {icon}
- </div>
- </Link>
- <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
- {name}
- </div>
- </div>
- );
+ return (
+ <div className="relative group">
+ <Link aria-disabled={disabled} href={disabled ? '#' : url}>
+ <div
+ className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && 'opacity-50'}`}
+ >
+ {icon}
+ </div>
+ </Link>
+ <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
+ {name}
+ </div>
+ </div>
+ );
}
export default Menu;