feat: layout

jaskang · Apr 11, 2024 · 8959365 · 8959365
1 parent 7832a54
commit 8959365
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/site/.vitepress/theme/Layout.vue b/site/.vitepress/theme/Layout.vue
@@ -9,10 +9,13 @@ const { frontmatter, page, theme } = useDataByTheme()
 </script>
 
 <template>
-  <div class="bg-slate-50 text-slate-700 dark:bg-slate-900 dark:text-slate-300" v-if="frontmatter.layout !== false">
+  <div
+    class="min-h-screen bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-300"
+    v-if="frontmatter.layout !== false"
+  >
     <VPNavBar class=""></VPNavBar>
-    <div class="mx-auto max-w-8xl px-4 sm:px-6 md:px-8">
-      <div class="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.5rem] z-20 hidden w-[19rem] lg:block">
+    <div class="relative mx-auto max-w-8xl px-4 sm:px-6 md:px-8">
+      <div class="fixed top-14 hidden h-[calc(100vh-3.5rem)] w-72 lg:block">
         <ScrollArea class="h-full border-r border-slate-200">
           <div class="pb-10 pl-8 pr-6">
             <nav class="relative lg:text-sm lg:leading-6">
@@ -21,12 +24,14 @@ const { frontmatter, page, theme } = useDataByTheme()
           </div>
         </ScrollArea>
       </div>
-      <div class="lg:pl-[19.5rem]">
-        <main class="mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:max-w-none xl:pr-16">
+
+      <div class="py-10 pl-72">
+        <main class="mx-auto xl:mr-72 xl:max-w-none xl:px-16">
           <header></header>
-          <Content class="vp-doc prose prose-sm prose-slate max-w-none dark:prose-invert" />
+          <Content class="vp-doc prose prose-slate max-w-none dark:prose-invert" />
           <footer></footer>
-          <div class="fixed bottom-0 right-[max(0px,calc(50%-45rem))] top-[3.8125rem] z-20 hidden w-[19.5rem] xl:block">
+          <div></div>
+          <div class="fixed bottom-0 right-0 top-14 z-20 hidden w-72 xl:block">
             <ScrollArea class="h-full">
               <VPOutline class="py-10" />
             </ScrollArea>

diff --git a/site/.vitepress/theme/components/VPNavBar.vue b/site/.vitepress/theme/components/VPNavBar.vue
@@ -18,9 +18,9 @@ const dark = computed({
 </script>
 
 <template>
-  <div class="sticky top-0 z-40 w-full flex-none bg-white/95 lg:z-50 lg:border-b lg:border-slate-900/10">
+  <div class="sticky top-0 z-40 w-full flex-none bg-white/95 shadow lg:z-50">
     <div class="mx-auto max-w-8xl">
-      <div class="mx-4 border-b border-slate-900/10 py-4 lg:mx-0 lg:border-0 lg:px-8">
+      <div class="mx-4 py-4 lg:mx-0 lg:px-8">
         <div class="relative flex items-center">
           <a class="mr-3 flex-none overflow-hidden font-semibold md:w-auto" href="/">
             <span> Tailv </span>

diff --git a/src/ScrollArea/ScrollArea.vue b/src/ScrollArea/ScrollArea.vue
@@ -45,6 +45,7 @@ const offsetY = computed(() =>
 )
 
 const handleSizeChange = () => {
+  console.log('handleSizeChange')
   if (viewportEl.value) {
     sizes.value = {
       content: {
@@ -83,9 +84,8 @@ useDraggable(thumbYEl, {
   },
 })
 
+useResizeObserver(viewportEl, handleSizeChange)
 useResizeObserver(contentEl, handleSizeChange)
-useResizeObserver(scrollbarXEl, handleSizeChange)
-useResizeObserver(scrollbarYEl, handleSizeChange)
 
 const thumbClass =
   'relative flex-1 transition-opacity cursor-pointer rounded-[10px] bg-slate-900/30 opacity-0 group-hover:opacity-100 before:absolute before:top-1/2 before:left-1/2 before:h-full  before:w-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[""] hover:bg-slate-900/50'
@@ -112,9 +112,9 @@ const thumbClass =
     </div>
 
     <div
-      v-if="showX"
       ref="scrollbarXEl"
-      class="absolute right-0 bottom-0 left-0 flex touch-none flex-col overflow-hidden py-[2px] select-none"
+      class="absolute bottom-0 left-0 right-0 flex touch-none select-none flex-col overflow-hidden py-[2px]"
+      :class="[showX ? 'block' : 'hidden']"
     >
       <div
         ref="thumbXEl"
@@ -126,9 +126,9 @@ const thumbClass =
     </div>
 
     <div
-      v-if="showY"
       ref="scrollbarYEl"
-      class="absolute top-0 right-0 bottom-0 flex touch-none overflow-hidden px-[2px] select-none"
+      class="absolute bottom-0 right-0 top-0 flex touch-none select-none overflow-hidden px-[2px]"
+      :class="[showY ? 'block' : 'hidden']"
     >
       <div
         ref="thumbYEl"