The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
Revert "again center user dropdown"
This reverts commit 14ea9355fef6d5f7e1b4c6f34a1411f84342a3cb.
+34
-27
+1
-1
app/layout.tsx
+1
-1
app/layout.tsx
···
99
99
</div>
100
100
</div>
101
101
102
-
<nav className="rlative p-4 flex items-center gap-2 text-base font-medium dark:text-neutral-300 text-neutral-700 select-none mt-7 h-20">
102
+
<nav className="p-4 flex items-center gap-2 text-base font-medium dark:text-neutral-300 text-neutral-700 select-none mt-7 h-20">
103
103
<Link href="/" className={`${montserrat.className} font-semibold flex items-center mr-2`}>
104
104
<Image src="/waya-v3-small.webp" width={34} height={34} alt="" className="rounded-full mr-2" />
105
105
<span className="text-xl dark:text-neutral-100 text-neutral-900">Wamellow</span>
+8
-2
app/translations.ts
+8
-2
app/translations.ts
···
1
1
"use server";
2
2
3
+
import { translationsConfig } from "@/common/languages";
3
4
4
5
export async function loadFile(locale: string) {
5
-
console.log("Fetching locale", locale);
6
+
console.log("Loading locale", locale);
6
7
7
-
return await fetch(`${process.env.NEXT_PUBLIC_BASE_API}/locales/${locale}.json`).then((res) => res.json());
8
+
return await import(`../public/locales/${locale}.json`)
9
+
.then((res) => res.default).catch(async (err) => {
10
+
console.error(`Locale ${locale} not found!`, err);
11
+
return await import(`../public/locales/${translationsConfig.defaultLocale}.json`).then((res) => res.default); // load default locale, if not found
12
+
});
13
+
8
14
}
+25
-24
components/Header.tsx
+25
-24
components/Header.tsx
···
56
56
});
57
57
}, []);
58
58
59
+
const UserButton = (
60
+
<button className={cn("ml-auto flex dark:hover:bg-wamellow hover:bg-wamellow-100 py-2 px-4 rounded-md duration-200 items-center", menu && "dark:bg-wamellow bg-wamellow-100")} onClick={() => setMenu(!menu)}>
61
+
62
+
<Skeleton isLoaded={!!user?.id} className="rounded-full mr-2 h-[30px] w-[30px]">
63
+
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={64} alt="your avatar" />
64
+
</Skeleton>
65
+
66
+
{!user?.id ?
67
+
<Skeleton className="rounded-xl w-20 h-4" />
68
+
:
69
+
<>
70
+
<div className="mr-1 relative bottom-[1px]">@{user?.username}</div>
71
+
<HiChevronDown />
72
+
</>
73
+
}
74
+
75
+
</button>
76
+
);
77
+
59
78
const split = { type: "split" };
60
79
61
80
const buttons = [
···
124
143
}
125
144
}}
126
145
className="
127
-
relative top-6 w-full sm:w-60 dark:bg-wamellow bg-wamellow-100 rounded-md text-base overflow-hidden shadow-md
146
+
relative top-2 sm:right-56 w-full sm:w-60 dark:bg-wamellow bg-wamellow-100 rounded-md text-base overflow-hidden shadow-md
128
147
flex flex-col pt-1
129
148
max-sm:[--y-closed:-16px] [--opacity-closed:0%] sm:[--scale-closed:90%]
130
149
max-sm:[--y-open:0px] [--opacity-open:100%] sm:[--scale-open:100%]
···
182
201
</motion.div>
183
202
);
184
203
185
-
const UserButton = (
186
-
<button className={cn("ml-auto flex dark:hover:bg-wamellow hover:bg-wamellow-100 py-2 px-4 rounded-md duration-200 items-center static sm:relative", menu && "dark:bg-wamellow bg-wamellow-100")} onClick={() => setMenu(!menu)}>
204
+
return (
205
+
<div {...props}>
187
206
188
-
<Skeleton isLoaded={!!user?.id} className="rounded-full mr-2 h-[30px] w-[30px]">
189
-
<ImageReduceMotion url={`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}`} size={64} alt="your avatar" />
190
-
</Skeleton>
207
+
<LanguageSwitcher />
191
208
192
-
{!user?.id ?
193
-
<Skeleton className="rounded-xl w-20 h-4" />
194
-
:
195
-
<>
196
-
<div className="mr-1 relative bottom-[1px]">@{user?.username}</div>
197
-
<HiChevronDown />
198
-
</>
199
-
}
209
+
{loggedin && loginstate !== "ERRORED" ? UserButton : <LoginButton loginstate={loginstate} />}
200
210
201
211
<MotionConfig
202
212
transition={web.reduceMotions ?
···
208
218
<AnimatePresence initial={false}>
209
219
{user?.id && menu &&
210
220
<div className="flex text-base font-medium dark:text-neutral-300 text-neutral-700 select-none overflow-x-hidden">
211
-
<div className="overflow-x-hidden"><div className="absolute left-0 sm:left-[calc(50%-26px)] transform-gpu sm:-translate-x-1/2 z-40 w-full">{UserDropdown}</div></div>
221
+
<div className="ml-auto overflow-x-hidden"><div className="absolute left-0 sm:left-auto px-4 sm:px-0 z-40 w-full">{UserDropdown}</div></div>
212
222
</div>
213
223
}
214
224
</AnimatePresence>
215
225
</MotionConfig>
216
226
217
-
</button>
218
-
);
219
-
220
-
return (
221
-
<div {...props}>
222
-
223
-
<LanguageSwitcher />
224
-
225
-
{loggedin && loginstate !== "ERRORED" ? UserButton : <LoginButton loginstate={loginstate} />}
226
227
</div>
227
228
);
228
229
}