docs: optimize the document site experience on mobile devices

geist-org · Jun 26, 2021 · 2b25e2e · 2b25e2e
1 parent b32ec0d
commit 2b25e2e
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 39 deletions.
diff --git a/lib/components/layout.tsx b/lib/components/layout.tsx
@@ -62,7 +62,6 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             display: flex;
             box-sizing: border-box;
           }
-
           .sidebar {
             width: 200px;
             margin-right: 20px;
@@ -76,13 +75,11 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             transition: transform 200ms ease-out;
             z-index: 100;
           }
-
           .side-shadow {
             width: 220px;
             flex-shrink: 0;
             height: 100vh;
           }
-
           .main {
             display: flex;
             max-width: calc(100% - 220px);
@@ -97,7 +94,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
             .layout {
               max-width: 100%;
               width: 100%;
-              padding: 5rem 1rem;
+              padding: 20px 1rem;
             }
 
             .sidebar {
@@ -107,11 +104,14 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
               right: 0;
               z-index: 10;
               width: 100vw;
-              height: ${expanded ? '100vh' : '0'};
-              background-color: ${theme.palette.background};
-              padding: 0;
+              box-sizing: border-box;
+              height: ${expanded ? '90vh' : '0'};
+              background-color: transparent;
+              backdrop-filter: invert(15%) blur(5px);
+              padding: var(--geist-page-nav-height) 0 0 0;
               overflow: hidden;
               transition: height 250ms ease;
+              box-shadow: ${expanded ? theme.expressiveness.shadowSmall : 'none'};
             }
 
             .main {

diff --git a/lib/components/menu/menu-links.tsx b/lib/components/menu/menu-links.tsx
@@ -33,7 +33,7 @@ const MenuLinks = () => {
           position: relative;
           margin: 0 auto;
           padding: 0 ${theme.layout.gap};
-          height: 60px;
+          height: var(--geist-page-nav-height);
         }
 
         .site-name {

diff --git a/lib/components/menu/menu-sticker.tsx b/lib/components/menu/menu-sticker.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
-import { Tabs, useTheme } from 'components'
+import { useMediaQuery, Tabs, useTheme } from 'components'
 import useCurrentState from 'components/utils/use-current-state'
 import Router from 'next/router'
 import Metadatas from 'lib/data'
@@ -12,10 +12,13 @@ const MenuSticker = () => {
   const { tabbar: currentUrlTabValue, locale } = useLocale()
   const [tabValue, setTabValue, tabValueRef] = useCurrentState<string>('')
   const [fixed, setFixed, fixedRef] = useCurrentState<boolean>(false)
+  const isSM = useMediaQuery('sm', { match: 'down' })
+  const isXS = useMediaQuery('xs', { match: 'down' })
+  const isFixedTabs = fixed && !isXS
 
   const tabbarData = useMemo(() => Metadatas[locale], [locale])
 
-  useEffect(() => updateTabbarFixed(fixed), [fixed])
+  useEffect(() => updateTabbarFixed(isFixedTabs), [isFixedTabs])
   useEffect(() => setTabValue(currentUrlTabValue), [currentUrlTabValue])
   useEffect(() => {
     const scrollHandler = () => {
@@ -36,15 +39,18 @@ const MenuSticker = () => {
 
   return (
     <>
-      <div className={`nav-fill ${fixed ? 'active' : ''}`} />
-      <nav className={fixed ? 'fixed' : ''}>
+      <div className={`nav-fill ${isFixedTabs ? 'active' : ''}`} />
+      <nav className={isFixedTabs ? 'fixed' : ''}>
         <div className="sticker">
-          <div className="inner">
-            <Tabs height="46px" value={tabValue} onChange={val => setTabValue(val)}>
+          <div className={`inner ${isSM && 'sm'}`}>
+            <Tabs
+              height="calc(var(--geist-page-tab-height) - 2px)"
+              value={tabValue}
+              onChange={val => setTabValue(val)}>
               {tabbarData
                 ? tabbarData.map((tab, index) => (
                     <Tabs.Item
-                      height="46px"
+                      height="calc(var(--geist-page-tab-height) - 2px)"
                       font="14px"
                       py={0}
                       label={tab.localeName || tab.name}
@@ -68,14 +74,14 @@ const MenuSticker = () => {
         }
 
         .nav-fill.active {
-          height: 48px;
+          height: var(--geist-page-tab-height);
           visibility: visible;
         }
 
         nav {
           position: relative;
           width: 100%;
-          height: 48px;
+          height: var(--geist-page-tab-height);
           background-color: ${theme.palette.background};
         }
 
@@ -113,6 +119,20 @@ const MenuSticker = () => {
           margin: 0 auto;
         }
 
+        .inner.sm {
+          width: 100%;
+        }
+        .inner.sm :global(.tab) {
+          width: 33.333%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0;
+        }
+        .inner.sm :global(.tab.active) {
+          background-color: ${theme.palette.accents_2};
+        }
+
         .inner :global(.content) {
           display: none;
         }

diff --git a/lib/components/sidebar/active-catalog.tsx b/lib/components/sidebar/active-catalog.tsx
@@ -27,6 +27,19 @@ const ActiveCatalog: React.FC<Props> = React.memo(({ name, localeName, ...props
         .active {
           color: ${theme.palette.foreground};
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          span {
+            letter-spacing: 0.3px;
+            display: inline-block;
+            font-weight: 800;
+            font-size: 17px;
+            padding: 15px 10px 10px;
+            width: 100%;
+            text-align: center;
+            color: ${theme.palette.accents_6};
+          }
+        }
       `}</style>
     </span>
   )

diff --git a/lib/components/sidebar/active-link.tsx b/lib/components/sidebar/active-link.tsx
@@ -20,7 +20,7 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
   const isActive = pathname === href
 
   return (
-    <div className="link">
+    <div className={`link ${isActive ? 'active' : ''}`}>
       <Link href={href}>
         <a className={isActive ? 'active' : ''}>
           {title}
@@ -61,6 +61,30 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
           color: ${theme.palette.accents_4};
           font-weight: 400;
         }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          .link {
+            background-color: ${theme.palette.accents_1};
+            margin-bottom: 22px;
+            padding: 0 25px;
+            border-radius: 30px;
+            height: 64px;
+            user-select: none;
+          }
+          .link.active {
+            border: 8px solid ${theme.palette.accents_5};
+            background-color: ${theme.palette.background};
+          }
+          a {
+            font-weight: bold;
+            font-size: 22px;
+            color: ${theme.palette.accents_6};
+          }
+          a.active {
+            font-size: 22px;
+            color: ${theme.palette.accents_5};
+          }
+        }
       `}</style>
     </div>
   )

diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx
@@ -76,7 +76,7 @@ export const Sidebar: React.FC<Props> = React.memo(() => {
 
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .box {
-            padding: calc(3.5 * ${theme.layout.gap}) 15vw;
+            padding: 20px 35px 10px;
             width: 100vw;
             height: 100%;
           }

diff --git a/lib/components/sidebar/tabbar-mobile.tsx b/lib/components/sidebar/tabbar-mobile.tsx
@@ -15,24 +15,25 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
   return (
     <div className="tabbar">
       <Button className="toggle" auto type="abort" onClick={handler}>
-        <SlidersIcon size={16} />
+        <SlidersIcon size={14} />
       </Button>
-      <span>Geist UI</span>
+      <span className="geist-ui">Geist UI</span>
       <style jsx>{`
         .tabbar {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 950;
-          height: 3.7rem;
-          background-color: ${theme.palette.background};
+          height: var(--geist-page-nav-height);
+          background-color: ${theme.palette.accents_1};
           display: flex;
           align-items: center;
-          padding: 0 calc(${theme.layout.gap} * 2);
+          padding: 0 20px;
           box-sizing: border-box;
           justify-content: space-between;
           border-bottom: 1px solid ${theme.palette.border};
+          box-shadow: ${theme.expressiveness.shadowSmall};
         }
 
         .tabbar :global(.toggle) {
@@ -45,11 +46,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
           color: ${theme.palette.accents_6};
         }
 
-        span {
-          color: ${theme.palette.accents_7};
-          font-size: 0.75rem;
+        .geist-ui {
+          color: ${theme.palette.foreground};
+          font-size: 17px;
+          font-weight: bold;
+          padding-right: 5px;
           display: inline-flex;
           text-transform: capitalize;
+          user-select: none;
+          letter-spacing: 0.4px;
         }
 
         @media only screen and (min-width: ${theme.layout.breakpointMobile}) {

diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Autocomplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"AutoComplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Autocomplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
		[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"AutoComplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]