From 131fa6271ecb27872a4b35f293cc208f9beb81b8 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Tue, 30 May 2023 04:16:57 +0800
Subject: [PATCH] fix(theme): fix aside layout styles, fix #175, fix #182

---
 packages/client/app/layout/layout.vue  | 30 ++++++++++++++------------
 packages/client/app/styles/layout.scss |  5 +++++
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/client/app/layout/layout.vue b/packages/client/app/layout/layout.vue
index de9542ed..dc7ed571 100644
--- a/packages/client/app/layout/layout.vue
+++ b/packages/client/app/layout/layout.vue
@@ -121,11 +121,6 @@ const styles = computed(() => ({
       opacity: 0;
       z-index: 300;
       transition: opacity 0.3s ease;
-
-      .is-left-aside-open & {
-        opacity: 0.25;
-        pointer-events: auto;
-      }
     }
   }
 }
@@ -146,17 +141,24 @@ const styles = computed(() => ({
       width: 100vw;
       bottom: 0;
     }
-  }
 
-  .layout-container.is-left-aside-open.has-left-aside {
-    .main-container {
-      left: calc(var(--aside-width) + var(--activity-width));
-    }
-  }
+    &.is-left-aside-open {
+      &.has-left-aside {
+        .main-container {
+          left: calc(var(--aside-width) + var(--activity-width));
+        }
+      }
 
-  .layout-container.is-left-aside-open:not(.has-left-aside) {
-    .main-container {
-      left: var(--activity-width);
+      &:not(.has-left-aside) {
+        .main-container {
+          left: var(--activity-width);
+        }
+      }
+
+      .aside-mask {
+        opacity: 0.25;
+        pointer-events: auto;
+      }
     }
   }
 }
diff --git a/packages/client/app/styles/layout.scss b/packages/client/app/styles/layout.scss
index 0d7c37d9..be6d224c 100644
--- a/packages/client/app/styles/layout.scss
+++ b/packages/client/app/styles/layout.scss
@@ -10,6 +10,7 @@
   --card-padding-horizontal: 1.5rem;
 
   @media screen and (max-width: 768px) {
+    --aside-width: 17rem;
     --activity-width: 3.5rem;
     --activity-icon-size: 1.375rem;
     --card-margin: 1.5rem;
@@ -22,6 +23,10 @@
     --card-padding-vertical: 0.75rem;
     --card-padding-horizontal: 0.875rem;
   }
+
+  @media screen and (max-width: 384px) {
+    --aside-width: calc(100vw - 2 * var(--activity-width));
+  }
 }
 
 .layout-left {