feat: add logo to sidebar

sxzz · May 15, 2024 · 7fa0965 · 7fa0965
1 parent 64b45d4
commit 7fa0965
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/components/IconPreview.vue b/components/IconPreview.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
-defineProps<{
-  value: string
-}>()
+withDefaults(
+  defineProps<{
+    value: string
+    size?: string
+  }>(),
+  { size: '1.2em' },
+)
 </script>
 
 <template>
   <img
     v-if="value.startsWith('https://')"
     :src="value"
-    w="1.2em"
-    h="1.2em"
+    :style="{ width: size, height: size }"
     object-contain
   />
-  <div v-else :class="value" />
+  <div v-else :class="value" :style="{ width: size, height: size }" />
 </template>
diff --git a/components/ParserOptions.vue b/components/ParserOptions.vue
@@ -23,7 +23,7 @@ function handleDialogClick(evt: MouseEvent) {
       p0
       @click="handleDialogClick"
     >
-      <div relative flex items-center justify-center py2 text-lg font-bold>
+      <div relative flex items-center justify-center gap1 py2 text-lg font-bold>
         Parser Options
         <button
           class="i-ri:close-line"

diff --git a/components/SideBar.vue b/components/SideBar.vue
@@ -3,13 +3,16 @@ import { currentParserGui as ParserGui } from '~/composables/language'
 </script>
 
 <template>
-  <div border-r p2>
-    <h2 flex="~ gap1" mb3 items-center justify-center text-lg font-bold>
+  <div flex="~ col" items-center gap2 border-r p2>
+    <div>
+      <IconPreview :value="currentParser.icon" size="5em" />
+    </div>
+    <h2 flex items-center justify-center gap2 text-lg font-bold>
       Parser Options
       <ParserOptions v-if="currentParser.options.configurable" />
     </h2>
-    <template v-if="ParserGui">
+    <div v-if="ParserGui" w-full>
       <ParserGui />
-    </template>
+    </div>
   </div>
 </template>