Merge pull request #55 from zul132/fix-sidebar-responsiveness

Fixed Sidebar Responsiveness and Alignment issues
Parnab03 · Feb 19, 2025 · 161bcd1 · 161bcd1
2 parents 6a8f1c1 + b37d199
commit 161bcd1
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 17 deletions.
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.4"
+    "react-router-dom": "^7.1.4",
+    "wallgodds": "file:"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

diff --git a/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx b/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import LogoImage from "/Logo.svg";
+import Style from "./NavBar.module.css";
+
+const Logo = () => {
+    return (
+        <div className={Style.logoContainer}>
+            <img className={Style.logo} src={LogoImage} alt="Logo" />
+        </div>
+    );
+};
+
+export default Logo;
diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx
@@ -1,18 +1,17 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import Logo from "/Logo.svg";
 import Search from "/SearchIcon.svg";
 import Profile from "/ProfileIcon.svg";
 import Style from "./NavBar.module.css";
 import ThemeToggle from "../../ThemeModule/ThemeToggle";
+import Logo from "./Logo";
+
 
 const NavBar = () => {
     return (
         <div className={Style.navbarWrapper}>
-            {/* Logo Section */}
-            <div className={Style.logoContainer}>
-                <img className={Style.logo} src={Logo} alt="Logo" />
-            </div>
+             {/* Logo Section */}
+             <Logo />
 
             {/* Navigation Menu */}
             <nav className={Style.navbar}>

diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css
@@ -23,6 +23,7 @@
     top: 0.8em;
     left: 0;
     z-index: 1000;
+    padding-left: 8%;
 }
 
 .MainContainer {
@@ -160,11 +161,16 @@
 }
 
 .logoContainer {
+    position: absolute; /* Fix logo at a position */
     margin-right: 1.2em;
+    top: 2em; /* Align it with the top of the NavBar */
+    left: 2.5em; /* Add slight spacing from the left edge */
+    width: 14%; 
+    height: auto;
+    z-index: 1001; /* Ensure it is above the menu */
     display: flex;
-    width: 15%;
-    height: 100%;
     justify-content: center;
+    flex-direction: column;
     align-items: center;
 }
 
@@ -176,10 +182,11 @@
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.logo:hover{
+.logo:hover {
     transform: scale(1.15);
 }
 
+
 @media (max-width: 1211px) {
     .menu {
         font-size: 0.6em;
@@ -212,6 +219,14 @@
     .searchContainer {
         width: 400px;
     }
+
+    .navbarWrapper {
+        padding-left: 10%;
+    }
+
+    .logoContainer {
+        left: 2em;
+    }
 }
 
 @media (max-width: 768px) {
@@ -232,6 +247,14 @@
         flex-direction: column;
         align-items: flex-start;
     }
+
+    .navbarWrapper {
+        padding-left: 10%;
+    }
+
+    .logoContainer {
+        left: 1em;
+    }
 }
 
 @media (max-width: 576px) {
@@ -247,6 +270,11 @@
     .searchInput {
         padding: 8px;
     }
+
+    .logoContainer {
+        top: 2.5em;
+        left: 1em;
+    }
 }
 
 /* dark theme */
@@ -276,4 +304,4 @@
     rgba(204, 102, 0, 0.8),    /* Darker orange */
     rgba(153, 0, 0, 0.8),      /* Darker red */
     rgba(102, 0, 102, 0.8));
-}
+}
diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css
@@ -1,16 +1,20 @@
 .sidebar {
     position: fixed;
     top: 3.9em;
-    height: fit-content;
-    width: 13vw;
-    /* padding-left: 3.5em; */
+    height: 100vh; /* Ensure sidebar takes full height */
+    width: clamp(12%, 13vw, 20%); /* Adjust width dynamically */
+    min-height: 100vh; /* Ensure it fills the full height */
     padding-left: 3.75%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     margin-top: 3.2em;
+    transition: width 0.3s ease-in-out; /* Smooth resizing */
+    justify-content: space-between; /* Distributes items properly */
+    padding-bottom: 1rem; /* Small gap at the bottom */
 }
 
+
 .mainContainer {
     border-radius: 3.7px;
     width: 88%;
@@ -21,6 +25,7 @@
     min-height: 80vh;
 }
 
+
 .listContainer {
     padding: 10px;
     flex-grow: 1;
@@ -68,6 +73,13 @@
 
 .listItem img{
     width: 1.05em;
+    height: auto; /* Maintain aspect ratio */
+    max-width: 100%; /* Prevent overflow */
+}
+
+.listItem:nth-child(3) img {
+    /* since Desktop.svg appears smaller, scale its size to match Mobile & Tablet */
+    width: 1.18em !important; 
 }
 
 .listItem::before {
@@ -129,7 +141,7 @@ small {
 
 @media (max-width: 1250px) {
     .sidebar{
-        width: 15vw;
+        width: 16vw;
         /* padding-left: 2.5em; */
     }
 
@@ -141,10 +153,20 @@ small {
     }
 
     .listItem img{
-        width: 0.8em;
+        width: 1em;
     }
 
     .copyright{
-        font-size: 0.8em;
+        font-size: 0.9em;
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 17vw; 
+        padding-left: 2%;
+    }
+    .listItem img {
+        width: 1.2em;
     }
 }