uibee 2.4.10 → 2.4.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/navbar/navbar.js +3 -17
- package/dist/src/components/navbar/navbarDropdown.js +3 -5
- package/dist/src/globals.css +6 -196
- package/package.json +1 -1
- package/src/components/navbar/navbar.tsx +4 -20
- package/src/components/navbar/navbarDropdown.tsx +13 -8
- package/src/globals.css +7 -1
|
@@ -5,7 +5,7 @@ import Link from 'next/link';
|
|
|
5
5
|
import LogoSmall from '../logo/logoSmall';
|
|
6
6
|
import LanguageToggle from '../toggle/language';
|
|
7
7
|
import ThemeToggle from '../toggle/theme';
|
|
8
|
-
import { LogOut } from 'lucide-react';
|
|
8
|
+
import { LogOut, User } from 'lucide-react';
|
|
9
9
|
function hamburgerStyle(isOpen, isSecond) {
|
|
10
10
|
return `bg-login-50 h-0.5 absolute w-8 transition-all duration-[400ms] left-2 ${isOpen
|
|
11
11
|
? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
|
|
@@ -23,23 +23,9 @@ export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableT
|
|
|
23
23
|
}, children: child }, index))) })] }))] }) }));
|
|
24
24
|
}
|
|
25
25
|
function AuthButton({ profileURL, token }) {
|
|
26
|
-
return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-
|
|
26
|
+
return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12', children: token ? (_jsxs(_Fragment, { children: [_jsx(Link, { href: '/api/logout', prefetch: false, onClick: (e) => {
|
|
27
27
|
e.preventDefault();
|
|
28
28
|
window.location.href = '/api/logout';
|
|
29
29
|
}, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) }), profileURL &&
|
|
30
|
-
_jsx(Link, { href: profileURL, className: 'grid items-center justify-center h-full w-full', children: _jsx(
|
|
31
|
-
before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
|
|
32
|
-
before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
|
|
33
|
-
before:rounded-full before:bg-transparent
|
|
34
|
-
after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
|
|
35
|
-
after:w-[18px] after:h-2 after:border-2 after:border-login-50
|
|
36
|
-
after:rounded-t-[22px] after:border-b-0 after:bg-transparent
|
|
37
|
-
` }) })] })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx("div", { className: `relative w-[30px] h-5
|
|
38
|
-
before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
|
|
39
|
-
before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
|
|
40
|
-
before:rounded-full before:bg-transparent
|
|
41
|
-
after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
|
|
42
|
-
after:w-[18px] after:h-2 after:border-2 after:border-login-50
|
|
43
|
-
after:rounded-t-[22px] after:border-b-0 after:bg-transparent
|
|
44
|
-
` }) })) }));
|
|
30
|
+
_jsx(Link, { href: profileURL, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })] })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })) }));
|
|
45
31
|
}
|
|
@@ -4,12 +4,10 @@ import { ChevronDown } from 'lucide-react';
|
|
|
4
4
|
import React, { useRef, useState } from 'react';
|
|
5
5
|
export default function NavDropdown({ children, title, className }) {
|
|
6
6
|
const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
|
|
7
|
+
const [isDesktopOpen, setIsDesktopOpen] = useState(false);
|
|
7
8
|
const navItemRef = useRef(null);
|
|
8
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative
|
|
9
|
-
transition-colors`, children: [title, _jsx(ChevronDown, { className: 'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out' })] }), _jsx("div", { className: `absolute pt-2 -ml-4 -translate-y-
|
|
10
|
-
transition-all duration-200 ease-in-out z-10
|
|
11
|
-
group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0
|
|
12
|
-
group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`, children: _jsx("ul", { className: `p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${className || ''}`, onClick: () => navItemRef.current?.blur(), children: React.Children.map(children, (child, index) => (_jsx("div", { onClick: () => navItemRef.current?.blur(), className: 'group dropdown', children: child }, index))) }) })] }) }), _jsxs("div", { className: 'block 800px:hidden!', children: [_jsx("button", { className: 'bg-none border-none cursor-pointer w-full text-left', onClick: (e) => {
|
|
9
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative hidden 800px:block', children: _jsxs("div", { className: 'outline-none', tabIndex: 0, ref: navItemRef, onMouseEnter: () => setIsDesktopOpen(true), onMouseLeave: () => setIsDesktopOpen(false), onFocus: () => setIsDesktopOpen(true), onBlur: () => setIsDesktopOpen(false), children: [_jsxs("div", { className: `list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center
|
|
10
|
+
transition-colors`, children: [title, _jsx(ChevronDown, { className: 'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out' })] }), _jsx("div", { className: `absolute pt-2 -ml-4 transition-all duration-200 ease-in-out z-10 ${isDesktopOpen ? 'opacity-100 pointer-events-auto translate-y-0' : 'opacity-0 pointer-events-none -translate-y-4'}`, children: _jsx("ul", { className: `p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${className || ''}`, onClick: () => setIsDesktopOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { onClick: () => setIsDesktopOpen(false), className: 'group dropdown', children: child }, index))) }) })] }) }), _jsxs("div", { className: 'block 800px:hidden!', children: [_jsx("button", { className: 'bg-none border-none cursor-pointer w-full text-left', onClick: (e) => {
|
|
13
11
|
e.stopPropagation();
|
|
14
12
|
setIsMobileDropdownOpen(!isMobileDropdownOpen);
|
|
15
13
|
}, children: _jsxs("li", { className: `list-none no-underline text-2xl leading-6 overflow-hidden
|
package/dist/src/globals.css
CHANGED
|
@@ -212,6 +212,9 @@
|
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
@layer utilities {
|
|
215
|
+
.pointer-events-auto {
|
|
216
|
+
pointer-events: auto;
|
|
217
|
+
}
|
|
215
218
|
.pointer-events-none {
|
|
216
219
|
pointer-events: none;
|
|
217
220
|
}
|
|
@@ -429,9 +432,6 @@
|
|
|
429
432
|
.h-4 {
|
|
430
433
|
height: calc(var(--spacing) * 4);
|
|
431
434
|
}
|
|
432
|
-
.h-5 {
|
|
433
|
-
height: calc(var(--spacing) * 5);
|
|
434
|
-
}
|
|
435
435
|
.h-6 {
|
|
436
436
|
height: calc(var(--spacing) * 6);
|
|
437
437
|
}
|
|
@@ -486,9 +486,6 @@
|
|
|
486
486
|
.w-\[4\.3rem\] {
|
|
487
487
|
width: 4.3rem;
|
|
488
488
|
}
|
|
489
|
-
.w-\[30px\] {
|
|
490
|
-
width: 30px;
|
|
491
|
-
}
|
|
492
489
|
.w-\[calc\(100\%-2rem\)\] {
|
|
493
490
|
width: calc(100% - 2rem);
|
|
494
491
|
}
|
|
@@ -1075,44 +1072,6 @@
|
|
|
1075
1072
|
--tw-outline-style: none;
|
|
1076
1073
|
outline-style: none;
|
|
1077
1074
|
}
|
|
1078
|
-
.group-focus-within\:pointer-events-auto {
|
|
1079
|
-
&:is(:where(.group):focus-within *) {
|
|
1080
|
-
pointer-events: auto;
|
|
1081
|
-
}
|
|
1082
|
-
}
|
|
1083
|
-
.group-focus-within\:translate-y-0 {
|
|
1084
|
-
&:is(:where(.group):focus-within *) {
|
|
1085
|
-
--tw-translate-y: calc(var(--spacing) * 0);
|
|
1086
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1087
|
-
}
|
|
1088
|
-
}
|
|
1089
|
-
.group-focus-within\:opacity-100 {
|
|
1090
|
-
&:is(:where(.group):focus-within *) {
|
|
1091
|
-
opacity: 100%;
|
|
1092
|
-
}
|
|
1093
|
-
}
|
|
1094
|
-
.group-hover\:pointer-events-auto {
|
|
1095
|
-
&:is(:where(.group):hover *) {
|
|
1096
|
-
@media (hover: hover) {
|
|
1097
|
-
pointer-events: auto;
|
|
1098
|
-
}
|
|
1099
|
-
}
|
|
1100
|
-
}
|
|
1101
|
-
.group-hover\:translate-y-0 {
|
|
1102
|
-
&:is(:where(.group):hover *) {
|
|
1103
|
-
@media (hover: hover) {
|
|
1104
|
-
--tw-translate-y: calc(var(--spacing) * 0);
|
|
1105
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1106
|
-
}
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
1109
|
-
.group-hover\:opacity-100 {
|
|
1110
|
-
&:is(:where(.group):hover *) {
|
|
1111
|
-
@media (hover: hover) {
|
|
1112
|
-
opacity: 100%;
|
|
1113
|
-
}
|
|
1114
|
-
}
|
|
1115
|
-
}
|
|
1116
1075
|
.group-\[\.dropdown\]\:h-auto {
|
|
1117
1076
|
&:is(:where(.group):is(.dropdown) *) {
|
|
1118
1077
|
height: auto;
|
|
@@ -1203,163 +1162,12 @@
|
|
|
1203
1162
|
padding-inline: calc(var(--spacing) * 2);
|
|
1204
1163
|
}
|
|
1205
1164
|
}
|
|
1206
|
-
.before\:absolute {
|
|
1207
|
-
&::before {
|
|
1208
|
-
content: var(--tw-content);
|
|
1209
|
-
position: absolute;
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
|
-
.before\:top-0 {
|
|
1213
|
-
&::before {
|
|
1214
|
-
content: var(--tw-content);
|
|
1215
|
-
top: calc(var(--spacing) * 0);
|
|
1216
|
-
}
|
|
1217
|
-
}
|
|
1218
|
-
.before\:left-1\/2 {
|
|
1219
|
-
&::before {
|
|
1220
|
-
content: var(--tw-content);
|
|
1221
|
-
left: calc(1/2 * 100%);
|
|
1222
|
-
}
|
|
1223
|
-
}
|
|
1224
|
-
.before\:h-2\.5 {
|
|
1225
|
-
&::before {
|
|
1226
|
-
content: var(--tw-content);
|
|
1227
|
-
height: calc(var(--spacing) * 2.5);
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
.before\:w-2\.5 {
|
|
1231
|
-
&::before {
|
|
1232
|
-
content: var(--tw-content);
|
|
1233
|
-
width: calc(var(--spacing) * 2.5);
|
|
1234
|
-
}
|
|
1235
|
-
}
|
|
1236
|
-
.before\:-translate-x-1\/2 {
|
|
1237
|
-
&::before {
|
|
1238
|
-
content: var(--tw-content);
|
|
1239
|
-
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
1240
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
.before\:rounded-full {
|
|
1244
|
-
&::before {
|
|
1245
|
-
content: var(--tw-content);
|
|
1246
|
-
border-radius: calc(infinity * 1px);
|
|
1247
|
-
}
|
|
1248
|
-
}
|
|
1249
|
-
.before\:border-2 {
|
|
1250
|
-
&::before {
|
|
1251
|
-
content: var(--tw-content);
|
|
1252
|
-
border-style: var(--tw-border-style);
|
|
1253
|
-
border-width: 2px;
|
|
1254
|
-
}
|
|
1255
|
-
}
|
|
1256
|
-
.before\:border-login-50 {
|
|
1257
|
-
&::before {
|
|
1258
|
-
content: var(--tw-content);
|
|
1259
|
-
border-color: var(--color-login-50);
|
|
1260
|
-
}
|
|
1261
|
-
}
|
|
1262
|
-
.before\:bg-transparent {
|
|
1263
|
-
&::before {
|
|
1264
|
-
content: var(--tw-content);
|
|
1265
|
-
background-color: transparent;
|
|
1266
|
-
}
|
|
1267
|
-
}
|
|
1268
|
-
.before\:content-\[\"\"\] {
|
|
1269
|
-
&::before {
|
|
1270
|
-
--tw-content: "";
|
|
1271
|
-
content: var(--tw-content);
|
|
1272
|
-
}
|
|
1273
|
-
}
|
|
1274
|
-
.after\:absolute {
|
|
1275
|
-
&::after {
|
|
1276
|
-
content: var(--tw-content);
|
|
1277
|
-
position: absolute;
|
|
1278
|
-
}
|
|
1279
|
-
}
|
|
1280
|
-
.after\:bottom-0 {
|
|
1281
|
-
&::after {
|
|
1282
|
-
content: var(--tw-content);
|
|
1283
|
-
bottom: calc(var(--spacing) * 0);
|
|
1284
|
-
}
|
|
1285
|
-
}
|
|
1286
|
-
.after\:left-1\/2 {
|
|
1287
|
-
&::after {
|
|
1288
|
-
content: var(--tw-content);
|
|
1289
|
-
left: calc(1/2 * 100%);
|
|
1290
|
-
}
|
|
1291
|
-
}
|
|
1292
|
-
.after\:h-2 {
|
|
1293
|
-
&::after {
|
|
1294
|
-
content: var(--tw-content);
|
|
1295
|
-
height: calc(var(--spacing) * 2);
|
|
1296
|
-
}
|
|
1297
|
-
}
|
|
1298
|
-
.after\:w-\[18px\] {
|
|
1299
|
-
&::after {
|
|
1300
|
-
content: var(--tw-content);
|
|
1301
|
-
width: 18px;
|
|
1302
|
-
}
|
|
1303
|
-
}
|
|
1304
|
-
.after\:-translate-x-1\/2 {
|
|
1305
|
-
&::after {
|
|
1306
|
-
content: var(--tw-content);
|
|
1307
|
-
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
1308
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1309
|
-
}
|
|
1310
|
-
}
|
|
1311
|
-
.after\:rounded-t-\[22px\] {
|
|
1312
|
-
&::after {
|
|
1313
|
-
content: var(--tw-content);
|
|
1314
|
-
border-top-left-radius: 22px;
|
|
1315
|
-
border-top-right-radius: 22px;
|
|
1316
|
-
}
|
|
1317
|
-
}
|
|
1318
|
-
.after\:border-2 {
|
|
1319
|
-
&::after {
|
|
1320
|
-
content: var(--tw-content);
|
|
1321
|
-
border-style: var(--tw-border-style);
|
|
1322
|
-
border-width: 2px;
|
|
1323
|
-
}
|
|
1324
|
-
}
|
|
1325
|
-
.after\:border-b-0 {
|
|
1326
|
-
&::after {
|
|
1327
|
-
content: var(--tw-content);
|
|
1328
|
-
border-bottom-style: var(--tw-border-style);
|
|
1329
|
-
border-bottom-width: 0px;
|
|
1330
|
-
}
|
|
1331
|
-
}
|
|
1332
|
-
.after\:border-login-50 {
|
|
1333
|
-
&::after {
|
|
1334
|
-
content: var(--tw-content);
|
|
1335
|
-
border-color: var(--color-login-50);
|
|
1336
|
-
}
|
|
1337
|
-
}
|
|
1338
|
-
.after\:bg-transparent {
|
|
1339
|
-
&::after {
|
|
1340
|
-
content: var(--tw-content);
|
|
1341
|
-
background-color: transparent;
|
|
1342
|
-
}
|
|
1343
|
-
}
|
|
1344
|
-
.after\:content-\[\"\"\] {
|
|
1345
|
-
&::after {
|
|
1346
|
-
--tw-content: "";
|
|
1347
|
-
content: var(--tw-content);
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
1165
|
.after\:content-\[\"_\*\"\] {
|
|
1351
1166
|
&::after {
|
|
1352
1167
|
--tw-content: " *";
|
|
1353
1168
|
content: var(--tw-content);
|
|
1354
1169
|
}
|
|
1355
1170
|
}
|
|
1356
|
-
.hover\:bg-\[\#6464641a\] {
|
|
1357
|
-
&:hover {
|
|
1358
|
-
@media (hover: hover) {
|
|
1359
|
-
background-color: #6464641a;
|
|
1360
|
-
}
|
|
1361
|
-
}
|
|
1362
|
-
}
|
|
1363
1171
|
.hover\:bg-gray-400\/10 {
|
|
1364
1172
|
&:hover {
|
|
1365
1173
|
@media (hover: hover) {
|
|
@@ -1491,7 +1299,7 @@
|
|
|
1491
1299
|
}
|
|
1492
1300
|
:root {
|
|
1493
1301
|
transition: background 0.4s,
|
|
1494
|
-
color 0.4s
|
|
1302
|
+
color 0.4s,;
|
|
1495
1303
|
}
|
|
1496
1304
|
.dark {
|
|
1497
1305
|
--background: #0e0e0e;
|
|
@@ -1508,6 +1316,7 @@
|
|
|
1508
1316
|
--color-login-200: #6b6b6b;
|
|
1509
1317
|
--color-login-100: #b0b0b0;
|
|
1510
1318
|
--color-login-50: #ededed;
|
|
1319
|
+
--color-login-text: #ededed;
|
|
1511
1320
|
}
|
|
1512
1321
|
.light {
|
|
1513
1322
|
--background: #ededed;
|
|
@@ -1524,6 +1333,7 @@
|
|
|
1524
1333
|
--color-login-200: #fafafa;
|
|
1525
1334
|
--color-login-100: #fcfcfc;
|
|
1526
1335
|
--color-login-50: #ffffff;
|
|
1336
|
+
--color-login-text: #0e0e0e;
|
|
1527
1337
|
}
|
|
1528
1338
|
@keyframes jump {
|
|
1529
1339
|
40% {
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import LogoSmall from '@components/logo/logoSmall'
|
|
|
6
6
|
import LanguageToggle from '@components/toggle/language'
|
|
7
7
|
import ThemeToggle from '@components/toggle/theme'
|
|
8
8
|
import { Language } from 'uibee/components'
|
|
9
|
-
import { LogOut } from 'lucide-react'
|
|
9
|
+
import { LogOut, User } from 'lucide-react'
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
|
|
@@ -114,7 +114,7 @@ export default function Navbar({
|
|
|
114
114
|
function AuthButton({ profileURL, token }: { profileURL?: string, token?: string | null }) {
|
|
115
115
|
|
|
116
116
|
return (
|
|
117
|
-
<div className='rounded-[0.3rem] hover:bg-
|
|
117
|
+
<div className='rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12'>
|
|
118
118
|
{token ? (
|
|
119
119
|
<>
|
|
120
120
|
<Link
|
|
@@ -133,15 +133,7 @@ function AuthButton({ profileURL, token }: { profileURL?: string, token?: string
|
|
|
133
133
|
href={profileURL}
|
|
134
134
|
className='grid items-center justify-center h-full w-full'
|
|
135
135
|
>
|
|
136
|
-
<
|
|
137
|
-
before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
|
|
138
|
-
before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
|
|
139
|
-
before:rounded-full before:bg-transparent
|
|
140
|
-
after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
|
|
141
|
-
after:w-[18px] after:h-2 after:border-2 after:border-login-50
|
|
142
|
-
after:rounded-t-[22px] after:border-b-0 after:bg-transparent
|
|
143
|
-
`}
|
|
144
|
-
/>
|
|
136
|
+
<User size={24} />
|
|
145
137
|
</Link>
|
|
146
138
|
}
|
|
147
139
|
</>
|
|
@@ -150,15 +142,7 @@ function AuthButton({ profileURL, token }: { profileURL?: string, token?: string
|
|
|
150
142
|
href='/api/login'
|
|
151
143
|
className='grid items-center justify-center h-full w-full'
|
|
152
144
|
>
|
|
153
|
-
<
|
|
154
|
-
before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
|
|
155
|
-
before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
|
|
156
|
-
before:rounded-full before:bg-transparent
|
|
157
|
-
after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
|
|
158
|
-
after:w-[18px] after:h-2 after:border-2 after:border-login-50
|
|
159
|
-
after:rounded-t-[22px] after:border-b-0 after:bg-transparent
|
|
160
|
-
`}
|
|
161
|
-
/>
|
|
145
|
+
<User size={24} />
|
|
162
146
|
</Link>
|
|
163
147
|
)}
|
|
164
148
|
</div>
|
|
@@ -11,33 +11,38 @@ export type NavDropdownProps = {
|
|
|
11
11
|
|
|
12
12
|
export default function NavDropdown({ children, title, className }: NavDropdownProps) {
|
|
13
13
|
const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false)
|
|
14
|
+
const [isDesktopOpen, setIsDesktopOpen] = useState(false)
|
|
14
15
|
const navItemRef = useRef<HTMLDivElement>(null)
|
|
15
16
|
|
|
16
17
|
return (
|
|
17
18
|
<>
|
|
18
19
|
{/* Desktop Dropdown */}
|
|
19
|
-
<div className={'relative
|
|
20
|
-
<div className='outline-none' tabIndex={0} ref={navItemRef}
|
|
20
|
+
<div className={'relative hidden 800px:block'}>
|
|
21
|
+
<div className='outline-none' tabIndex={0} ref={navItemRef}
|
|
22
|
+
onMouseEnter={() => setIsDesktopOpen(true)}
|
|
23
|
+
onMouseLeave={() => setIsDesktopOpen(false)}
|
|
24
|
+
onFocus={() => setIsDesktopOpen(true)}
|
|
25
|
+
onBlur={() => setIsDesktopOpen(false)}
|
|
26
|
+
>
|
|
21
27
|
<div className={`list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center
|
|
22
28
|
transition-colors`
|
|
23
29
|
}>
|
|
24
30
|
{title}
|
|
25
31
|
<ChevronDown className={'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out'} />
|
|
26
32
|
</div>
|
|
27
|
-
<div className={`absolute pt-2 -ml-4 -
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`}
|
|
33
|
+
<div className={`absolute pt-2 -ml-4 transition-all duration-200 ease-in-out z-10 ${
|
|
34
|
+
isDesktopOpen ? 'opacity-100 pointer-events-auto translate-y-0' : 'opacity-0 pointer-events-none -translate-y-4'
|
|
35
|
+
}`}
|
|
31
36
|
>
|
|
32
37
|
<ul
|
|
33
38
|
className={`p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${
|
|
34
39
|
className || ''}`}
|
|
35
|
-
onClick={() =>
|
|
40
|
+
onClick={() => setIsDesktopOpen(false)}
|
|
36
41
|
>
|
|
37
42
|
{React.Children.map(children, (child, index) => (
|
|
38
43
|
<div
|
|
39
44
|
key={index}
|
|
40
|
-
onClick={() =>
|
|
45
|
+
onClick={() => setIsDesktopOpen(false)}
|
|
41
46
|
className='group dropdown'
|
|
42
47
|
>
|
|
43
48
|
{child}
|
package/src/globals.css
CHANGED
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
--color-login-200: #727272;
|
|
35
35
|
--color-login-100: #b0b0b0;
|
|
36
36
|
--color-login-50: #ededed;
|
|
37
|
+
|
|
38
|
+
--color-login-text: #ededed;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
@utility noscroll {
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
:root {
|
|
54
56
|
transition:
|
|
55
57
|
background 0.4s,
|
|
56
|
-
color 0.4s
|
|
58
|
+
color 0.4s,
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
.dark {
|
|
@@ -72,6 +74,8 @@
|
|
|
72
74
|
--color-login-200: #6b6b6b;
|
|
73
75
|
--color-login-100: #b0b0b0;
|
|
74
76
|
--color-login-50: #ededed;
|
|
77
|
+
|
|
78
|
+
--color-login-text: #ededed;
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
.light {
|
|
@@ -90,6 +94,8 @@
|
|
|
90
94
|
--color-login-200: #fafafa;
|
|
91
95
|
--color-login-100: #fcfcfc;
|
|
92
96
|
--color-login-50: #ffffff;
|
|
97
|
+
|
|
98
|
+
--color-login-text: #0e0e0e;
|
|
93
99
|
}
|
|
94
100
|
|
|
95
101
|
@keyframes jump {
|