Skip to content

Commit

Permalink
responsive playback & active link navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bibiing
Bibiing committed Dec 2, 2024
1 parent 9813078 commit 908581d
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 205 deletions.
75 changes: 47 additions & 28 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useLocation } from "react-router-dom";
import menu from "../assets/menu.svg";

const Header = () => {
const [isScrolled, setIsScrolled] = useState(false);
Expand All @@ -8,14 +9,15 @@ const Header = () => {
const [username, setUsername] = useState("user"); // Default value "user"
const [isDropdownOpen, setDropdownOpen] = useState(false);
const navigate = useNavigate();
const location = useLocation(); // Added to track current location

useEffect(() => {
// Handle efek scroll
// Handle scroll effect
const handleScroll = () => {
setIsScrolled(window.scrollY > 20);
};

// Ambil userId dari localStorage
// Get userId from localStorage
const savedUserId = localStorage.getItem("userId");
if (savedUserId) {
setUserId(savedUserId);
Expand All @@ -30,7 +32,7 @@ const Header = () => {

const fetchUsername = async (userId) => {
try {
const response = await fetch(`http://localhost:8080/api/users/${userId}`); // Ganti endpoint untuk mengambil user berdasarkan ID
const response = await fetch(`http://localhost:8080/api/users/${userId}`);
const data = await response.json();
if (data.username) {
localStorage.setItem("username", data.username);
Expand Down Expand Up @@ -58,23 +60,30 @@ const Header = () => {
});

if (response.ok) {
// Hapus userId dari localStorage dan perbarui state
// Remove userId from localStorage and update state
localStorage.removeItem("userId");
localStorage.removeItem("username");
setUserId(null);
setUsername("user");

// Tutup dropdown dan arahkan ke halaman Home
// Close dropdown and redirect to Home
setDropdownOpen(false);
navigate("/");
} else {
console.error("Logout gagal");
console.error("Logout failed");
}
} catch (error) {
console.error("Error saat logout:", error);
console.error("Error during logout:", error);
}
};

// Function to determine active link style
const getLinkClass = (path) => {
return location.pathname === path
? "text-[#365486] font-black "
: "text-[#365486] font-medium hover:underline";
};

return (
<header
className={`fixed top-0 left-0 right-0 px-5 py-5 lg:px-[65px] flex justify-between items-center transition-all duration-300 font-poppins ${
Expand All @@ -94,13 +103,10 @@ const Header = () => {

{/* Desktop Menu */}
<nav className="hidden lg:flex items-center space-x-8">
<Link to="/" className="text-[#365486] font-black hover:text-[]">
<Link to="/" className={getLinkClass("/")}>
Home
</Link>
<Link
to="/playbacks"
className="text-[#365486] font-medium hover:text-[]"
>
<Link to="/playbacks" className={getLinkClass("/playbacks")}>
Playback
</Link>

Expand All @@ -122,14 +128,13 @@ const Header = () => {

{isDropdownOpen && (
<div className="absolute right-0 mt-7 w-32 bg-[#e0f5ff] border border-gray-200 rounded shadow-lg">
<button
className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
<Link
to="/Profile"
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
onClick={() => setDropdownOpen(false)}
>
<Link to="/Profile" className="text-[#365486] font-medium">
Profile
</Link>
</button>
Profile
</Link>
<button
className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
onClick={handleLogout}
Expand All @@ -149,24 +154,38 @@ const Header = () => {
</nav>

{/* Mobile Menu */}
<div className="lg:hidden">
<button onClick={toggleMenu} className="text-[#365486]">
{isMenuOpen ? "Close" : "Menu"}
<div className="lg:hidden flex justify-end">
<button
onClick={toggleMenu}
className="text-[#365486] flex items-center justify-center"
>
<img src={menu} alt="Menu" className="w-8 h-8 object-contain" />
</button>

{isMenuOpen && (
<div className="absolute top-16 right-5 bg-[#d7f1ff] rounded-lg p-7 flex flex-col space-y-4 lg:hidden shadow-lg">
<Link to="/" className="text-[#365486] font-black hover:text-[]">
<Link to="/" className={getLinkClass("/")}>
Home
</Link>
<Link
to="/playbacks"
className="text-[#365486] font-medium hover:text-[]"
>
<Link to="/playbacks" className={getLinkClass("/playbacks")}>
Playback
</Link>
{userId ? (
<span className="text-[#365486] font-medium">{username}</span>
<>
<Link
to="/Profile"
className={`${getLinkClass("/Profile")} block`}
onClick={toggleMenu} // Close menu when navigating
>
Profile
</Link>
<button
onClick={handleLogout}
className="text-left text-[#365486] font-medium"
>
Logout
</button>
</>
) : (
<button className="px-4 py-2 bg-[#365486] rounded-md mt-2">
<Link to="/SignUp" className="text-white font-medium">
Expand Down
49 changes: 34 additions & 15 deletions src/components/PlayBack/PlayBack.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Playback = () => {
const [timeStart, setTimeStart] = useState("");
const [timeEnd, setTimeEnd] = useState("");

const [filters, setFilters] = useState({}); // Default filter kosong
const [filters, setFilters] = useState({});
const [isModalOpen, setIsModalOpen] = useState(false);
const [activeImage, setActiveImage] = useState(null);

Expand Down Expand Up @@ -39,13 +39,16 @@ const Playback = () => {
};

return (
<div className="bg-[#f8fbff] font-poppins min-h-screen flex flex-col items-center py-8">
<div className="bg-[#f8fbff] font-poppins min-h-screen flex flex-col items-center py-4 sm:py-8 px-4 sm:px-6">
<form
onSubmit={handleSubmit}
className="w-full max-w-2xl flex flex-col px-6 md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 mb-8"
className="w-full max-w-4xl flex flex-col space-y-4 sm:space-y-0 sm:flex-row justify-center sm:space-x-4 mb-6 sm:mb-8"
>
<div className="flex items-center space-x-2">
<label htmlFor="date" className="text-black mr-3">
<div className="flex items-center space-x-2 pr-1">
<label
htmlFor="date"
className="text-black whitespace-nowrap sm:mr-0 mr-14"
>
Date
</label>
<input
Expand All @@ -54,11 +57,15 @@ const Playback = () => {
name="date"
value={date}
onChange={(e) => setDate(e.target.value)}
className="rounded-md pl-2 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
className="rounded-md px-1 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
/>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="timeStart" className="text-black mr-3">

<div className="flex items-center space-x-2 pr-1">
<label
htmlFor="timeStart"
className="mr-3 sm:mr-0 text-black whitespace-nowrap"
>
Time Start
</label>
<input
Expand All @@ -67,11 +74,15 @@ const Playback = () => {
name="timeStart"
value={timeStart}
onChange={(e) => setTimeStart(e.target.value)}
className="rounded-md pl-2 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
className="rounded-md px-2 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
/>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="timeEnd" className="text-black mr-3">

<div className="flex items-center space-x-2 pr-1">
<label
htmlFor="timeEnd"
className="text-black whitespace-nowrap mr-5 sm:mr-0"
>
Time End
</label>
<input
Expand All @@ -80,9 +91,10 @@ const Playback = () => {
name="timeEnd"
value={timeEnd}
onChange={(e) => setTimeEnd(e.target.value)}
className="rounded-md pl-2 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
className="rounded-md px-2 py-2 border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow"
/>
</div>

<button
type="submit"
className="bg-[#365486] text-white font-bold rounded-md px-4 py-2 hover:bg-[#2a4675] transition duration-300"
Expand All @@ -91,9 +103,16 @@ const Playback = () => {
</button>
</form>

<div className="h-[320px] md:h-[580px] w-[90%] lg:w-[1100px] bg-[#f0faff] rounded-md shadow-md mb-8 overflow-y-auto">
<div className="m-4 grid md:grid-cols-2 md:gap-2 lg:grid-cols-3 lg:gap-3">
{error && <p className="text-red-500">Error: {error}</p>}
<div className="w-full max-w-7xl h-[320px] sm:h-[480px] md:h-[580px] bg-[#f0faff] rounded-md shadow-md mb-8 overflow-y-auto">
<div className="p-2 sm:p-4 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 sm:gap-3 lg:gap-4">
{error && (
<p className="col-span-full text-red-500">Error: {error}</p>
)}
{images.length === 0 && !error && (
<p className="col-span-full text-center text-gray-500">
No images found
</p>
)}
{images.map((image, index) => (
<ImageThumbnail
key={index}
Expand Down
Loading

0 comments on commit 908581d

Please sign in to comment.