🌐 (components/TopNav.tsx): Add responsive design for mobile menu and…

… GitHub star button, improve accessibility by adding aria labels, and refactor code to make it more readable and maintainable
Ditectrev · Aug 12, 2024 · 6e540a2 · 6e540a2
1 parent b711182
commit 6e540a2
Showing 1 changed file with 98 additions and 12 deletions.
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
@@ -10,10 +10,16 @@ const TopNav = () => {
   const router = useRouter();
   const pathname = usePathname();
   const [windowWidth, setWindowWidth] = useState<number>(0);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
   useEffect(() => {
     setWindowWidth(window.innerWidth);
   }, []);
 
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
   return (
     <div className="h-16 mb-10 w-full px-3 border-b-[1px] border-slate-700 text-white flex justify-between items-center">
       <div className="flex items-center flex-col w-1/2">
@@ -33,19 +39,99 @@ const TopNav = () => {
           height={50}
           width={200}
         />
-        <p className="text-lg">🧪 Practice Exams Platform</p>
+        <p className={`windowWidth < 640 ? "text-lg" : "text-md"`}>
+          🧪 Practice Exams Platform
+        </p>
       </div>
-      <div className="flex items-center flex-col pt-1 w-1/2">
-        <GitHubButton
-          href="https://github.com/Ditectrev/Practice-Exams-Platform"
-          data-color-scheme="no-preference: light; light: light; dark: dark;"
-          data-icon="octicon-star"
-          data-size="large"
-          data-show-count="true"
-          aria-label="Star our platform on GitHub"
-        >
-          {windowWidth < 640 ? "" : "Star"}
-        </GitHubButton>
+      <div className="flex items-center pt-1 w-1/2">
+        {windowWidth < 640 && (
+          <div
+            onClick={toggleMobileMenu}
+            className="cursor-pointer mx-auto text-white"
+          >
+            ☰
+          </div>
+        )}
+        {isMobileMenuOpen && (
+          <div>
+            <a
+              href="https://apps.apple.com/app/cloudmaster-swift/id6503601139"
+              className="mr-4 text-white"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Visit our iOS App"
+            >
+              iOS App
+            </a>
+            <a
+              href="https://shop.ditectrev.com"
+              className="mr-4 text-white"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Visit our Shop"
+            >
+              Shop
+            </a>
+            <GitHubButton
+              href="https://github.com/Ditectrev/Practice-Exams-Platform"
+              data-color-scheme="no-preference: light; light: light; dark: dark;"
+              data-icon="octicon-star"
+              data-size="large"
+              data-show-count="true"
+              aria-label="Star our platform on GitHub"
+            >
+              {windowWidth < 640 ? "" : "Star"}
+            </GitHubButton>
+            <div className="flex items-center pt-1 w-1/2">
+              {windowWidth < 640 && (
+                <div
+                  onClick={toggleMobileMenu}
+                  className="cursor-pointer mx-auto text-white"
+                >
+                  ☰
+                </div>
+              )}
+              {isMobileMenuOpen && (
+                <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-90 flex flex-col items-center justify-center z-50">
+                  <a
+                    href="https://apps.apple.com/app/cloudmaster-swift/id6503601139"
+                    className="mb-4 text-white text-xl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Visit our iOS App"
+                  >
+                    iOS App
+                  </a>
+                  <a
+                    href="https://shop.ditectrev.com"
+                    className="mb-4 text-white text-xl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Visit our Shop"
+                  >
+                    Shop
+                  </a>
+                  <GitHubButton
+                    href="https://github.com/Ditectrev/Practice-Exams-Platform"
+                    data-color-scheme="no-preference: light; light: light; dark: dark;"
+                    data-icon="octicon-star"
+                    data-size="large"
+                    data-show-count="true"
+                    aria-label="Star our platform on GitHub"
+                  >
+                    {windowWidth < 640 ? "" : "Star"}
+                  </GitHubButton>
+                  <button
+                    onClick={toggleMobileMenu}
+                    className="mt-4 text-white text-xl"
+                  >
+                    Close
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );