From b684472ae14b20be18ebd0a327ec316c2ace93e5 Mon Sep 17 00:00:00 2001
From: pranav256 <pranav628@proton.me>
Date: Tue, 3 Nov 2026 18:32:04 +0530
Subject: [PATCH 1/4] fix(lib): prevent resize event listener leak in
 dynamic-width hook

---
 src/lib/dynamic-width.ts | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/lib/dynamic-width.ts b/src/lib/dynamic-width.ts
index 9ad6259a..49f2508f 100644
--- a/src/lib/dynamic-width.ts
+++ b/src/lib/dynamic-width.ts
@@ -4,18 +4,29 @@
  * @license GPL-3.0
  */
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * An easy to use hook for dynamically changing DOM based on window size, fires on page load and resize
  * @param {hookCallback} callback - Callback function for hook
  */
 const hook = (callback: (width: number) => void) => {
+  const savedCallback = useRef(callback);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
   useEffect(() => {
-    window.addEventListener('resize', () => {
-      callback(window.innerWidth);
-    });
-    callback(window.innerWidth);
+    const handleResize = () => {
+      savedCallback.current(window.innerWidth);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, []);
 };
 

From b9920511f715e2e56f312f15c330367c87e3ca67 Mon Sep 17 00:00:00 2001
From: pranav256 <pranav628@proton.me>
Date: Tue, 3 Nov 2026 18:32:05 +0530
Subject: [PATCH 2/4] fix(menu): resolve component anti-pattern and unclosed
 css block in menu

---
 src/components/navigation/menu.tsx | 115 +++++++++++++++++------------
 1 file changed, 68 insertions(+), 47 deletions(-)

diff --git a/src/components/navigation/menu.tsx b/src/components/navigation/menu.tsx
index a5d838d7..95a6be71 100644
--- a/src/components/navigation/menu.tsx
+++ b/src/components/navigation/menu.tsx
@@ -7,9 +7,62 @@ import Link from 'next/link';
 import Submenu from '@/components/navigation/submenu';
 import TranslationList from '../translation/TranslationList';
 import dynamicWidth from '@/lib/dynamic-width';
-import { useState, Component } from 'react';
+import React, { useState } from 'react';
 import { Chiislate } from '../translation/Chiislate';
 
+interface MenuBarProps {
+  useMobileBar: boolean;
+  useFeaturesBeta: boolean;
+  isDarkHeader: boolean;
+  currentPath: string;
+  onNavigate: (route: string) => void;
+}
+
+const MenuBar: React.FC<MenuBarProps> = ({
+  useMobileBar,
+  useFeaturesBeta,
+  isDarkHeader,
+  currentPath,
+  onNavigate
+}) => {
+  return useMobileBar ? (
+    <div id="navcol-1" className="collapse navbar-collapse">
+      <ul className="navbar-nav ms-auto">
+        <Tabs
+          className={isDarkHeader ? 'header-dark-tabs' : undefined}
+          value={currentPath}
+          hideDivider
+          onChange={onNavigate}
+        >
+          <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
+          <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
+          <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
+          <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
+          <Tabs.Item label={<Chiislate>Docs</Chiislate>} value="/docs" />
+        </Tabs>
+      </ul>
+    </div>
+  ) : (
+    <div id="navcol-1" className="collapse navbar-collapse">
+      <ul className="navbar-nav ms-auto">
+        <Tabs
+          className={isDarkHeader ? 'header-dark-tabs' : undefined}
+          value={currentPath}
+          hideDivider
+          onChange={onNavigate}
+        >
+          <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
+          <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
+          <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
+          <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
+          <Tabs.Item label={<Chiislate>Documentation</Chiislate>} value="/docs" />
+          <Tabs.Item label={<Chiislate>Demo</Chiislate>} value="/demo" />
+        </Tabs>
+      </ul>
+    </div>
+  );
+};
+
 const Menu = () => {
   const theme = useTheme();
   const prefers = usePrefers();
@@ -30,51 +83,18 @@ const Menu = () => {
     document.documentElement.classList.toggle('scroll-light', theme.type === 'dark');
   };
 
-  const themeDark = () => {
-    if (theme.type === 'dark' && router.pathname == '/') return true;
-    else return false;
-  };
+  const isDarkHeader = theme.type === 'dark' && router.pathname === '/';
+
+  const menuBarElement = (
+    <MenuBar
+      useMobileBar={useMobileBar}
+      useFeaturesBeta={useFeaturesBeta}
+      isDarkHeader={isDarkHeader}
+      currentPath={router.asPath}
+      onNavigate={(route) => router.push(route)}
+    />
+  );
 
-  class MenuBar extends Component {
-    render() {
-      return useMobileBar ? (
-        <div id="navcol-1" className="collapse navbar-collapse">
-          <ul className="navbar-nav ms-auto">
-            <Tabs
-              className={`${themeDark() ? 'header-dark-tabs' : null}`}
-              value={router.asPath}
-              hideDivider
-              onChange={(route) => router.push(route)}
-            >
-              <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-              <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
-              <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-              <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-              <Tabs.Item label={<Chiislate>Docs</Chiislate>} value="/docs" />
-            </Tabs>
-          </ul>
-        </div>
-      ) : (
-        <div id="navcol-1" className="collapse navbar-collapse">
-          <ul className="navbar-nav ms-auto">
-            <Tabs
-              className={`${themeDark() ? 'header-dark-tabs' : null}`}
-              value={router.asPath}
-              hideDivider
-              onChange={(route) => router.push(route)}
-            >
-              <Tabs.Item label={<Chiislate>Home</Chiislate>} value="/" />
-              <Tabs.Item label={<Chiislate>Features</Chiislate>} value={`/features${useFeaturesBeta ? '-beta' : ''}`} />
-              <Tabs.Item label={<Chiislate>Downloads</Chiislate>} value="/downloads" />
-              <Tabs.Item label={<Chiislate>Support</Chiislate>} value="/support" />
-              <Tabs.Item label={<Chiislate>Documentation</Chiislate>} value="/docs" />
-              <Tabs.Item label={<Chiislate>Demo</Chiislate>} value="/demo" />
-            </Tabs>
-          </ul>
-        </div>
-      );
-    }
-  }
   return (
     <>
       <nav
@@ -87,7 +107,7 @@ const Menu = () => {
             <span className="navbar-toggler-icon"></span>
           </button>
           <Logo />
-          {useAltMenuPosition ? null : <MenuBar />}
+          {useAltMenuPosition ? null : menuBarElement}
           <Button
             aria-label="Toggle dark mode"
             className="theme-button"
@@ -107,7 +127,7 @@ const Menu = () => {
               iconRight={<Download className="theme-buttonicon" size={16} />}
             ></Button>
           </Link>
-          {!useAltMenuPosition ? null : <MenuBar />}
+          {!useAltMenuPosition ? null : menuBarElement}
         </div>
       </nav>
       <Submenu />
@@ -128,6 +148,7 @@ const Menu = () => {
         background: rgba(0, 0, 0, 0.2) !important;
         -webkit-backdrop-filter: blur(2rem);
         padding-right: 6px !important;
+      }
     `}</style>
     </>
   );

From d5cef5d3810b11de556fcea5abe2b846ed6f3355 Mon Sep 17 00:00:00 2001
From: pranav256 <pranav628@proton.me>
Date: Tue, 3 Nov 2026 18:32:05 +0530
Subject: [PATCH 3/4] chore(deps): remove unused jQuery script tag from _app

---
 src/pages/_app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e4116051..3a65c9ae 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -66,7 +66,6 @@ const App = ({ Component, pageProps }: AppProps) => {
         crossOrigin="anonymous"
         referrerPolicy="no-referrer"
       ></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     </>
   );
 };

From ef0f3c7a57fd1282f5f9488d0d51087ef6cd0666 Mon Sep 17 00:00:00 2001
From: pranav256 <pranav628@proton.me>
Date: Wed, 4 Nov 2026 11:02:32 +0530
Subject: [PATCH 4/4] fix(menu): add dynamic key to MenuBar to prevent Geist
 Tabs duplicate registration

---
 src/components/navigation/menu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/navigation/menu.tsx b/src/components/navigation/menu.tsx
index 95a6be71..a4fc879b 100644
--- a/src/components/navigation/menu.tsx
+++ b/src/components/navigation/menu.tsx
@@ -87,6 +87,7 @@ const Menu = () => {
 
   const menuBarElement = (
     <MenuBar
+      key={`${useMobileBar}-${useFeaturesBeta}`}
       useMobileBar={useMobileBar}
       useFeaturesBeta={useFeaturesBeta}
       isDarkHeader={isDarkHeader}