Merge pull request #102 from NiftyLeague/staging

Fix website disabled scroll on mobile
NiftyLeague · Oct 3, 2024 · 46864b6 · 46864b6
2 parents e06abe6 + eea0070
commit 46864b6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
@@ -225,8 +225,7 @@ const Navbar = () => {
 };
 
 const MobileNav = () => {
-  const [toggled, setToggled] = useState<boolean>(false);
-  const checkboxRef = useRef({ checked: false });
+  const [menuOpen, setMenuOpen] = useState<boolean>(false);
   const linkList = [
     {
       href: '/',
@@ -300,15 +299,11 @@ const MobileNav = () => {
       external: true,
     },
   ];
-  const handleUncheck = () => {
-    if (checkboxRef.current?.checked) {
-      checkboxRef.current.checked = false;
-    }
-  };
 
-  const handelChangeToggleStatus = () => {
-    setToggled(!toggled);
-    if (!toggled) {
+  const toggleMenuOpen = () => {
+    const newStateOpen = !menuOpen;
+    setMenuOpen(newStateOpen);
+    if (newStateOpen) {
       document.documentElement.classList.add('scrollDisabled');
     } else {
       document.documentElement.classList.remove('scrollDisabled');
@@ -317,22 +312,19 @@ const MobileNav = () => {
 
   return (
     <div id="nav" className="py-2 mobile-nav align-items-center d-flex position-absolute">
-      <input
-        type="checkbox"
-        id="toggle"
-        style={{ display: 'none' }}
-        ref={checkboxRef as LegacyRef<HTMLInputElement> | undefined}
-      />
-      <label className="toggle-btn toggle-btn__cross" htmlFor="toggle" onClick={handelChangeToggleStatus}>
-        {!toggled ? (
-          <Stack direction="row" gap={1} sx={{ alignItems: 'center' }}>
-            <MenuIcon fontSize="small" />
-            <p>MENU</p>
-          </Stack>
-        ) : (
-          <CloseIcon sx={{ color: 'white' }} />
-        )}
-      </label>
+      <>
+        <input type="checkbox" id="toggle" style={{ display: 'none' }} />
+        <label className="toggle-btn toggle-btn__cross" htmlFor="toggle" onClick={toggleMenuOpen}>
+          {!menuOpen ? (
+            <Stack direction="row" gap={1} sx={{ alignItems: 'center' }}>
+              <MenuIcon fontSize="small" />
+              <p>MENU</p>
+            </Stack>
+          ) : (
+            <CloseIcon sx={{ color: 'white' }} />
+          )}
+        </label>
+      </>
       <a className="ms-auto launch-app-link" href="https://app.niftyleague.com/" target="_blank" rel="noreferrer">
         <button className="btn theme-btn-primary launch-app-btn my-2 ms-auto">Launch App</button>
       </a>
@@ -341,7 +333,7 @@ const MobileNav = () => {
         <ul>
           {linkList.map(item => {
             return (
-              <li key={item.href} onClick={handleUncheck} className="mb-3">
+              <li key={item.href} onClick={toggleMenuOpen} className="mb-3">
                 <Link href={item.href} legacyBehavior>
                   <a>
                     {item.name}

diff --git a/apps/web/src/components/RoadmapTimeline/constants.tsx b/apps/web/src/components/RoadmapTimeline/constants.tsx
@@ -732,10 +732,10 @@ export const ROADMAP_CARDS = [
           competitive experience.
         </p>
         <p className="mb-0">
-          Early-access is now available for playtesting! Significants polish and work is still needed to get the game in
-          Alpha state but stay-tuned! Find our latest build{' '}
+          Early-access is now available for playtesting! Additional polish and work is needed to get the game in Alpha
+          state. Follow our latest updates on Twitter & Discord and find the latest build{' '}
           <a href="https://app.niftyleague.com" target="_blank" rel="noreferrer">
-            here
+            on our webapp
           </a>
           .
         </p>