fix(doc): update documentation design

docs/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import Header from './components/Header.vue'
+import Footer from './components/Footer.vue';
 
 
 const { seo } = useAppConfig()
@@ -22,11 +23,12 @@ provide('navigation', navigation)
   <div>
     <NuxtLoadingIndicator />
     <Header />
-      <NuxtLayout >
-        <NuxtPage />
-      </NuxtLayout>
+    <NuxtLayout >
+      <NuxtPage />
+    </NuxtLayout>
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
+    <Footer />
   </div>
 </template>

docs/components/CodeGroup.vue

@@ -13,6 +13,7 @@ const props = defineProps({
 
 const slots = useSlots();
 const selectedIndex = ref(0);
+const isCopied = ref(false);
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === "symbol") {
@@ -34,35 +35,44 @@ const selectedTab = computed(() => tabs.value[selectedIndex.value]);
 function copytoclipboard() {
   const code = selectedTab?.value.component.props.code;
   navigator.clipboard.writeText(code);
+  isCopied.value = true;
+  setTimeout(() => {
+      isCopied.value = false;
+    }, 1000);
 }
+
 </script>
 
 <template>
-  <div class="border rounded-md">
-    <div class="flex items-center justify-between">
+  <div class="border rounded-md my-2.5">
+    <div class="flex items-center justify-between border-b">
       <div class="flex">
         <button
-          class="px-5 py-1 ms-2 my-2 rounded-md flex gap-x-2 items-center"
-          :class="{ 'bg-gray-100': index == selectedIndex }"
+          class="px-2 py-1.5 ms-2 my-2 text-sm text-gray-700 rounded-md flex gap-x-2 items-center"
+          :class="{ 'bg-slate-100': index == selectedIndex }"
           v-for="(tab, index) in tabs"
           :key="index"
           tabindex="-1"
           @click="selectedIndex = index"
         >
           <div>
             <span v-if="tab.label == 'Form.vue'">
-              <vue-icon class="w-4" />
+              <vue-icon class="w-3.5" />
             </span>
             <span v-if="tab.label == 'Form.svelte'">
-              <svelte-icon class="w-4"/>
+              <svelte-icon class="w-3.5"/>
             </span>
           </div>
           <span>{{ tab.label }}</span>
         </button>
       </div>
-      <span class="px-2" @click="copytoclipboard"> <copy-icon class="w-4 fill-gray-500 cursor-pointer hover:fill-gray-700"/></span>
+      <div
+      class="px-2 relative group" @click="copytoclipboard"> <copy-icon class="w-4 fill-gray-500 cursor-pointer" :class="{'fill-gray-800':isCopied}"/>
+      <span v-if="!isCopied" class="absolute -right-10 -top-7 px-2 py-[3px] invisible opacity-0 group-hover:opacity-100 group-hover:visible text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copy to clipboard</span>
+      <span v-if="isCopied" class="absolute -right-3 -top-7 px-2 py-[3px] text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copied</span>
+      </div>
     </div>
-    <div class="px-5 py-2 bg-gray-50 rounded-md">
+    <div class="px-5 py-3 bg-gray-50 rounded-md">
       <component :is="selectedTab?.component" :key="selectedIndex" />
     </div>
   </div>

docs/components/Footer.vue

@@ -6,8 +6,8 @@ import twitterIcon from "./icon/twitter.icon.vue";
 </script>
 
 <template>
-  <footer class="border-t sticky bottom-0 left-0 bg-white z-20">
-    <div class="py-5 max-lg:py-10">
+  <footer class="border-t bg-white z-20">
+    <div class="py-3.5 max-lg:py-10">
       <div class="max-w-7xl mx-auto px-6">
         <div
           class="lg:flex items-center lg:justify-between sm:max-md:flex-col sm:max-md:items-center max-lg:space-y-5"
@@ -18,9 +18,9 @@ import twitterIcon from "./icon/twitter.icon.vue";
            <a href="https://radixweb.com/" class="hover:underline"">Developed & Maintained By <b>Radixians</b></a>
           </p>
           <div
-            class="flex items-center lg:pe-4 space-x-4 max-lg:text-center lg:text-center md:order-1 lg:order-2"
+            class="flex items-center space-x-4 max-lg:text-center lg:text-center md:order-1 lg:order-2 p-2 rounded-md hover:bg-gray-50"
           >
-            <span><a href="https://github.com/nattyjs/tidy"><github-icon class="w-5 fill-gray-700 cursor-pointer" /></a></span>
+            <span><a href="https://github.com/nattyjs/tidy"><github-icon class="w-5 fill-gray-700 cursor-pointer hover:fill-gray-900" /></a></span>
           </div>
         </div>
       </div>

docs/components/Header.vue

@@ -20,8 +20,8 @@ import SearchIcon from "./icon/search.icon.vue";
 
           </div>
           <div class="space-x-5 flex items-center">
-            <span>
-             <a href="https://github.com/nattyjs/tidy" target="_blank"> <github-icon class="w-5 fill-gray-700 cursor-pointer" /></a>
+            <span class="p-2 hover:bg-gray-50 rounded-md">
+             <a href="https://github.com/nattyjs/tidy" target="_blank"> <github-icon class="w-5 fill-gray-700 cursor-pointer hover:fill-gray-900" /></a>
             </span>
           </div>
         </nav>

docs/components/NavigationTree.vue

@@ -1,30 +1,64 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import DownArrowIcon from "./icon/down-arrow.icon.vue";
+const route = useRoute();
+const { data: navigation } = await useAsyncData("contentNavigation", () =>
+  fetchContentNavigation()
+);
+const openIndexes = ref<number[]>([]);
+
+function toggleDropdown(index: number) {
+  if (openIndexes.value.includes(index)) {
+    openIndexes.value = openIndexes.value.filter((i) => i !== index);
+  } else {
+    openIndexes.value.push(index);
+  }
+}
+</script>
+
 <template>
-  <div class="max-h-[calc(100vh-110px)] overflow-y-scroll pb-10 z-10">
+  <div class="max-h-[calc(100vh-100px)] overflow-y-scroll pb-3 z-10">
     <div v-for="(items, index) in navigation" :key="index">
-      <h5 class="text-sm font-semibold text-gray-600 pt-4 pb-2">
-        {{ items.title }}
-      </h5>
-      <div v-if="items.children">
-        <nav class="ps-2">
-          <NuxtLink
-            class="text-sm mt-1 block ps-3 font-DMSans_Regular text-gray-500 hover:text-green-500 cursor-pointer border-l  pt-1 py-1" :class="{'text-green-500 border-l-green-400 ': route.path === item._path}"
-            v-for="item in items.children"
-            :to="item._path"
-            :key="item.title"
-            >{{ item.title }}
-          </NuxtLink>
-        </nav>
+      <div class="pt-4 pb-2">
+        <h5
+          @click="toggleDropdown(index)"
+          class="flex justify-between items-center text-sm font-semibold text-gray-600"
+        >
+          <span class="cursor-pointer">{{
+            items.title
+          }}</span>
+          <span class="pe-5"
+            ><down-arrow-icon
+              class="w-4 fill-gray-500 transition-all duration-300"
+              :class="{ '-rotate-90': !openIndexes.includes(index) }"
+          /></span>
+        </h5>
+      </div>
+      <div
+        :class="{
+          'max-h-full overflow-y-auto': openIndexes.includes(index),
+          'max-h-0': !openIndexes.includes(index),
+        }"
+        class="overflow-hidden transition-max-height duration-700"
+      >
+        <div v-if="items.children">
+          <nav class="ps-2">
+            <NuxtLink
+              class="text-sm mt-1 block ps-3 font-DMSans_Regular text-gray-500 hover:text-green-500 hover:border-l-green-400 cursor-pointer border-l pt-1 py-1"
+              :class="{
+                'text-green-500 border-l-green-400 ': route.path === item._path,
+              }"
+              v-for="item in items.children"
+              :to="item._path"
+              :key="item.title"
+              >{{ item.title }}
+            </NuxtLink>
+          </nav>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { useRoute } from 'vue-router';
-const route = useRoute()
-const { data: navigation } = await useAsyncData("contentNavigation", () =>
-  fetchContentNavigation()
-);
-</script>
 
 <style scoped>
 ::-webkit-scrollbar {

docs/components/UButton.vue

@@ -1,39 +1,41 @@
 <template>
-    <div class=" inline-block pb-5">
-        <button :class="props.class" class="bg-[#00C16A] hover:bg-green-600 rounded-md px-3 py-1.5 text-white font-medium me-5 text-sm transition-all duration-300">
-            <a :href="props.to" :target="target">
-                {{ props.label }}
-            </a>
-        </button>
-    </div>
-
-
-
-
+  <div class="inline-block pt-2 pb-2">
+    <button
+      :class="props.class"
+      class="bg-[#00C16A] hover:bg-green-600 rounded-md px-3 py-1.5 text-white font-medium me-5 text-sm transition-all duration-300"
+    >
+      <a :href="props.to" :target="target" class="flex gap-x-1">
+        <span><spark-icon class="w-5 fill-white" /></span>
+        {{ props.label }}
+      </a>
+    </button>
+  </div>
 </template>
+
 <script setup lang="ts">
-import { defineProps, PropType } from 'vue';
-    const props = defineProps({
-        class:{
-            type:String as PropType<any>,
-            default:''
-        },
-        label:{
-            type:String as PropType<any>,
-            default:''
-        },
-        icon:{
-            type:String as PropType<any>,
-            default:''
-        },
-        target:{
-            type:String as PropType<any>,
-            default:''
-        },
-        to:{
-            type:String as PropType<any>,
-            default:''
-        },
-    })
+import { defineProps, PropType } from "vue";
+import sparkIcon from "./icon/spark.icon.vue";
 
+const props = defineProps({
+  class: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  label: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  icon: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  target: {
+    type: String as PropType<any>,
+    default: "",
+  },
+  to: {
+    type: String as PropType<any>,
+    default: "",
+  },
+});
 </script>

docs/components/UCode.vue

@@ -2,6 +2,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import copyIcon from "./icon/copy.icon.vue";
+import terminalIcon from "./icon/terminal.icon.vue";
 
 let copied = false
 const props = defineProps({
@@ -13,6 +14,7 @@ const props = defineProps({
 
 const slots = useSlots();
 const selectedIndex = ref(0);
+const isCopied = ref(false);
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === "symbol") {
@@ -34,20 +36,31 @@ const tabs = computed(
 function copytoclipboard() {
   const code = tabs?.value.component.props.code;
   navigator.clipboard.writeText(code);
+  isCopied.value = true;
+  setTimeout(() => {
+      isCopied.value = false;
+    }, 1000);
 }
 
 console.log(tabs.value);
 </script>
 
 <template>
-  <div class="relative border rounded-md">
-    <div class="flex items-center justify-between px-2 pt-2">
-      <div>
-        <button v-if="tabs.label !== '0'" class="text-gray-700 text-sm tracking-wide ps-3">{{ tabs.label }}</button>
+  <div class="relative border rounded-md my-4 max-xl:max-w-lg">
+    <div v-if="tabs.label !== '0'" class="flex items-center justify-between px-2 py-3 border-b">
+      <div class="flex items-center gap-x-2 px-3">
+        <span v-if="tabs.label !== '0'"><terminal-icon class="w-3.5 fill-gray-600" /></span>
+        <button v-if="tabs.label !== '0'" class="text-gray-700 text-sm tracking-wide">{{ tabs.label }}</button>
       </div>
-      <span  @click="copytoclipboard"><copy-icon class="w-4 fill-gray-500 hover:fill-gray-700 cursor-pointer pb-2"/></span>
     </div>
-    <div class="px-5 py-2 bg-gray-50 rounded-b-md">
+    <div :class="{'absolute top-3 right-3':tabs.label !== 0}"  @click="copytoclipboard">
+      <div class="relative group">
+        <copy-icon class="w-4 fill-gray-500 hover:fill-gray-700 cursor-pointer"/>
+        <span v-if="!isCopied" class="absolute -right-11 -top-7 px-2 py-[3px] invisible opacity-0 group-hover:opacity-100 group-hover:visible text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copy to clipboard</span>
+        <span v-if="isCopied" class="absolute -right-4 -top-7 px-2 py-[3px] text-nowrap text-xs text-gray-600 bg-white shadow-lg rounded-md border border-gray-100 transition-all duration-300">Copied</span>
+      </div>
+    </div>
+    <div class="px-5 py-3 bg-gray-50 rounded-b-md rounded-t-md ">
       <component :is="tabs?.component" :key="tabs.label" />
     </div>
   </div>

docs/components/icon/copy.icon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     viewBox="0 0 24 24"
-    fill="none"
+    fill=""
     xmlns="http://www.w3.org/2000/svg"
   >
     <path

docs/components/icon/down-arrow.icon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z"
+      fill=""
+    />
+  </svg>
+</template>

docs/components/icon/right-arrow-icon.vue

@@ -1,23 +1,29 @@
 <template>
   <svg
-    fill=""
     version="1.1"
     id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 492.004 492.004"
+    viewBox="0 0 32 32"
+    enable-background="new 0 0 32 32"
     xml:space="preserve"
   >
-    <g>
-      <g>
-        <path
-          d="M484.14,226.886L306.46,49.202c-5.072-5.072-11.832-7.856-19.04-7.856c-7.216,0-13.972,2.788-19.044,7.856l-16.132,16.136
-			c-5.068,5.064-7.86,11.828-7.86,19.04c0,7.208,2.792,14.2,7.86,19.264L355.9,207.526H26.58C11.732,207.526,0,219.15,0,234.002
-			v22.812c0,14.852,11.732,27.648,26.58,27.648h330.496L252.248,388.926c-5.068,5.072-7.86,11.652-7.86,18.864
-			c0,7.204,2.792,13.88,7.86,18.948l16.132,16.084c5.072,5.072,11.828,7.836,19.044,7.836c7.208,0,13.968-2.8,19.04-7.872
-			l177.68-177.68c5.084-5.088,7.88-11.88,7.86-19.1C492.02,238.762,489.228,231.966,484.14,226.886z"
-        />
-      </g>
-    </g>
+    <line
+      fill="none"
+      stroke=""
+      stroke-width="2"
+      stroke-miterlimit="10"
+      x1="26"
+      y1="16"
+      x2="4"
+      y2="16"
+    />
+    <polyline
+      fill="none"
+      stroke=""
+      stroke-width="2"
+      stroke-miterlimit="10"
+      points="18,7.5 26.5,16 18,24.5 "
+    />
   </svg>
 </template>