Merge pull request #167 from DaleStudy/152-sidebar-header-fix

Progress 페이지에서 Sidebar가 Header 위에 쌓이는 현상
DaleStudy · Jan 3, 2025 · dcbc658 · dcbc658
2 parents d06c4d1 + 5f04786
commit dcbc658
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -9,6 +9,7 @@
   width: 100%;
   border-bottom: 1px solid var(--bg-300);
   background-color: var(--bg-200);
+  z-index: var(--z-index-header);
 
   header {
     display: flex;

diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
@@ -1,10 +1,8 @@
 aside {
   position: sticky;
   top: 87px;
-  width: 260px;
-  height: calc(100vh - 40px);
-  overflow-y: auto;
-  align-items: center;
+  z-index: var(--z-index-aside);
+  max-width: 203px;
 }
 
 .cohort {
@@ -13,9 +11,6 @@ aside {
 }
 
 .container {
-  top: 230px;
-  left: 20px;
-  width: 250px;
   padding: 20px 35px;
   background-color: var(--bg-200);
   border-radius: 10px;

diff --git a/src/index.css b/src/index.css
@@ -7,10 +7,14 @@
   --bg-300: #eee8fe;
   --bg-400: #5333e1;
   --text-900: #160b46;
+
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
+
+  --z-index-header: 100;
+  --z-index-aside: 10;
 }
 
 * {

diff --git a/src/pages/Progress/Progress.module.css b/src/pages/Progress/Progress.module.css
@@ -17,7 +17,7 @@ h1 {
 }
 
 .sideBar {
-  width: 20%;
+  width: 30%;
 }
 
 .problemTableWrapper {