Enhance App layout with mobile menu toggle and improve Fullscreen button positioning; adjust Projects grid for better responsiveness

Author: abdullahalsazib

src/App.tsx

@@ -1,96 +1,80 @@
-// src/App.tsx
 import React, { useState } from "react";
 import Terminal from "./components/Terminal";
 import About from "./components/About";
 import Skills from "./components/Skill";
 import Projects from "./components/Projects";
 import Contact from "./components/Contact";
 import FullScreenToggle from "./components/Fullscreen";
+import { BiMenu, BiX } from "react-icons/bi";
 
 const App: React.FC = () => {
   const [activeWindow, setActiveWindow] = useState<string>("terminal");
+  const [menuOpen, setMenuOpen] = useState<boolean>(false);
 
   return (
-    <div className="">
-      <div className="bg-gray-900 min-h-screen text-gray-200 font-mono">
-        {/* Top Bar */}
-        <div className="bg-gray-800 p-2 flex items-center">
-          <div className="flex space-x-2">
-            <div className="w-3 h-3 rounded-full bg-red-500"></div>
-            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div className="w-3 h-3 rounded-full bg-green-500"></div>
-          </div>
-          <FullScreenToggle />
-          <div className="flex mx-auto space-x-4">
-            <button
-              className={`px-4 cursor-pointer py-1 rounded ${
-                activeWindow === "terminal"
-                  ? "bg-gray-700"
-                  : "bg-gray-800 hover:bg-gray-700"
-              }`}
-              onClick={() => setActiveWindow("terminal")}
-            >
-              Terminal
-            </button>
-            <button
-              className={`px-4 cursor-pointer py-1 rounded ${
-                activeWindow === "about"
-                  ? "bg-gray-700"
-                  : "bg-gray-800 hover:bg-gray-700"
-              }`}
-              onClick={() => setActiveWindow("about")}
-            >
-              About
-            </button>
-            <button
-              className={`px-4 cursor-pointer py-1 rounded ${
-                activeWindow === "skills"
-                  ? "bg-gray-700"
-                  : "bg-gray-800 hover:bg-gray-700"
-              }`}
-              onClick={() => setActiveWindow("skills")}
-            >
-              Skills
-            </button>
-            <button
-              className={`px-4 cursor-pointer py-1 rounded ${
-                activeWindow === "projects"
-                  ? "bg-gray-700"
-                  : "bg-gray-800 hover:bg-gray-700"
-              }`}
-              onClick={() => setActiveWindow("projects")}
-            >
-              Projects
-            </button>
-            <button
-              className={`px-4 cursor-pointer py-1 rounded ${
-                activeWindow === "contact"
-                  ? "bg-gray-700"
-                  : "bg-gray-800 hover:bg-gray-700"
-              }`}
-              onClick={() => setActiveWindow("contact")}
-            >
-              Contact
-            </button>
-          </div>
+    <div className="bg-gray-900 min-h-screen text-gray-200 font-mono">
+      {/* Top Bar */}
+      <div className="bg-gray-800 p-2 flex items-center justify-between">
+        {/* Left Side: Mac-style buttons */}
+        <div className="flex space-x-2">
+          <div className="w-3 h-3 rounded-full bg-red-500"></div>
+          <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+          <div className="w-3 h-3 rounded-full bg-green-500"></div>
+        </div>
+
+        {/* Fullscreen Toggle (Center) */}
+        <FullScreenToggle />
+
+        {/* Mobile Menu Toggle Button */}
+        <button
+          className="md:hidden p-2 text-gray-300 hover:text-white"
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
+          {menuOpen ? <BiX size={24} /> : <BiMenu size={24} />}
+        </button>
+
+        {/* Navbar Links */}
+        <div
+          className={`absolute md:static top-12 left-0 w-full md:w-auto bg-gray-800 md:bg-transparent p-4 md:p-0 md:flex md:space-x-4 transition-all duration-300 ${
+            menuOpen ? "block" : "hidden md:block"
+          }`}
+        >
+          {["terminal", "about", "skills", "projects", "contact"].map(
+            (item) => (
+              <button
+                key={item}
+                className={`block w-full md:w-auto px-4 py-2 md:py-1 rounded text-center ${
+                  activeWindow === item
+                    ? "bg-gray-700"
+                    : "bg-gray-800 hover:bg-gray-700"
+                }`}
+                onClick={() => {
+                  setActiveWindow(item);
+                  setMenuOpen(false);
+                }}
+              >
+                {item.charAt(0).toUpperCase() + item.slice(1)}
+              </button>
+            )
+          )}
+          {/* Download CV Button */}
           <a
             href="/cv.pdf"
             download
-            style={{ textDecoration: "none" }}
-            className="bg-blue-600 hover:bg-blue-700 text-white! px-3 py-1 rounded transition"
+            className="block text-center md:inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition"
           >
             Download CV
           </a>
         </div>
+      </div>
 
-        {/* Main Content */}
-        <div className="container mx-auto p-6">
-          {activeWindow === "terminal" && <Terminal />}
-          {activeWindow === "about" && <About />}
-          {activeWindow === "skills" && <Skills />}
-          {activeWindow === "projects" && <Projects />}
-          {activeWindow === "contact" && <Contact />}
-        </div>
+      {/* Main Content */}
+      <div className="container mx-auto p-6">
+        {activeWindow === "terminal" && <Terminal />}
+        {activeWindow === "about" && <About />}
+        {activeWindow === "skills" && <Skills />}
+        {activeWindow === "projects" && <Projects />}
+        {activeWindow === "contact" && <Contact />}
       </div>
     </div>
   );

src/components/Fullscreen.tsx

@@ -28,7 +28,7 @@ const FullScreenToggle = () => {
   return (
     <button
       onClick={toggleFullScreen}
-      className=" cursor-pointer px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition flex items-center gap-2 fixed rotate-40 top-20 right-39"
+      className=" cursor-pointer px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition flex items-center gap-2 fixed rotate-90 top-40 -right-10 xl:right-20 z-0 md:z-50"
     >
       {isFullScreen ? <IoContract /> : <IoExpand />}
       {isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"}

src/components/Projects.tsx

@@ -109,7 +109,7 @@ const Projects: React.FC = () => {
     <div className="bg-gray-800 rounded-lg p-6 shadow-lg overflow-y-auto max-h-[80vh]">
       <h2 className="text-3xl font-bold mb-6 text-blue-400">📝 My Projects</h2>
 
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 gap-6">
         {projects.map((project, index) => (
           <ProjectCard key={index} {...project} />
         ))}