From e42c224b8694c1b4c2147383d3ae188391272b0f Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 13 Sep 2024 01:36:52 +0900
Subject: [PATCH] style: improve responsive design

---
 src/components/Dashboard/ProgressBar/ProgressBar.tsx |  5 +++++
 src/components/Header/Navbar/Navbar.tsx              | 11 +++++++----
 src/layouts/DashboardLayout/Dashboard.layout.tsx     |  2 +-
 src/pages/_app.tsx                                   |  7 +++++++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Dashboard/ProgressBar/ProgressBar.tsx b/src/components/Dashboard/ProgressBar/ProgressBar.tsx
index 13193b8..a4f6408 100644
--- a/src/components/Dashboard/ProgressBar/ProgressBar.tsx
+++ b/src/components/Dashboard/ProgressBar/ProgressBar.tsx
@@ -86,6 +86,11 @@ const StyledProgressBar = styled.section`
 const ProgressHeader = styled.div`
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 8px;
+  }
 `
 
 const EpochLabel = styled.span`
diff --git a/src/components/Header/Navbar/Navbar.tsx b/src/components/Header/Navbar/Navbar.tsx
index c96b01c..933a5b0 100644
--- a/src/components/Header/Navbar/Navbar.tsx
+++ b/src/components/Header/Navbar/Navbar.tsx
@@ -1,4 +1,3 @@
-import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -20,17 +19,21 @@ const Navbar: React.FC<NavbarProps> = () => {
 const Navigation = styled.ul`
   display: flex;
   align-items: center;
-  /* position: absolute;
+  position: absolute;
   left: 50%;
-  transform: translateX(-50%); */
+  transform: translateX(-50%);
   gap: 37px;
   list-style-type: none;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: 1300px) {
     position: static;
     transform: none;
     flex-wrap: wrap;
   }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `
 
 const NavItem = styled.li<{ active?: boolean }>`
diff --git a/src/layouts/DashboardLayout/Dashboard.layout.tsx b/src/layouts/DashboardLayout/Dashboard.layout.tsx
index 34d1e03..6fa1108 100644
--- a/src/layouts/DashboardLayout/Dashboard.layout.tsx
+++ b/src/layouts/DashboardLayout/Dashboard.layout.tsx
@@ -23,7 +23,7 @@ const Container = styled.div`
   max-width: ${uiConfigs.maxContainerWidth}px;
 
   margin: 0 auto;
-  padding: 24px;
+  padding: 24px 0;
 
   @media (max-width: ${breakpoints.md}px) {
     padding: 0 20px;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 03b0235..8d76bbc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -87,6 +87,13 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
             padding: 0;
             word-break: keep-all;
           }
+
+          ul,
+          li {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+          }
         `}
       />
       {getLayout(<Component {...pageProps} />)}