Add mobile view

.editorconfig

@@ -7,5 +7,5 @@ charset = utf-8
 indent_style = space
 indent_size = 4
 
-[{*.yaml,*.yml,*.json, *.scss}]
+[{*.yaml,*.yml,*.json,*.scss}]
 indent_size = 2

.stylelintrc.js

@@ -16,5 +16,8 @@ module.exports = {
     }],
     rules: {
         indentation: 2,
+        "selector-pseudo-class-no-unknown": [true, {
+            "ignorePseudoClasses": ["deep",""]
+        }]
     },
 };

auto-imports.d.ts

@@ -1,4 +1,8 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -20,6 +24,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onDeactivated: typeof import('vue')['onDeactivated']
@@ -43,15 +49,25 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
   const useDialog: typeof import('naive-ui')['useDialog']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package.json

@@ -57,6 +57,7 @@
     "stylelint-order": "^6.0.1",
     "stylelint-scss": "^4.1.0",
     "typescript": "~5.3.3",
+    "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.12",
     "vue-tsc": "^1.0.24"

src/assets/main.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 #app {
   * {
     box-sizing: border-box;

src/assets/variables.scss

@@ -0,0 +1,7 @@
+/* Screen size */
+$xs: 0px;
+$s: 640px;
+$m: 1024px;
+$l: 1280px;
+$xl: 1536px;
+$xxl: 1920px;

src/composables/useAppBreakpoints.ts

@@ -0,0 +1,11 @@
+import { useBreakpoints } from '@vueuse/core'
+import { defaultBreakpoints } from 'naive-ui/es/config-provider/src/config'
+
+export const useAppBreakpoints = () => {
+    const breakpoints = useBreakpoints(defaultBreakpoints)
+    const isMobile = breakpoints.smaller('m')
+
+    return {
+        isMobile,
+    }
+}