From 2979be7d7477f442165ff4b7d846e1cdd5c89d44 Mon Sep 17 00:00:00 2001
From: Kaifuny <superbiger.github@gmail.com>
Date: Thu, 3 Aug 2023 14:46:00 +0800
Subject: [PATCH] fix: responsive layout

Signed-off-by: Kaifuny <superbiger.github@gmail.com>
---
 .../packages/shared/ui/src/components/Nav.vue             | 8 ++++----
 .../packages/shared/ui/src/layouts/MenusLayout.vue        | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/contact-frontend/packages/shared/ui/src/components/Nav.vue b/contact-frontend/packages/shared/ui/src/components/Nav.vue
index 742d464d..8f69cf94 100644
--- a/contact-frontend/packages/shared/ui/src/components/Nav.vue
+++ b/contact-frontend/packages/shared/ui/src/components/Nav.vue
@@ -44,7 +44,7 @@ defineEmits(['update:current'])
           </div>
           <slot name="production"></slot>
         </div>
-        <div class="hidden md:block">
+        <div class="hidden lg:block">
           <div class="ml-10 flex items-baseline space-x-4">
             <a
               v-for="(nav, index) in navigations"
@@ -60,7 +60,7 @@ defineEmits(['update:current'])
             </a>
           </div>
         </div>
-        <div class="hidden md:block">
+        <div class="hidden lg:block">
           <div class="flex items-center space-x-4">
             <slot></slot>
             <!-- Profile dropdown -->
@@ -88,7 +88,7 @@ defineEmits(['update:current'])
             </div>
           </div>
         </div>
-        <div class="-mr-2 flex md:hidden">
+        <div class="-mr-2 flex lg:hidden">
           <!-- Mobile menu button -->
           <button
             type="button"
@@ -133,7 +133,7 @@ defineEmits(['update:current'])
       </div>
     </div>
     <!-- Mobile menu, show/hide based on menu state. -->
-    <div v-show="dropdownFlag" class="md:hidden">
+    <div v-show="dropdownFlag" class="lg:hidden">
       <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
         <a
           v-for="(nav, index) in navigations"
diff --git a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
index 2fc03878..6b516701 100644
--- a/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
@@ -9,6 +9,9 @@ import {
   NWatermark,
   NIcon,
 } from 'naive-ui'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
 
 defineProps({
   isWatermarkMode: {
@@ -71,6 +74,7 @@ defineEmits(['update:collapsed'])
       <slot></slot>
     </n-layout-sider>
     <n-layout-content
+      :class="{ hidden: width < 600 && !collapsed }"
       content-style="display: flex; flex-direction: column;width: 100%;height:100%;padding: 10px"
     >
       <n-page-header :subtitle="pageSubtitle">