From 65d13e017301f9d61e5d7f6089b45bb8a62756bb Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Thu, 31 Oct 2024 23:47:39 +0530
Subject: [PATCH] Navbar

---
 app/(root)/page.tsx | 319 +++++++++++++++++++++++++-------------------
 1 file changed, 179 insertions(+), 140 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 08ef14c..a966c62 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -54,13 +54,25 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
     setDropdownOpen(false);
   };
 
+  const handleToggleDarkMode = () => {
+    if (!darkMode) {
+      toggleDarkMode(); // Only toggle if currently light mode
+    }
+  };
+
+  const handleToggleLightMode = () => {
+    if (darkMode) {
+      toggleDarkMode(); // Only toggle if currently dark mode
+    }
+  };
+
   return (
     <nav
-      className={`border-gray-400 p-2 fixed w-full z-10 shadow-lg ${
+      className={`p-2 fixed w-full flex z-10 shadow-lg ${
         darkMode ? "bg-[#020611] text-white" : "bg-white text-black"
       }`}
     >
-      <div className="container mx-auto flex justify-between items-center">
+      <div className="container justify-between items-center w-full">
         {/* logo */}
         <div className="flex items-center space-x-6">
           <Link href="/" className="flex items-center space-x-2">
@@ -84,129 +96,146 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
             Community
           </Link>
         </div>
-
-        <div className="flex items-center justify-start space-x-4">
-          <Dialog open={isOpen} onOpenChange={setIsOpen}>
-            <DialogTrigger asChild>
-              <Button
-                variant="outline"
-                className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
-                  darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
-                } border-none outline-none hover:bg-[#425167]`}
-                onClick={() => setIsOpen(true)}
-              >
-                <Search className={darkMode ? "text-gray-400" : "text-black"} />
-                <span className="ml-2 text-[#999595]">Search</span>
-                <span className="ml-24 text-gray-400 text-sm">Command + K</span>
-              </Button>
-            </DialogTrigger>
-            <DialogContent
-              className={`p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
-                darkMode ? "bg-[#020611]" : "bg-white"
-              }`}
-              style={{ marginTop: "20px", position: "absolute", top: "60px" }}
+      </div>
+      <div className="flex items-center justify-end space-x-4">
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
+                darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
+              } border-none outline-none hover:bg-[#425167]`}
+              onClick={() => setIsOpen(true)}
             >
-              <DialogTitle className="sr-only">Search</DialogTitle>
-              <div className="relative flex items-center w-full">
-                <button className="absolute left-3 text-gray-400">
-                  <Search />
-                </button>
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  ref={searchInputRef}
-                  className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
-                    darkMode
-                      ? "text-white bg-[#1f2937] border-gray-600"
-                      : "text-black bg-white border-gray-300"
-                  }`}
-                  style={{
-                    transition: "color 0.3s ease, background-color 0.3s ease",
-                  }}
-                />
-                <button
-                  className="w-[5%] p-2 text-gray-400 hover:text-gray-500"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Esc
-                </button>
-              </div>
-            </DialogContent>
-          </Dialog>
-          <button
-            onClick={() => setIsOpen(true)}
-            className={`md:hidden p-2 rounded-full ${
-              darkMode ? "text-white" : "text-black"
+              <Search className={darkMode ? "text-gray-400" : "text-black"} />
+              <span className="ml-2 text-[#999595]">Search</span>
+              <span className="ml-24 text-gray-400 text-sm">Command + K</span>
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            className={`[&>button]:hidden p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
+              darkMode ? "bg-[#020611]" : "bg-white"
             }`}
+            style={{ marginTop: "20px", position: "absolute", top: "60px" }}
           >
-            <Search />
-          </button>
-          <button
-            className="md:hidden focus:outline-none"
-            onClick={toggleDropdown}
+            <DialogTitle className="sr-only">Search</DialogTitle>
+            <div className="relative flex items-center w-full">
+              <button className="absolute left-3 text-gray-400">
+                <Search />
+              </button>
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                ref={searchInputRef}
+                className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
+                  darkMode
+                    ? "text-white bg-[#1f2937] border-gray-600"
+                    : "text-black bg-white border-gray-300"
+                }`}
+                style={{
+                  transition: "color 0.3s ease, background-color 0.3s ease",
+                }}
+              />
+              <button
+                className="w-[5%] p-2 text-gray-400 hover:text-gray-500"
+                onClick={() => setIsOpen(false)}
+              >
+                Esc
+              </button>
+            </div>
+          </DialogContent>
+        </Dialog>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={`md:hidden p-2 rounded-full ${
+            darkMode ? "text-white" : "text-black"
+          }`}
+        >
+          <Search />
+        </button>
+        <button
+          className="md:hidden focus:outline-none"
+          onClick={toggleDropdown}
+        >
+          <MoreVertical className={darkMode ? "text-white" : "text-black"} />
+        </button>
+        {/* Dropdown Menu for Small Screens */}
+        {dropdownOpen && (
+          <div
+            className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
+              darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
+            }`}
           >
-            <MoreVertical className="text-black" />
-          </button>
-          {/* Dropdown Menu for Small Screens */}
-          {dropdownOpen && (
-            <div
-              className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
-                darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
-              }`}
+            <Link
+              href="/"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
             >
-              <Link
-                href="/"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                Home
-              </Link>
-              <Link
-                href="/learn"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                Learn
-              </Link>
-              <Link
-                href="/about"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                About
-              </Link>
-              <div className="flex items-center justify-between w-full px-4 py-2">
-                <span>Theme</span>
+              Home
+            </Link>
+            <Link
+              href="/learn"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              Learn
+            </Link>
+            <Link
+              href="/about"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              About
+            </Link>
+            <div className="flex items-center justify-between w-full px-4 py-2">
+              <span>Theme</span>
+              <div className="flex space-x-2">
+                {/* Sun Button for Light Mode */}
+                <button
+                  onClick={handleToggleLightMode}
+                  className={`p-2 rounded-full ${
+                    !darkMode ? "bg-[#e4e0e0]" : ""
+                  }`}
+                  aria-label="Switch to Light Mode"
+                >
+                  <Sun />
+                </button>
+
+                {/* Moon Button for Dark Mode */}
                 <button
-                  onClick={() => {
-                    handleDropdownItemClick();
-                    toggleDarkMode();
-                  }}
-                  className="p-1"
+                  onClick={handleToggleDarkMode}
+                  className={`p-2 rounded-full ${
+                    darkMode ? "bg-[#686868]" : ""
+                  }`}
+                  aria-label="Switch to Dark Mode"
                 >
-                  {darkMode ? (
-                    <Sun className="text-yellow-500" />
-                  ) : (
-                    <Moon className="text-blue-500" />
-                  )}
+                  <Moon />
                 </button>
               </div>
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Theme Toggle Button for Large Screens */}
+        {/* Theme Toggle Button for Large Screens */}
+        <div className="hidden md:flex items-center space-x-0.5">
+          {/* Sun Button for Light Mode */}
           <button
-            onClick={toggleDarkMode}
-            className="hidden md:flex items-center p-2 rounded-full hover:bg-gray-200 focus:outline-none"
+            onClick={handleToggleLightMode}
+            className={`p-2 rounded-full ${!darkMode ? "bg-[#e4e0e0]" : ""}`}
+            aria-label="Switch to Light Mode"
           >
-            <span className="mr-2">Theme</span>
-            {darkMode ? (
-              <Sun className="text-yellow-500" />
-            ) : (
-              <Moon className="text-blue-500" />
-            )}
+            <Sun />
+          </button>
+
+          {/* Moon Button for Dark Mode */}
+          <button
+            onClick={handleToggleDarkMode}
+            className={`p-2 rounded-full ${darkMode ? "bg-[#686868]" : ""}`}
+            aria-label="Switch to Dark Mode"
+          >
+            <Moon />
           </button>
         </div>
       </div>
@@ -215,27 +244,30 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
 }
 
 export default function Home() {
-  const [darkMode, setDarkMode] = useState<boolean>(true);
+  const [darkMode, setDarkMode] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("darkMode");
+    if (savedTheme) {
+      setDarkMode(JSON.parse(savedTheme));
+    }
+  }, []);
+
+  // Toggle theme and save it to localStorage
   const toggleDarkMode = () => {
-    setDarkMode((prevMode) => !prevMode);
+    setDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.setItem("darkMode", JSON.stringify(newMode));
+      return newMode;
+    });
   };
 
   return (
     <div
-      className={`${
-        darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
-      } ${isOpen ? "blur-sm" : ""} relative`}
-      style={{ overflowX: "hidden" }} // Prevent horizontal overflow
+      className={darkMode ? "bg-[#020611] text-white" : "bg-white text-black"}
     >
-      <div className="grid-background"></div> {/* Add the grid background */}
-      <div
-        className={`flare-effect ${darkMode ? "dark-flare" : "light-flare"}`}
-      ></div>
-      <div
-        className={`flare-effect-1 ${darkMode ? "dark-flare" : "light-flare"}`}
-      ></div>
       <Navbar
         darkMode={darkMode}
         toggleDarkMode={toggleDarkMode}
@@ -245,25 +277,32 @@ export default function Home() {
       <main
         className={`${
           darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
-        } flex justify-center items-center flex-col min-h-screen pt-16`}
+        } pt-20 transition-colors duration-300 `}
+        style={{
+          minHeight: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
       >
-        <section className="custom-grid w-full flex justify-center items-center flex-col h-[75vh] relative">
-          <p className="font-bold">The road to knowledge starts from here.</p>
-          <div className="relative grid grid-cols-1 grid-rows-1 p-4 text-center z-10">
-            <p className="font-bold text-6xl mt-4 ">
-              Learn in-depth Machine Learning with ML4E
-            </p>
-          </div>
+        {/* Add your main content here */}
+        <div className="p-4 text-center max-w-2xl">
+          <h1 className="text-4xl font-bold">Welcome to ML4E</h1>
+          <p className="mt-4">
+            Explore the world of Machine Learning with easy-to-understand
+            tutorials, datasets, and a vibrant community.
+          </p>
           <Link href="/learn">
-            <Button
-              className={`learn-button mt-8 z-10 hover:shadow-2xl ${
-                darkMode ? "bg-[#020617] text-white" : "bg-[#28292d] text-white"
-              } text-lg px-8 py-4 rounded-lg`}
-            >
-              Start Learning
+            <Button className="learn-button mt-8 z-10 p-6 bg-white text-black text-2xl relative overflow-hidden">
+              <span className="learn-text transition-transform duration-300">
+                Learn Now
+              </span>
+              <span className="learn-emoji absolute inset-0 flex items-center justify-center transition-transform duration-300 transform translate-x-full opacity-0">
+                👨‍💻
+              </span>
             </Button>
           </Link>
-        </section>
+        </div>
       </main>
     </div>
   );