1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
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 {
PencilSquareIcon,
PlusIcon,
PresentationChartLineIcon,
RectangleStackIcon,
} from "@heroicons/react/24/solid";
import DialogTriggerWrapper, {
DialogDesktopTrigger,
DialogMobileTrigger,
} from "./dialogTriggerWrapper";
const menuItems = [
{
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,
},
];
function Menu() {
return (
<>
{/* Desktop Menu */}
<div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-0 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-blue-500/20 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-[#1F2428] 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>
<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>
);
}
function Top() {
return (
<DialogTriggerWrapper>
<DialogTrigger>
<div className="space-y-4 group relative">
<button className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
<PlusIcon className="h-6 w-6" />
</button>
<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>
);
}
function NavItem({
disabled,
icon,
url,
name,
}: {
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>
);
}
export default Menu;
|