Skip to content

Commit

Permalink
Navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@AayusBhat26
AayusBhat26 committed Oct 31, 2024
1 parent e9920b8 commit 65d13e0
Showing 1 changed file with 179 additions and 140 deletions.
319 changes: 179 additions & 140 deletions app/(root)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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>
);
Expand Down

0 comments on commit 65d13e0

Please sign in to comment.