From 025b8e75abd576be634c8ec66f6528e97c56c234 Mon Sep 17 00:00:00 2001
From: bangae1 <bangae2@gmail.com>
Date: Tue, 3 Jun 2025 10:47:39 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=98=B8?=
 =?UTF-8?q?=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/VModal.vue                |  3 +-
 src/components/layouts/navbar/Navbar.vue      | 66 +++++++++++++++++--
 .../layouts/shared/mobile/MobileBurger.vue    |  5 ++
 .../layout/toolbar/ToolbarUserProfile.vue     |  7 +-
 4 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/src/components/base/VModal.vue b/src/components/base/VModal.vue
index 2e2d61c..72cb868 100644
--- a/src/components/base/VModal.vue
+++ b/src/components/base/VModal.vue
@@ -170,7 +170,8 @@ onUnmounted(() => {
   }
 
   &.is-full {
-    @media (hover: none) and (pointer: coarse) {
+    @media screen and (width < 1400px) {
+    //@media (hover: none) and (pointer: coarse) {
       .modal-content {
         width: 100%;
         max-width: 100% !important;
diff --git a/src/components/layouts/navbar/Navbar.vue b/src/components/layouts/navbar/Navbar.vue
index e92714f..3e75b05 100644
--- a/src/components/layouts/navbar/Navbar.vue
+++ b/src/components/layouts/navbar/Navbar.vue
@@ -33,26 +33,84 @@ const isScrolling = computed(() => {
 </template>
 
 <style lang="scss">
-
-@media (hover: none) and (pointer: coarse) {
+@media screen and (width < 1400px) and (orientation: landscape)  {
+//@media (hover: none) and (pointer: coarse) {
   .company-nm {
     display:none !important;
   }
 
   .right {
-    width: 17% !important;
+    width: 19% !important;
   }
 
   .datatable-toolbar {
     .button {
-      padding: 8px 12px !important;
+      padding: 8px 10px !important;
       span:nth-child(1) {
+        padding-left:10px;
+      }
+      span:nth-child(2) {
         display:none;
       }
     }
   }
 }
 
+@media screen and (width <= 767px) and (orientation: portrait) {
+  .datatable-toolbar {
+    .buttons {
+      justify-content: center !important;
+    }
+  }
+}
+
+@media screen and (width > 767px) and (width < 1400px) and (orientation: portrait)  {
+  .company-nm {
+    display:none !important;
+  }
+
+  .brand-end {
+    .profile-dropdown {
+      display: none;
+    }
+  }
+
+  .dropdown-menu {
+    .v-avatar {
+      min-width: 40px !important;
+      max-width: 40px !important;
+      img {
+        min-width: 35px !important;
+        width: 35px !important;
+        height: 35px !important;
+      }
+    }
+  }
+
+  .datatable-toolbar {
+    .button {
+      padding: 8px 10px !important;
+      span:nth-child(1) {
+        padding-left:10px;
+      }
+      span:nth-child(2) {
+        display:none;
+      }
+    }
+  }
+}
+
+@media screen and (width < 1000px) and (orientation: landscape)  {
+  .right {
+    width: 25% !important;
+  }
+  .dropdown-menu {
+    .v-avatar {
+      max-width: 35px !important;
+    }
+  }
+}
+
 .navbar-navbar {
   position: fixed;
   top: 0;
diff --git a/src/components/layouts/shared/mobile/MobileBurger.vue b/src/components/layouts/shared/mobile/MobileBurger.vue
index 13982cb..a2aaadb 100644
--- a/src/components/layouts/shared/mobile/MobileBurger.vue
+++ b/src/components/layouts/shared/mobile/MobileBurger.vue
@@ -22,6 +22,11 @@ const modelValue = defineModel<boolean>({
 </template>
 
 <style scoped lang="scss">
+@media screen and (width < 1025px) and (orientation: portrait) {
+  .navbar-burger {
+    display:flex !important;
+  }
+}
 .navbar-burger {
   height: 60px;
   width: 60px;
diff --git a/src/components/partials/layout/toolbar/ToolbarUserProfile.vue b/src/components/partials/layout/toolbar/ToolbarUserProfile.vue
index aad2ac9..d4e8c18 100644
--- a/src/components/partials/layout/toolbar/ToolbarUserProfile.vue
+++ b/src/components/partials/layout/toolbar/ToolbarUserProfile.vue
@@ -480,13 +480,18 @@ function onRePassword() {
   display:none;
 }
 
-@media (hover: none) and (pointer: coarse) {
+//@media (hover: none) and (pointer: coarse) {
+@media screen and (width <= 1400px)  and (orientation: portrait) {
   .light-person {
     display:none;
   }
   .dark-person {
     display:block;
   }
+
+  .avatar-area {
+    justify-content: right !important;
+  }
 }
 
 .is-dark {