Add: Navbar component
This commit is contained in:
parent
ed22c39422
commit
e24001bb4a
GPG key ID:
583642324A1D2070
2 changed files with 211 additions and 0 deletions
94
frontend/src/components/Navbar.tsx
Normal file
94
frontend/src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import LightModeToggle from "@/components/LightModeToggle";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { logout } from "@/services/auth"; // Import the logout function
|
||||||
|
|
||||||
|
import ProfileDropdown from "@/components/ProfileDropdown";
|
||||||
|
import UserDropdown from "@/components/UserDropdown";
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||||
|
|
||||||
|
// Check login status on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
const token = localStorage.getItem("access_token");
|
||||||
|
setIsLoggedIn(!!token); // Convert token presence to boolean
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="bg-violet-600 p-4 shadow-md">
|
||||||
|
<div className="container mx-auto flex items-center justify-between">
|
||||||
|
{/* Logo (Always Centered on Mobile) */}
|
||||||
|
<Link to="/" className="text-white text-2xl font-bold mx-auto md:mx-0">
|
||||||
|
{__SITE_NAME__}
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:flex items-center space-x-6">
|
||||||
|
<Link to="/" className="text-white hover:text-gray-300">Home</Link>
|
||||||
|
<Link to="/browse/" className="text-white hover:text-gray-300">Browse</Link>
|
||||||
|
<Link to="/gallery" className="text-white hover:text-gray-300">Gallery</Link>
|
||||||
|
<LightModeToggle />
|
||||||
|
{isLoggedIn ? (
|
||||||
|
<UserDropdown />
|
||||||
|
) : (
|
||||||
|
<Link to="/user/login" className="text-white hover:text-gray-300">Login</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="text-white text-2xl font-bold md:hidden"
|
||||||
|
>
|
||||||
|
{isOpen ? '✖' : '☰'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Side Panel */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="fixed top-0 right-0 w-2/3 h-full bg-violet-700 z-40 shadow-lg p-4">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="text-white text-2xl font-bold"
|
||||||
|
>
|
||||||
|
✖
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul className="space-y-4 mt-4">
|
||||||
|
<li>
|
||||||
|
<Link to="/" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Home</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/browse/" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Browse</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/gallery" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Gallery</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<LightModeToggle />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{isLoggedIn ? (
|
||||||
|
<UserDropdown />
|
||||||
|
) : (
|
||||||
|
<Link to="/user/login" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/protected" className="text-white hover:text-gray-300 block" onClick={() => setIsOpen(false)}>Protected</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|
||||||
117
frontend/src/components/UserDropdown.tsx
Normal file
117
frontend/src/components/UserDropdown.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
|
||||||
|
import apiInstance from "@/services/api";
|
||||||
|
import { logout } from "@/services/auth";
|
||||||
|
|
||||||
|
interface UserProfile {
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
profile: {
|
||||||
|
show_mature: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const UserDropdown = () => {
|
||||||
|
const [user, setUser] = useState<UserProfile | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [nsfwEnabled, setNsfwEnabled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUser = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiInstance.get<UserProfile>("user/profile/");
|
||||||
|
setUser(response.data);
|
||||||
|
setNsfwEnabled(response.data.profile.show_mature);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch user:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchUser();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleNsfwToggle = async () => {
|
||||||
|
if (!user) return;
|
||||||
|
const newSetting = !nsfwEnabled;
|
||||||
|
setNsfwEnabled(newSetting);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiInstance.patch("user/profile/", {
|
||||||
|
profile: { show_mature: newSetting },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to update NSFW setting:", error);
|
||||||
|
setNsfwEnabled(!newSetting);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
logout();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Link className="relative flex items-center space-x-2">
|
||||||
|
{loading ? (
|
||||||
|
<Skeleton className="h-8 w-8 rounded-full bg-gray-500 hover:bg-gray-600" />
|
||||||
|
) : (
|
||||||
|
<div className="h-8 w-8 bg-gray-500 hover:bg-gray-600 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
{user?.username.charAt(0).toUpperCase()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
|
||||||
|
<DropdownMenuContent align="end" className="p-4 shadow-lg rounded-lg border">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex flex-col space-y-3">
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
<Skeleton className="h-4 w-48" />
|
||||||
|
<Skeleton className="h-10 w-full" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{/* User Info */}
|
||||||
|
<div className="text-sm">
|
||||||
|
<p className="font-semibold">{user?.username}</p>
|
||||||
|
<p className="text-gray-500">{user?.email}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t my-2"></div>
|
||||||
|
|
||||||
|
{/* NSFW Toggle (Prevent Dropdown from Closing) */}
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between w-full cursor-pointer"
|
||||||
|
onClick={(e) => e.stopPropagation()} // Prevents dropdown from closing
|
||||||
|
>
|
||||||
|
<span className="text-sm">Show NSFW Content</span>
|
||||||
|
<Switch checked={nsfwEnabled} onCheckedChange={handleNsfwToggle} />
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
|
||||||
|
{/* Logout Button */}
|
||||||
|
<Button variant="destructive" className="w-full" onClick={handleLogout}>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserDropdown;
|
||||||
|
|
||||||
Loading…
Add table
Reference in a new issue