feat: improve playground style

Author: kovsu

apps/playground/assets/logo.png

@@ -1,15 +1,13 @@
 @import '@ant-design-vue/tailwind-config';
+@import '@ant-design-vue/tailwind-config/themes';
 @source '../index.html';
 @source '../src/**/*.{vue,ts}';
+
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-base-300) transparent;
 }
+
 *:focus-visible {
   outline: none;
 }
-
-.shiki.github-dark,
-.dark-scrollbar {
-  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
-}

apps/playground/assets/tailwind.css

@@ -1,15 +1,10 @@
 <template>
-  <button @click="toggleTheme" class="fixed top-2 right-2">toggle {{ appearance }}</button>
+  <the-header /> 
   <a-theme :appearance="appearance">
     <RouterView />
   </a-theme>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const appearance = ref('light')
-
-const toggleTheme = () => {
-  appearance.value = appearance.value === 'light' ? 'dark' : 'light'
-}
+import TheHeader from '@/components/TheHeader.vue';
+import { appearance } from '@/composables/appearance';
 </script>

apps/playground/src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex h-screen" :class="pageClass">
+  <div class="flex h-[calc(100vh-72px)] bg-base-100/90" :class="pageClass">
     <TheNavbar v-if="!hideNavbar" :items="navs"></TheNavbar>
-    <div class="flex-1 justify-center px-4 py-16" :class="contentClass">
+    <div class="flex-1 justify-center p-4 overflow-scroll" :class="contentClass">
       <RouterView></RouterView>
     </div>
   </div>

apps/playground/src/components/BasicLayout.vue

@@ -5,7 +5,7 @@
         <li class="flex items-center">
           <template v-if="i > 0">
             <span
-              class="ml-2 mr-3 block size-1.5 rotate-45 transform border-r-[1px] border-t-[1px] border-base-content/70 bg-transparent"
+              class="ml-2 mr-3 block size-1.5 rotate-45 transform border-r border-base-content/70 bg-transparent"
             ></span>
           </template>
           <template v-if="item.path !== route.path">

apps/playground/src/components/TheBreadcrumbs.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import logoSrc from '~/logo.png?inline';
+import { appearance } from '@/composables/appearance';
+import { MoonIcon, SunIcon } from "@heroicons/vue/20/solid"
+
+const toggleTheme = () => {
+  appearance.value = appearance.value === 'light' ? 'dark' : 'light'
+}
+</script>
+
+<template>
+  <header class="px-8 py-2 border-b flex justify-between items-center bg-base-100/90 text-base-content border-base-content/10 h-18">
+    <div class="flex items-center">
+      <img :src="logoSrc" alt="Logo" class="h-8 inline-block mr-3" />
+      <h3 class="font-semibold text-xl">Playground</h3>
+    </div>
+
+    <div>
+      <button @click="toggleTheme" class="cursor-pointer p-2 rounded hover:bg-base-content/10 transition">
+        <MoonIcon class="size-4" v-if="appearance === 'light'" />
+        <SunIcon class="size-4" v-else />
+      </button>
+    </div>
+  </header>
+</template>

apps/playground/src/components/TheHeader.vue

@@ -1,27 +1,25 @@
 <template>
-  <div class="bg-base-100/90 text-base-content border-base-content/10 border-r">
-    <div class="flex min-h-16 w-full items-center p-2">
+  <div class="text-base-content border-base-content/10 border-r">
+    <div class="flex min-h-16 w-full p-2 pr-0 h-[calc(100vh-72px)] overflow-scroll">
       <div class="justify-start">
         <div class="group relative inline-block">
           <ul
             tabindex="0"
-            class="bg-base-100 z-[1] mt-3 flex w-52 origin-top scale-95 flex-col flex-wrap rounded-lg p-2 text-sm capitalize"
+            class="z-1 mt-3 flex w-54 origin-top scale-95 flex-col rounded-lg p-2 text-sm capitalize"
           >
-            <li v-for="item in items" :key="item.name">
+            <li v-for="item in items" :key="item.name" class="mb-2">
               <RouterLink
                 :aria-disabled="item.path === route.path"
                 :to="item.path"
-                @click.stop="$event.currentTarget.blur()"
-                class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200"
+                class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200 font-semibold text-lg"
               >
-                {{ item.name }}
+                {{ item.name }} 
               </RouterLink>
               <ul v-if="item.children">
                 <li v-for="child in item.children" :key="child.name">
                   <RouterLink
                     :to="child.path"
-                    @click.stop="$event.currentTarget.blur()"
-                    class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 text-xs opacity-80 transition duration-200"
+                    class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 text-xs opacity-80 transition duration-200 text-[16px]"
                   >
                     {{ child.name }}
                   </RouterLink>

apps/playground/src/components/TheNavbar.vue

@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const appearance = ref<"light" | "dark">("light");

apps/playground/src/composables/appearance.ts

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-const top = ref<number>(10)
+const top = ref<number>(100)
 const bottom = ref<number>(10)
 const onChange = (lastAffix: boolean) => {
   console.log('onChange', lastAffix)

apps/playground/src/pages/affix/basic.vue

@@ -6,8 +6,8 @@
     ".": {
       "default": "./tailwind.css"
     },
-    "./themes/*": {
-      "default": "./themes/*.css"
+    "./themes": {
+      "default": "./themes.css"
     }
   },
   "devDependencies": {