somewhat fix sidebar card

.vitepress/theme/components/PaneFields.vue

@@ -6,9 +6,9 @@ defineProps<{
 
 <template>
   <div class="field-body">
-    <div class="field-icon" :class="icon" />
-    <div class="value">
-      •
+    <div class="text-xl" :class="icon" />
+    <!-- <p class="m-[10px 10px]">•</p> -->
+    <div class="text-[var(--vp-c-text-2)]">
       <slot />
     </div>
   </div>
@@ -20,10 +20,6 @@ defineProps<{
   display: block;
 }
 
-.value {
-  color: var(--vp-c-text-2);
-}
-
 .field-body {
   display: flex;
   align-items: center;

.vitepress/theme/components/SidebarPane.vue

@@ -3,9 +3,9 @@ import Field from "./PaneFields.vue";
 </script>
 
 <template>
-  <div class="sidebar-pane">
-    <div class="pane-header">
-      <div class="pane-title">Emoji Legend</div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">Emoji Legend</div>
     </div>
     <Field icon="i-twemoji-star">Community Recommendations</Field>
     <Field icon="i-twemoji-globe-with-meridians">3rd Party Indexes</Field>
@@ -14,21 +14,21 @@ import Field from "./PaneFields.vue";
 </template>
 
 <style scoped>
-.pane-header {
+.card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
 }
 
-.pane-title {
+.card-title {
   font-weight: 700;
   color: var(--vp-c-text-1);
   line-height: 32px;
   font-size: 16px;
 }
 
-.sidebar-pane {
+.card {
   background: var(--vp-c-bg);
   padding: 12px 24px 24px;
   border-radius: 12px;
@@ -39,7 +39,7 @@ import Field from "./PaneFields.vue";
   transition: border-color 0.4s ease-in-out;
 }
 
-.sidebar-pane:hover {
+.card:hover {
   border-color: var(--vp-c-brand-1);
 }
 </style>

.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 import { h } from "vue";
 import { type Theme, inBrowser } from "vitepress";
 import DefaultTheme from "vitepress/theme";
-import Sidebar from "./layouts/Sidebar.vue";
+import Sidebar from "./components/SidebarPane.vue";
 import "./style.css";
 import "uno.css";
 
@@ -10,7 +10,7 @@ if (inBrowser) import("./pwa");
 export default {
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
-      "sidebar-nav-after": () => h(Sidebar),
+      "sidebar-nav-before": () => h(Sidebar),
     });
   },
   enhanceApp({ app, router, siteData }) { },

.vitepress/theme/layouts/Sidebar.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import SidebarPane from "../components/SidebarPane.vue"
-</script>
-
-<template>
-  <div>
-    <SidebarPane/>
-  </div>
-</template>

tsconfig.json

@@ -13,8 +13,8 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client", "vite-plugin-pwa/vanillajs", "vitepress"]
+    "types": ["vite/client", "vite-plugin-pwa/vanillajs", "vitepress", "./.vitepress/vue-shim.d.ts"]
   },
-  "include": ["./*.ts", "./.vitepress/**/*.ts", "./.vitepress/vue-shim.d.ts"],
+  "include": ["./*.ts", "./.vitepress/**/*.ts"],
   "exclude": ["dist", "node_modules"]
 }