Skip to content

Commit bd28d73

Browse files
techwithanirudhdanny-avila
techwithanirudh
and
danny-avila
authored
Add Popup Menu to Save Space in Sidebar (danny-avila#260)
--------- Co-authored-by: Danny Avila <[email protected]>
1 parent 0374ae4 commit bd28d73

File tree

7 files changed

+106
-17
lines changed

7 files changed

+106
-17
lines changed

‎client/src/components/Nav/ClearConvos.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ export default function ClearConvos() {
2626
<Dialog>
2727
<DialogTrigger asChild>
2828
<button
29-
className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
30-
// onClick={clickHandler}
29+
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
3130
>
3231
<TrashIcon />
3332
Clear conversations

‎client/src/components/Nav/DarkMode.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function DarkMode() {
1111

1212
return (
1313
<button
14-
className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
14+
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
1515
onClick={clickHandler}
1616
>
1717
{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}

‎client/src/components/Nav/ExportConversation/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function ExportConversation() {
2525
<>
2626
<button
2727
className={cn(
28-
'flex items-center gap-3 rounded-md py-3 px-3 text-sm transition-colors duration-200 hover:bg-gray-500/10',
28+
'flex py-3 px-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm hover:bg-gray-700 w-full',
2929
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400'
3030
)}
3131
onClick={clickHandler}

‎client/src/components/Nav/Logout.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Logout() {
1212

1313
return (
1414
<button
15-
className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
15+
className="flex py-3 px-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm hover:bg-gray-700 w-full"
1616
onClick={handleLogout}
1717
>
1818
<LogOutIcon />

‎client/src/components/Nav/NavLinks.jsx

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,77 @@
1+
import { Menu, Transition } from '@headlessui/react';
2+
import { Fragment, useEffect, useRef, useState } from 'react';
13
import SearchBar from './SearchBar';
24
import ClearConvos from './ClearConvos';
35
import DarkMode from './DarkMode';
46
import Logout from './Logout';
57
import ExportConversation from './ExportConversation';
8+
import { useAuthContext } from '~/hooks/AuthContext';
9+
import { cn } from '~/utils/';
10+
import DotsIcon from '../svg/DotsIcon';
611

712
export default function NavLinks({ clearSearch, isSearchEnabled }) {
13+
const { user, logout } = useAuthContext();
814
return (
9-
<>
10-
{!!isSearchEnabled && (
11-
<SearchBar
12-
clearSearch={clearSearch}
13-
/>
15+
<Menu
16+
as="div"
17+
className="group relative"
18+
>
19+
{({ open }) => (
20+
<>
21+
<Menu.Button
22+
className={cn(
23+
'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
24+
open ? 'bg-gray-800' : ''
25+
)}
26+
>
27+
<div class="-ml-0.5 h-5 w-5 flex-shrink-0">
28+
<div class="relative flex">
29+
<img
30+
class="rounded-sm"
31+
src={user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`}
32+
alt=""
33+
/>
34+
</div>
35+
</div>
36+
<div class="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
37+
{user?.name || 'USER'}
38+
</div>
39+
<DotsIcon />
40+
</Menu.Button>
41+
42+
<Transition
43+
as={Fragment}
44+
enter="transition ease-out duration-100"
45+
enterFrom="transform opacity-0 scale-95"
46+
enterTo="transform opacity-100 scale-100"
47+
leave="transition ease-in duration-75"
48+
leaveFrom="transform opacity-100 scale-100"
49+
leaveTo="transform opacity-0 scale-95"
50+
>
51+
<Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
52+
<Menu.Item>
53+
{({}) => <>{!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />}</>}
54+
</Menu.Item>
55+
<Menu.Item>{({}) => <ExportConversation />}</Menu.Item>
56+
57+
<div
58+
class="my-1.5 h-px bg-white/20"
59+
role="none"
60+
></div>
61+
<Menu.Item>{({}) => <DarkMode />}</Menu.Item>
62+
<Menu.Item>{({}) => <ClearConvos />}</Menu.Item>
63+
64+
<div
65+
class="my-1.5 h-px bg-white/20"
66+
role="none"
67+
></div>
68+
<Menu.Item>
69+
<Logout />
70+
</Menu.Item>
71+
</Menu.Items>
72+
</Transition>
73+
</>
1474
)}
15-
<ExportConversation />
16-
<DarkMode />
17-
<ClearConvos />
18-
<Logout />
19-
</>
75+
</Menu>
2076
);
2177
}

‎client/src/components/Nav/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,8 @@ export default function Nav({ navVisible, setNavVisible }) {
142142
}
143143
>
144144
<div className="flex h-full min-h-0 flex-col ">
145-
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
146-
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
145+
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20 relative">
146+
<nav className="flex h-full flex-1 flex-col space-y-1 p-2 relative">
147147
<NewChat />
148148
<div
149149
className={`flex-1 flex-col overflow-y-auto ${

‎client/src/components/svg/DotsIcon.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
3+
export default function DotsIcon() {
4+
return (
5+
<svg
6+
stroke="currentColor"
7+
fill="none"
8+
stroke-width="2"
9+
viewBox="0 0 24 24"
10+
stroke-linecap="round"
11+
stroke-linejoin="round"
12+
className="h-4 w-4 flex-shrink-0 text-gray-500"
13+
height="1em"
14+
width="1em"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<circle
18+
cx="12"
19+
cy="12"
20+
r="1"
21+
></circle>
22+
<circle
23+
cx="19"
24+
cy="12"
25+
r="1"
26+
></circle>
27+
<circle
28+
cx="5"
29+
cy="12"
30+
r="1"
31+
></circle>
32+
</svg>
33+
);
34+
}

0 commit comments

Comments
 (0)