@@ -34,104 +34,122 @@ export function SidebarProfile(): JSX.Element {
34
34
} } , [ user ] ) ;
35
35
36
36
return (
37
- < >
38
- < Modal
39
- modalClassName = 'max-w-xs bg-main-background w-full p-8 rounded-2xl'
40
- open = { open }
41
- closeModal = { closeModal }
42
- >
43
- < ActionModal
44
- useIcon
45
- focusOnMainBtn
46
- title = 'Log out of Twitter ?'
47
- description = 'You can always log back in at any time. If you just want to switch accounts, you can do that by adding an existing account.'
48
- mainBtnLabel = 'Log out'
49
- action = { signOut }
50
- closeModal = { closeModal }
51
- />
52
- </ Modal >
53
- < Menu className = 'relative' as = 'section' >
54
- { ( { open } ) : JSX . Element => (
55
- < >
56
- < Menu . Button
57
- className = { cn (
58
- `custom-button main-tab dark-bg-tab flex w-full items-center
37
+ < >
38
+ < Modal
39
+ modalClassName = 'max-w-xs bg-main-background w-full p-8 rounded-2xl'
40
+ open = { open }
41
+ closeModal = { closeModal }
42
+ >
43
+ < ActionModal
44
+ useIcon
45
+ focusOnMainBtn
46
+ title = 'Log out of Blabsy ?'
47
+ description = 'You can always log back in at any time. If you just want to switch accounts, you can do that by adding an existing account.'
48
+ mainBtnLabel = 'Log out'
49
+ action = { signOut }
50
+ closeModal = { closeModal }
51
+ />
52
+ </ Modal >
53
+ < Menu className = 'relative' as = 'section' >
54
+ { ( { open } ) : JSX . Element => (
55
+ < >
56
+ < Menu . Button
57
+ className = { cn (
58
+ `custom-button main-tab dark-bg-tab flex w-full items-center
59
59
justify-between hover:bg-light-primary/10 active:bg-light-primary/20
60
60
dark:hover:bg-dark-primary/10 dark:active:bg-dark-primary/20` ,
61
- open && 'bg-light-primary/10 dark:bg-dark-primary/10'
62
- ) }
63
- >
64
- < div className = 'flex gap-3 truncate' >
65
- < UserAvatar src = { photoURL } alt = { name } size = { 40 } />
66
- < div className = 'hidden truncate text-start leading-5 xl:block' >
67
- < UserName name = { name } className = 'start' verified = { verified } />
68
- < UserUsername username = { username } disableLink />
69
- </ div >
70
- </ div >
71
- < HeroIcon
72
- className = 'hidden h-6 w-6 xl:block'
73
- iconName = 'EllipsisHorizontalIcon'
74
- />
75
- </ Menu . Button >
76
- < AnimatePresence >
77
- { open && (
78
- < Menu . Items
79
- className = 'menu-container absolute left-0 right-0 -top-36 w-60 xl:w-full'
80
- as = { motion . div }
81
- { ...variants }
82
- static
83
- >
84
- < Menu . Item
85
- className = 'flex items-center justify-between gap-4 border-b
86
- border-light-border px-4 py-3 dark:border-dark-border'
87
- as = 'div'
88
- disabled
89
- >
90
- < div className = 'flex items-center gap-3 truncate' >
91
- < UserAvatar src = { photoURL } alt = { name } />
92
- < div className = 'truncate' >
93
- < UserName name = { name } verified = { verified } />
94
- < UserUsername username = { username } disableLink />
95
- </ div >
96
- </ div >
97
- < i >
98
- < HeroIcon
99
- className = 'h-5 w-5 text-main-accent'
100
- iconName = 'CheckIcon'
101
- />
102
- </ i >
103
- </ Menu . Item >
104
- < Menu . Item >
105
- { ( { active } ) : JSX . Element => (
106
- < Button
107
- className = { cn (
108
- 'flex w-full gap-3 rounded-md rounded-t-none p-4' ,
109
- active && 'bg-main-sidebar-background'
110
- ) }
111
- onClick = { openModal }
61
+ open &&
62
+ 'bg-light-primary/10 dark:bg-dark-primary/10'
63
+ ) }
112
64
>
113
- < HeroIcon iconName = 'ArrowRightOnRectangleIcon' />
114
- Log out @{ username }
115
- </ Button >
116
- ) }
117
- </ Menu . Item >
118
- < i
119
- className = 'absolute -bottom-[10px] left-2 translate-x-1/2 rotate-180
120
- [filter:drop-shadow(#cfd9de_1px_-1px_1px)]
65
+ < div className = 'flex gap-3 truncate' >
66
+ < UserAvatar src = { photoURL } alt = { name } size = { 40 } />
67
+ < div className = 'hidden truncate text-start leading-5 xl:block' >
68
+ < UserName
69
+ name = { name }
70
+ className = 'start'
71
+ verified = { verified }
72
+ />
73
+ < UserUsername
74
+ username = { username }
75
+ disableLink
76
+ />
77
+ </ div >
78
+ </ div >
79
+ < HeroIcon
80
+ className = 'hidden h-6 w-6 xl:block'
81
+ iconName = 'EllipsisHorizontalIcon'
82
+ />
83
+ </ Menu . Button >
84
+ < AnimatePresence >
85
+ { open && (
86
+ < Menu . Items
87
+ className = 'menu-container absolute left-0 right-0 -top-36 w-60 xl:w-full'
88
+ as = { motion . div }
89
+ { ...variants }
90
+ static
91
+ >
92
+ < Menu . Item
93
+ className = 'flex items-center justify-between gap-4 border-b
94
+ border-light-border px-4 py-3 dark:border-dark-border'
95
+ as = 'div'
96
+ disabled
97
+ >
98
+ < div className = 'flex items-center gap-3 truncate' >
99
+ < UserAvatar
100
+ src = { photoURL }
101
+ alt = { name }
102
+ />
103
+ < div className = 'truncate' >
104
+ < UserName
105
+ name = { name }
106
+ verified = { verified }
107
+ />
108
+ < UserUsername
109
+ username = { username }
110
+ disableLink
111
+ />
112
+ </ div >
113
+ </ div >
114
+ < i >
115
+ < HeroIcon
116
+ className = 'h-5 w-5 text-main-accent'
117
+ iconName = 'CheckIcon'
118
+ />
119
+ </ i >
120
+ </ Menu . Item >
121
+ < Menu . Item >
122
+ { ( { active } ) : JSX . Element => (
123
+ < Button
124
+ className = { cn (
125
+ 'flex w-full gap-3 rounded-md rounded-t-none p-4' ,
126
+ active &&
127
+ 'bg-main-sidebar-background'
128
+ ) }
129
+ onClick = { openModal }
130
+ >
131
+ < HeroIcon iconName = 'ArrowRightOnRectangleIcon' />
132
+ Log out @{ username }
133
+ </ Button >
134
+ ) }
135
+ </ Menu . Item >
136
+ < i
137
+ className = 'absolute -bottom-[10px] left-2 translate-x-1/2 rotate-180
138
+ [filter:drop-shadow(#cfd9de_1px_-1px_1px)]
121
139
dark:[filter:drop-shadow(#333639_1px_-1px_1px)]
122
140
xl:left-1/2 xl:-translate-x-1/2'
123
- >
124
- < CustomIcon
125
- className = 'h-4 w-6 fill-main-background'
126
- iconName = 'TriangleIcon'
127
- />
128
- </ i >
129
- </ Menu . Items >
141
+ >
142
+ < CustomIcon
143
+ className = 'h-4 w-6 fill-main-background'
144
+ iconName = 'TriangleIcon'
145
+ />
146
+ </ i >
147
+ </ Menu . Items >
148
+ ) }
149
+ </ AnimatePresence >
150
+ </ >
130
151
) }
131
- </ AnimatePresence >
132
- </ >
133
- ) }
134
- </ Menu >
135
- </ >
152
+ </ Menu >
153
+ </ >
136
154
) ;
137
155
}
0 commit comments