feat: dropdown menu animation

and easter egg

src/App.jsx

@@ -35,6 +35,17 @@ function App() {
 
   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 (
     <div
       className="grid grid-cols-4  lg:grid-cols-5  gap-10 text-black dark:text-white"

src/components/menu.jsx

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

src/pages/settings.jsx

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