docs

saadeghi · Apr 11, 2024 · f4269b8 · f4269b8
1 parent adb63bd
commit f4269b8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/src/docs/src/components/Sidebar.svelte b/src/docs/src/components/Sidebar.svelte
@@ -63,7 +63,7 @@
 <div class="h-4" />
 
 <ul class="menu px-4 py-0">
-  {#each pages as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items, collapsible, target }}
+  {#each pages as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items, collapsible, target, highlight }}
     <SidebarMenuItem
       {closeDrawer}
       {name}
@@ -75,6 +75,7 @@
       {deprecated}
       {items}
       {collapsible}
+      {highlight}
       {target} />
   {/each}
 </ul>
diff --git a/src/docs/src/components/SidebarMenuItem.svelte b/src/docs/src/components/SidebarMenuItem.svelte
@@ -14,6 +14,7 @@
     deprecated = null,
     items = null,
     collapsible = null,
+    highlight = null,
     target = null
 
   const sanitize = (name) => {
@@ -56,7 +57,7 @@
             {$t(name)}
           </summary>
           <ul>
-            {#each items as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items }}
+            {#each items as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items, highlight }}
               <SidebarMenuItem
                 {closeDrawer}
                 {name}
@@ -66,6 +67,7 @@
                 {badgeclass}
                 {highlightAnotherItem}
                 {deprecated}
+                {highlight}
                 {items} />
             {/each}
           </ul>
@@ -81,7 +83,7 @@
         {/if}
         {#if items}
           <ul>
-            {#each items as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items }}
+            {#each items as { name, href, icon, badge, badgeclass, highlightAnotherItem, deprecated, items, highlight }}
               <SidebarMenuItem
                 {closeDrawer}
                 {name}
@@ -91,6 +93,7 @@
                 {badgeclass}
                 {highlightAnotherItem}
                 {deprecated}
+                {highlight}
                 {items} />
             {/each}
           </ul>
@@ -105,17 +108,21 @@
         on:click={closeDrawer}
         class={`group ${$page.url.pathname == href ? "active" : ""} ${
           $page.url.pathname == highlightAnotherItem ? "active" : ""
-        } ${$page.url.pathname.startsWith(href) ? "active" : ""}`}>
+        } ${$page.url.pathname.startsWith(href) ? "active" : ""} ${
+          highlight
+            ? "from-primary to-primary/0 hover:to-primary/10 from-[-200%] to-60% [background-image:linear-gradient(-35deg,var(--tw-gradient-stops))]"
+            : ""
+        }`}>
         {#if icon}
-          <span>
+          <span class={highlight ? " group-hover:text-primary transition-colors" : ""}>
             {@html icon}
           </span>
         {/if}
         <span class={deprecated ? "line-through" : undefined}>
           {@html $t(name)}
         </span>
         {#if badge}
-          <span class={`badge badge-sm font-mono ${badgeclass && badgeclass}`}>
+          <span class={`badge badge-sm font-mono text-opacity-70 ${badgeclass && badgeclass}`}>
             {$t(badge)}
           </span>
         {/if}

diff --git a/src/docs/src/lib/data/pages.js b/src/docs/src/lib/data/pages.js
@@ -26,25 +26,21 @@ export const pages = [
         name: "Config",
         tags: "setup config styled themes base logs utils rtl",
         href: "/docs/config/",
-        badge: "updated",
       },
       {
         name: "Colors",
         tags: "colors",
         href: "/docs/colors/",
-        badge: "updated",
       },
       {
         name: "Themes",
         tags: "themes disable custom color generator",
         href: "/docs/themes/",
-        badge: "updated",
       },
       {
         name: "Utilities",
         tags: "Utilities utility class",
         href: "/docs/utilities/",
-        badge: "new",
       },
       {
         name: "Layout & Typography",
@@ -66,13 +62,11 @@ export const pages = [
             name: "Button",
             tags: "button btn",
             href: "/components/button/",
-            badge: "updated",
           },
           {
             name: "Dropdown",
             tags: "dropdown popover menu listbox",
             href: "/components/dropdown/",
-            badge: "updated",
           },
           {
             name: "Modal",
@@ -88,7 +82,6 @@ export const pages = [
             name: "Theme Controller",
             tags: "theme controller change dark mode",
             href: "/components/theme-controller/",
-            badge: "new",
           },
         ],
       },
@@ -140,7 +133,6 @@ export const pages = [
             name: "Diff",
             tags: "diff compare comparison image slider",
             href: "/components/diff/",
-            badge: "new",
           },
           {
             name: "Kbd",
@@ -161,7 +153,6 @@ export const pages = [
             name: "Timeline",
             tags: "timeline",
             href: "/components/timeline/",
-            badge: "new",
           },
         ],
       },
@@ -208,7 +199,6 @@ export const pages = [
             name: "Tab",
             tags: "tabs",
             href: "/components/tab/",
-            badge: "updated",
           },
         ],
       },
@@ -240,7 +230,6 @@ export const pages = [
             name: "Skeleton",
             tags: "skeleton loading placeholder",
             href: "/components/skeleton/",
-            badge: "new",
           },
           {
             name: "Toast",
@@ -318,7 +307,6 @@ export const pages = [
             name: "Divider",
             tags: "divider",
             href: "/components/divider/",
-            badge: "updated",
           },
           {
             name: "Drawer",
@@ -398,7 +386,8 @@ export const pages = [
     href: "/store/",
     icon: '<svg class="h-5 w-5" width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.0391 22V42H8.03906V22" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M5.84231 13.7766C4.31276 17.7377 7.26307 22 11.5092 22C14.8229 22 17.5276 19.3137 17.5276 16C17.5276 19.3137 20.2139 22 23.5276 22H24.546C27.8597 22 30.546 19.3137 30.546 16C30.546 19.3137 33.2518 22 36.5655 22C40.8139 22 43.767 17.7352 42.2362 13.7723L39.2337 6H8.84523L5.84231 13.7766Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/></svg>',
     badge: "new",
-    badgeclass: "badge-primary",
+    badgeclass: "bg-primary/10 text-[inherit] border-transparent uppercase font-sans font-bold",
+    highlight: true,
   },
   {
     name: "Blog",