refactor: 사이드바 반응형 추가

#127
boostcampwm-2024 · Nov 16, 2024 · aafc551 · aafc551
1 parent 052bebb
commit aafc551
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/client/src/components/sidebar/PageItem.style.ts b/client/src/components/sidebar/PageItem.style.ts
@@ -5,6 +5,7 @@ export const pageItemContainer = css({
   gap: "sm",
   alignItems: "center",
   width: "100%",
+  height: "56px",
   paddingInline: "md",
   "&:hover": {
     background: "white/50",
@@ -14,6 +15,7 @@ export const pageItemContainer = css({
 
 export const iconBox = css({
   display: "flex",
+  flexShrink: 0,
   justifyContent: "center",
   alignItems: "center",
   borderRadius: "xs",
@@ -26,4 +28,7 @@ export const iconBox = css({
 export const textBox = css({
   textStyle: "display-medium20",
   color: "gray.700",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
 });
diff --git a/client/src/components/sidebar/Sidebar.style.ts b/client/src/components/sidebar/Sidebar.style.ts
@@ -16,11 +16,13 @@ export const navWrapper = css({
   gap: "md",
   flexDirection: "column",
   width: "100%",
+  overflowY: "scroll",
 });
 
 export const plusIconBox = css({
   display: "flex",
   justifyContent: "start",
+  marginBlock: "10px",
   paddingInline: "md",
 });