feat: dropdown menu animation

and easter egg
This commit is contained in:
Artemy 2023-04-11 11:57:14 +03:00
parent 6cbf5b26ad
commit 02a96f746c
3 changed files with 26 additions and 1 deletions

View file

@ -35,6 +35,17 @@ function App() {
window.socket = socket; window.socket = socket;
if (settings.userName == "bruh") {
document.body.classList.add(
"transition-transform",
"transform",
"rotate-180"
);
} else if (document.body.classList.contains("transition-transform")) {
document.body.classList.remove("rotate-180");
document.body.classList.add("rotate-0");
}
return ( return (
<div <div
className="grid grid-cols-4 lg:grid-cols-5 gap-10 text-black dark:text-white" className="grid grid-cols-4 lg:grid-cols-5 gap-10 text-black dark:text-white"

View file

@ -23,6 +23,9 @@ function Menu() {
onClick={() => { onClick={() => {
setHidden(!hidden); setHidden(!hidden);
}} }}
iconClass={`transition-transform transform translate-z-0 h-7 w-7 ${
!hidden ? "rotate-180" : "rotate-0"
}`}
/> />
)} )}
{!hidden && ( {!hidden && (

View file

@ -7,10 +7,12 @@ import {
} from "../components/settingsInputs"; } from "../components/settingsInputs";
import { ButtonWithIcon } from "../components/button"; import { ButtonWithIcon } from "../components/button";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { localesProcess } from "../components/utils"; import { localesProcess, reRenderPage } from "../components/utils";
import { langChoices } from "../localisation/main"; import { langChoices } from "../localisation/main";
function Settings() { function Settings() {
let lastName = settings.userName;
return ( return (
<div> <div>
<h1 className="text-center lg:text-left leading-tight text-2xl font-bold"> <h1 className="text-center lg:text-left leading-tight text-2xl font-bold">
@ -22,6 +24,15 @@ function Settings() {
placeholder={locals.Name} placeholder={locals.Name}
label={locals.UserName} label={locals.UserName}
settingName="userName" settingName="userName"
onChange={() => {
if (settings.userName == "bruh") {
lastName = settings.userName;
reRenderPage();
} else if (lastName == "bruh") {
lastName = settings.userName;
reRenderPage();
}
}}
/> />
<SettingsTextInput <SettingsTextInput