fix(theme-press): toc aside style in mobile, close #84

docs/pages/guide/getting-started.md

@@ -212,7 +212,9 @@ In most cases, you only need to work in the `pages` folder.
 
 - `pages`: 你的所有页面
   - `posts`: 写在 `pages/posts` 文件夹下的内容，将被当作博客文章
-- `styles`: 覆盖主题样式，文件夹下的 `index.scss`/`css-vars.scss`/`index.css`/`css-vars.css` 将会被自动加载
+- `styles`: 覆盖主题样式，文件夹下的这些 scss 文件将会被自动加载
+  - `index.scss` / `index.css`
+  - `css-vars.scss` / `css-vars.css`
 - `components`: 自定义你的组件（将会被自动注册）
 - `layouts`: 自定义布局 (譬如可以通过 `layout: xxx` 来使用 `layouts/xxx.vue` 布局)
 - `locales`: 自定义国际化关键词

packages/valaxy-theme-press/components/PressAside.vue

@@ -46,18 +46,21 @@ const app = useAppStore()
 }
 
 .press-aside {
-  position: relative;
-  min-width: 272px;
-  transform: translateX(100%);
+  position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: 10;
+
+  min-width: var(--va-sidebar-width);
+
+  transform: translateX(100%);
 
   transition: box-shadow var(--va-transition-duration), opacity 0.25s,
   transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
 
   &.open {
+    right: 0;
+    z-index: 10;
     display: block;
     transform: translateX(0);
   }
@@ -65,8 +68,7 @@ const app = useAppStore()
 
 .aside-container {
   position: sticky;
-  top: calc(var(--pr-nav-height) + 32px);
-  margin-top: calc(var(--pr-nav-height) * -1 - 32px);
+  top: 0;
   padding-top: calc(var(--pr-nav-height) + 32px);
   height: 100vh;
 }