Added feature to Zoom images ,fixed Navbar issue and 2 scroll bar issue

frontend/src/components/Media/MediaView.tsx

@@ -1,4 +1,3 @@
-// components/MediaGallery/MediaView.tsx
 import { MediaViewProps } from '@/types/Media';
 import React, { useEffect, useState } from 'react';
 
@@ -13,33 +12,80 @@ const MediaView: React.FC<MediaViewProps> = ({
   const [globalIndex, setGlobalIndex] = useState<number>(
     (currentPage - 1) * itemsPerPage + initialIndex,
   );
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
     setGlobalIndex((currentPage - 1) * itemsPerPage + initialIndex);
   }, [initialIndex, currentPage, itemsPerPage]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "ArrowRight") {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "ArrowRight") {
         handleNextItem();
       } else if (e.key === "ArrowLeft") {
         handlePrevItem();
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [globalIndex, onClose]);
 
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [globalIndex]);
+const handelZoomOut = ()=>{
+  setScale(s => Math.max(0.1, s - 0.1))
+}
+const handelZoomIn = ()=>{
+  setScale(s => Math.min(4, s + 0.1))
+}
+
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY * -0.01;
+    const newScale = Math.min(Math.max(0.1, scale + delta), 4);
+    setScale(newScale);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const resetZoom = () => {
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+
+  useEffect(() => {
+    const element = document.getElementById('zoomable-image');
+    element?.addEventListener('wheel', handleWheel, { passive: false });
+    return () => element?.removeEventListener('wheel', handleWheel);
+  }, [scale]);
 
   function handlePrevItem() {
     if (globalIndex > 0) {
       setGlobalIndex(globalIndex - 1);
     } else {
       setGlobalIndex(allMedia.length - 1);
     }
+    resetZoom();
   }
 
   function handleNextItem() {
@@ -48,42 +94,83 @@ const MediaView: React.FC<MediaViewProps> = ({
     } else {
       setGlobalIndex(0);
     }
+    resetZoom();
   }
 
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90">
-      <button
-        onClick={onClose}
-        className="absolute left-4 top-4 z-0 rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
-      >
-        Back
-      </button>
-      {type === 'image' ? (
-        <img
-          src={allMedia[globalIndex]}
-          alt={`image-${globalIndex}`}
-          className="max-h-full"
-        />
-      ) : (
-        <video
-          src={allMedia[globalIndex]}
-          className="max-h-full"
-          controls
-          autoPlay
-        />
-      )}
-      <button
-        onClick={handlePrevItem}
-        className="duration-20 absolute left-4 top-1/2 -translate-y-1/2 transform rounded-md border border-black bg-white p-2 text-sm text-black transition hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
-      >
-        {'<'}
-      </button>
-      <button
-        onClick={handleNextItem}
-        className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-md border border-black bg-white p-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
-      >
-        {'>'}
-      </button>
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black bg-opacity-90" />
+
+      <div className="relative z-50 flex h-full w-full items-center justify-center">
+        <button
+          onClick={onClose}
+          className="absolute left-4 top-4 z-50 rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+        >
+          Back
+        </button>
+
+        {type === 'image' ? (
+          <div
+            id="zoomable-image"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            className="relative h-full w-full overflow-hidden flex items-center justify-center align-middle" 
+          >
+            <img
+              src={allMedia[globalIndex]}
+              alt={`image-${globalIndex}`}
+              className="max-h-full select-none"
+              style={{
+                transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+                transition: isDragging ? 'none' : 'transform 0.1s',
+                cursor: isDragging ? 'grabbing' : 'grab',
+              }}
+            />
+            <div className="absolute bottom-4 right-4 flex gap-2">
+              <button
+                onClick={handelZoomOut}
+                className="rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+              >
+                -
+              </button>
+              <button
+                onClick={resetZoom}
+                className="rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+              >
+                Reset
+              </button>
+              <button
+                onClick={handelZoomIn}
+                className="rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        ) : (
+          <video
+            src={allMedia[globalIndex]}
+            className="max-h-full"
+            controls
+            autoPlay
+          />
+        )}
+
+        <button
+          onClick={handlePrevItem}
+          className="absolute left-4 top-1/2 z-50 -translate-y-1/2 transform rounded-md border border-black bg-white p-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+        >
+          {'<'}
+        </button>
+        <button
+          onClick={handleNextItem}
+          className="absolute right-4 top-1/2 z-50 -translate-y-1/2 transform rounded-md border border-black bg-white p-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+        >
+          {'>'}
+        </button>
+      </div>
     </div>
   );
 };

frontend/src/components/Navigation/Navbar/Navbar.tsx

@@ -1,20 +1,23 @@
 export function Navbar(props: { title?: string }) {
   return (
-    <div className="flex justify-center mt-4">
-      <header className="flex h-16 w-1/2 rounded-full items-center justify-between bg-[#333333] px-6">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <img src="/tauri.svg" height="20px" width="20px" alt="" />
-            <span className="font-sans text-lg font-bold text-gray-50">
-              Pictopy
+
+    <>
+      <header className="flex w-full flex-row items-center justify-center align-middle">
+        <div className="mt-3 flex h-16 w-[50%] items-center justify-between rounded-3xl bg-[#333333] px-16 mb-4">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <img src="/tauri.svg" height={'20px'} width={'20px'} alt="" />
+              <span className="font-sans text-lg font-bold text-gray-50">
+                Pictopy
+              </span>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="font-sans text-lg font-medium text-gray-50">
+              Welcome {props.title || 'User'}
             </span>
           </div>
         </div>
-        <div className="flex items-center gap-4">
-          <span className="font-sans text-lg font-medium text-gray-50">
-            Welcome {props.title || 'User'}
-          </span>
-        </div>
       </header>
     </div>
   );

frontend/src/components/ui/PaginationControls.tsx

@@ -40,11 +40,20 @@ export default function PaginationControls({
 
     return pages;
   };
-
+  const handlePrevious = () => {
+    if(currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  }
+  const handleNext = () => {
+    if(currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  }
   return (
     <div className="mt-6 flex justify-center">
       <Pagination>
-        <PaginationPrevious onClick={() => onPageChange(currentPage - 1)} />
+        <PaginationPrevious onClick={handlePrevious} />
         <PaginationContent>
           {getPageNumbers().map((page, index) =>
             page === '...' ? (
@@ -63,7 +72,7 @@ export default function PaginationControls({
             ),
           )}
         </PaginationContent>
-        <PaginationNext onClick={() => onPageChange(currentPage + 1)} />
+        <PaginationNext onClick={handleNext} />
       </Pagination>
     </div>
   );

frontend/src/layout/main.tsx

@@ -4,8 +4,8 @@ import Sidebar from '@/components/Navigation/Sidebar/Sidebar';
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <div className="flex w-full flex-col bg-gray-900">
-      <Navbar />
-      <div className="sidebar flex" style={{ height: 'calc(100vh - 64px)' }}>
+      <Navbar title="User" />
+      <div className="sidebar flex" style={{ height: 'calc(100vh - 92px)' }}>
         <Sidebar />
         <div className="flex flex-1 overflow-x-auto p-4 text-white">
           {children}