Merge pull request #33 from Lonwwolf14/main

Update Deskto Gallery page (Fixes #23)

Frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx

@@ -80,4 +80,4 @@ const NavBar = () => {
     );
 };
 
-export default NavBar;
+export default NavBar;

Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css

@@ -6,15 +6,20 @@
     width: 1531px;
     height: 88.46px;
     margin-left: 36px;
-    margin-top: 10.77px;
     box-sizing: border-box;
-
 }
 
 .navbarWrapper {
     display: flex;
     align-items: center;
     width: 100%;
+    z-index: 1;
+    position: fixed;
+    margin-top: 10px;
+    left: 0;
+    z-index: 1000;
+    /* background-color: white; */
+    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
 }
 
 .MainContainer {
@@ -67,33 +72,35 @@
     transition: color 0.3s;
 }
 
-.menuItem a {
+.menuLink {
     text-decoration: none;
     color: black;
+    font-size: 23.46px;
     font-weight: normal;
-    transition: color 0.3s, font-weight 0.3s;
+    padding-bottom: 8px;
+    display: inline-block;
+    font-family: Comfortaa;
     position: relative;
 }
 
-.menuItem.active a {
-    font-weight: bold;
-    border-bottom: 3px solid black;
-}
-
-.menuItem.active a::after {
+.menuLink::after {
     content: "";
     position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 100%;
-    height: 4px;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50px;
+    /* Fixed width for the underline */
+    height: 3px;
+    /* Height of the underline */
+    background-color: transparent;
+    /* Initially transparent */
+    transition: background-color 0.3s;
+}
+
+.menuLink.active::after {
     background-color: black;
-    border-radius: 2px;
-    transition: height 0.3s;
-}
-
-.menuItem:hover {
-    color: #61dafb;
+    /* Underline appears when active */
 }
 
 .searchContainer {
@@ -149,6 +156,7 @@
     display: flex;
     width: 206px;
     height: 40px;
+    padding-top: 20px;
 }
 
 .logo {
@@ -215,16 +223,4 @@
     .searchInput {
         padding: 8px;
     }
-}
-
-.menuLink {
-    text-decoration: none;
-    color: black;
-    font-weight: normal;
-    transition: color 0.3s, font-weight 0.3s;
-}
-
-.active {
-    font-weight: bold;
-    border-bottom: 3px solid black;
 }

Frontend/src/Components/GalleryModule/DesktopSection/Desktop.module.css

@@ -8,7 +8,7 @@ body {
     flex-direction: column;
     align-items: center;
     margin-left: 5.5%;
-    margin-top: 0;
+    margin-top: 1000;
     overflow: visible;
     min-height: 100vh;
 }
@@ -17,5 +17,5 @@ body {
     display: flex;
     justify-content: space-around;
     margin-bottom: 3%;
-    gap: 3.5%;
+    gap: 5%;
 }

Frontend/src/Components/GalleryModule/DesktopSection/ImgCardsDesktop/ImgCard.module.css

@@ -1,36 +1,61 @@
 .imgCard {
-    width: 38%;
+    width: 720px;
+    height: 457px;
+    /* position: absolute; */
+    top: 149px;
+    left: 298px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    gap: 0;
 }
 
 .imageContainer {
     width: 100%;
-    height: auto;
+    height: calc(457px - 60px);
+    /* Account for bottom bar height */
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .bottomBar {
+    width: 100%;
+    height: 60px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    padding-top: 10px;
-    padding-right: 3%;
+    padding: 0 3px;
 }
 
 .icons {
     display: flex;
     gap: 13px;
-    padding-right: 96%;
-    margin-left: -27%;
 }
 
 .userInfo {
     display: flex;
     align-items: center;
+    gap: 15px;
 }
 
 .username {
     font-size: 20px;
     color: #808080;
-    margin-right: 7%;
+}
+
+/* Optional hover effects */
+.icon,
+.downloadBtn {
+    transition: transform 0.2s ease;
+    cursor: pointer;
+}
+
+.icon:hover,
+.downloadBtn:hover {
+    transform: scale(1.1);
 }

Frontend/src/Components/GalleryModule/Gallery.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { useRef, useEffect, useState } from "react"
 import { Routes, Route, Navigate } from "react-router-dom"
 import Styles from "./Gallery.module.css"
 import NavBar from "../CommonModule/NavBarModule/NavBar"
@@ -8,12 +8,36 @@ import Desktop from "./DesktopSection/Desktop"
 import SideBar from "./SideBarModule/SideBar"
 
 const Gallery = () => {
+    const galleryContentRef = useRef(null)
+    const [showBlend, setShowBlend] = useState(false)
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (galleryContentRef.current) {
+                const scrollTop = galleryContentRef.current.scrollTop
+                setShowBlend(scrollTop > 0)
+            }
+        }
+
+        const galleryContent = galleryContentRef.current
+        if (galleryContent) {
+            galleryContent.addEventListener("scroll", handleScroll)
+        }
+
+        return () => {
+            if (galleryContent) {
+                galleryContent.removeEventListener("scroll", handleScroll)
+            }
+        }
+    }, [])
+
     return (
         <div className={Styles.container}>
             <NavBar />
             <div className={Styles.mainContent}>
                 <SideBar />
-                <div className={Styles.galleryContent}>
+                <div className={Styles.galleryContent} ref={galleryContentRef}>
+                    <div className={Styles.blendOverlay} style={{ opacity: showBlend ? 1 : 0 }} />
                     <Routes>
                         <Route path="mobile" element={<Mobile />} />
                         <Route path="tablet" element={<Tablet />} />
@@ -27,4 +51,3 @@ const Gallery = () => {
 }
 
 export default Gallery
-