챗 사이드바, nav 조정

public/css/custom.css

@@ -459,13 +459,68 @@ cursor: not-allowed !important;
 
 /* Scroll Button end */
 
-/* Mobile */
+/* Top */
+
+/* 중앙 콘텐츠 자동 조정 */
+.layout-page {
+  flex-grow: 1;
+  min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
+  margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
+}
+
+/* 탑바 범위조정 */
+
+.layout-navbar-fixed .layout-navbar.navbar-detached {
+  width: calc(100% - 1.625rem * 2 - 16.25rem - 20%) !important;
+}
+
+
+@media (min-width: 1200px) {
+  nav#layout-navbar {
+    left: calc(16.25rem - 20%) !important;
+  }
+  
+  .layout-navbar.navbar-detached.container-xxl {
+    max-width: calc(1440px - 1.625rem * 2) !important;
+  }
+}
+
+/* 탑바 범위조정(1200px 이하) */
+@media (max-width: 1200px) {
+  nav#layout-navbar {
+    left: -20% !important;
+  }
+
+  .layout-navbar-fixed .layout-navbar.navbar-detached {
+    width: calc(100% - 1.625rem* 2 - 20%) !important;
+  }
+}
+
+/* 탑바 범위조정(992px 이하) */
+@media (max-width: 992px) {
+
+  .layout-navbar-fixed .layout-navbar.navbar-detached {
+    width: calc(100% - 2rem - 20%) !important;
+  }
+}
 
 /* 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용) */
 @media (max-width: 767px) { 
-  aside {
+  .chat-sidebar {
     display: none !important;
   }
+
+  nav#layout-navbar {
+    left: 0 !important;
+  }
+
+  .layout-navbar-fixed .layout-navbar.navbar-detached {
+    width: calc(100% - 2rem) !important;
+  }
+
+  .layout-page {
+    margin-right: 0 !important;
+  }
 } 
 
 /* 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)  */

public/vendor/css/core.css

@@ -15304,12 +15304,12 @@ html:not(.layout-menu-fixed) .menu-inner-shadow {
 }
 @media (max-width: 1199.98px) {
   .layout-navbar-fixed .layout-navbar.navbar-detached {
-    width: calc(100% - (1.625rem * 2)) !important;
+    width: calc(100% - (1.625rem * 2)) 
   }
 }
 @media (max-width: 991.98px) {
   .layout-navbar-fixed .layout-navbar.navbar-detached {
-    width: calc(100% - (1rem * 2)) !important;
+    width: calc(100% - (1rem * 2)) 
   }
 }
 .layout-navbar-fixed.layout-menu-collapsed .layout-navbar.navbar-detached {
@@ -15317,12 +15317,12 @@ html:not(.layout-menu-fixed) .menu-inner-shadow {
 }
 @media (max-width: 1199.98px) {
   .layout-navbar.navbar-detached {
-    width: calc(100vw - (100vw - 100%) - (1.625rem * 2)) !important;
+    width: calc(100vw - (100vw - 100%) - (1.625rem * 2)) 
   }
 }
 @media (max-width: 991.98px) {
   .layout-navbar.navbar-detached {
-    width: calc(100vw - (100vw - 100%) - (1rem * 2)) !important;
+    width: calc(100vw - (100vw - 100%) - (1rem * 2)) 
   }
 }
 .layout-menu-collapsed .layout-navbar.navbar-detached, .layout-without-menu .layout-navbar.navbar-detached {

src/layouts/NormalLayout.vue

@@ -51,48 +51,3 @@
         loadScript('/js/main.js');
     });
 </script>
-<style>
-    /* 중앙 콘텐츠 자동 조정 */
-    .layout-page {
-        flex-grow: 1;
-        min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
-        margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
-    }
-
-    /* 탑바 범위조정 */
-    nav#layout-navbar {
-        left: 0 !important;
-        margin-right: 20%;
-        margin-left: 260px;
-        width: auto !important;
-        min-width: auto !important;
-        right: 26px !important;
-        left: 26px !important;
-    }
-
-    /* 탑바 범위조정(1200px 이하) */
-    @media (max-width: 1200px) {
-        nav#layout-navbar {
-            left: 0 !important;
-            margin-right: 20%;
-            margin-left: 0px;
-            width: auto !important;
-            min-width: auto !important;
-            right: 26px !important;
-            left: 26px !important;
-        }
-    }
-
-    /* 탑바 범위조정(992px 이하) */
-    @media (max-width: 992px) {
-        nav#layout-navbar {
-            left: 0 !important;
-            margin-right: 20%;
-            margin-left: 0px;
-            width: auto !important;
-            min-width: auto !important;
-            right: 26px !important;
-            left: 26px !important;
-        }
-    }
-</style>

src/layouts/TheChat.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Chat Sidebar -->
-    <aside id="chat-sidebar" class="chat-sidebar">
+    <aside id="chat-sidebar" class="chat-sidebar bg-white position-fixed top-0 end-0 z-4 vh-100 menu border shadow">
     </aside>
 </template>
 
@@ -25,19 +25,8 @@ const sendMessage = () => {
 </script>
 
 <style scoped>
-/* 채팅 사이드바 고정 */
+
 .chat-sidebar {
     width: 20%;
-    height: 100vh;
-    position: fixed;
-    right: 0;
-    top: 0;
-    background: #fff;
-    border-left: 1px solid #ddd;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    z-index: 4;
 }
-
 </style>