localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

챗 사이드바, nav 조정

Browse Source
This commit is contained in:
yoon 2025-03-17 10:44:52 +09:00
parent 32268be1c6
commit 4bd8ea10af
5 changed files with 64 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/css/custom.css
View File

@ -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 보다 작은 화면에 적용) */

8
public/vendor/css/core.css vendored
View File

@ -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 {

2
public/vendor/css/rtl/core.css vendored
View File

File diff suppressed because one or more lines are too long

45
src/layouts/NormalLayout.vue
View File

@ -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>

15
src/layouts/TheChat.vue
View File

@ -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>