z-indexとかレイアウトとかがバグってたの直した

traPtitech · Dec 26, 2023 · fa466da · fa466da
1 parent 284d998
commit fa466da
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -16,6 +16,9 @@ const showCover = computed(() => isMobile.value && isOpenNavigationBar.value)
 watch(
   () => route.fullPath,
   () => {
+    if (!isMobile.value) {
+      return
+    }
     isOpenNavigationBar.value = false
   }
 )
@@ -67,7 +70,7 @@ watch(
 @media (width <= 768px) {
   .navigationBarCover {
     position: absolute;
-    z-index: --z-index-navigationBarCover;
+    z-index: $z-index-navigationBarCover;
     top: 5rem;
     left: 0;
     height: 100%;
@@ -77,7 +80,7 @@ watch(
   }
   .navigationBar {
     position: absolute;
-    z-index: --z-index-navigationBar;
+    z-index: $z-index-navigationBar;
     top: 5rem;
     left: 0;
     height: 100%;

diff --git a/src/components/Layout/PageContainer.vue b/src/components/Layout/PageContainer.vue
@@ -1,7 +1,7 @@
-<script setup lang="ts"></script>
-
 <template>
-  <main :class="$style.container"><slot /></main>
+  <main :class="$style.container">
+    <slot />
+  </main>
 </template>
 
 <style lang="scss" module>

diff --git a/src/main.ts b/src/main.ts
@@ -5,7 +5,6 @@ import App from './App.vue'
 import type { PluginOptions } from 'vue-toastification'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
-import './styles/toast.scss'
 
 import './index.scss'
 import '@purge-icons/generated'

diff --git a/src/styles/common.scss → src/styles/color.scss b/src/styles/common.scss → src/styles/color.scss
diff --git a/src/styles/z-index.scss b/src/styles/z-index.scss
@@ -1,4 +1,2 @@
-:root {
-  --z-index-navigationBar: 40;
-  --z-index-navigationBarCover: 30;
-}
+$z-index-navigationBar: 40;
+$z-index-navigationBarCover: 30;
diff --git a/vite.config.ts b/vite.config.ts
@@ -23,7 +23,11 @@ const config: UserConfig = {
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "${srcPath}/styles/common.scss";`
+        additionalData: `
+        @import "${srcPath}/styles/color.scss";
+        @import "${srcPath}/styles/z-index.scss";
+        @import "${srcPath}/styles/toast.scss";
+        `
       }
     }
   },