Update docs structure

docs/menu.json

@@ -4,23 +4,23 @@
     "items": [
       {
         "title": "Introduction",
-        "href": "/docs/getting-started"
+        "href": "/docs/ui/getting-started"
       },
       {
         "title": "Browser Support",
-        "href": "/docs/getting-started/browser-support"
+        "href": "/docs/ui/getting-started/browser-support"
       },
       {
         "title": "Customize Tabler",
-        "href": "/docs/getting-started/customize"
+        "href": "/docs/ui/getting-started/customize"
       },
       {
         "title": "Download",
-        "href": "/docs/getting-started/download"
+        "href": "/docs/ui/getting-started/download"
       },
       {
         "title": "FAQ",
-        "href": "/docs/getting-started/faq"
+        "href": "/docs/ui/getting-started/faq"
       }
     ]
   },
@@ -30,11 +30,11 @@
       {
         "title": "Colors",
         "label": "new",
-        "href": "/docs/base/colors"
+        "href": "/docs/ui/base/colors"
       },
       {
         "title": "Typography",
-        "href": "/docs/base/typography"
+        "href": "/docs/ui/base/typography"
       }
     ]
   },
@@ -44,11 +44,11 @@
       {
         "title": "Page layouts",
         "label": "new",
-        "href": "/docs/layout/page-layouts"
+        "href": "/docs/ui/layout/page-layouts"
       },
       {
         "title": "Page headers",
-        "href": "/docs/layout/page-headers"
+        "href": "/docs/ui/layout/page-headers"
       }
     ]
   },
@@ -57,139 +57,139 @@
     "items": [
       {
         "title": "Alerts",
-        "href": "/docs/components/alerts"
+        "href": "/docs/ui/components/alerts"
       },
       {
         "title": "Autosize",
-        "href": "/docs/components/autosize"
+        "href": "/docs/ui/components/autosize"
       },
       {
         "title": "Avatars",
-        "href": "/docs/components/avatars"
+        "href": "/docs/ui/components/avatars"
       },
       {
         "title": "Badges",
-        "href": "/docs/components/badges"
+        "href": "/docs/ui/components/badges"
       },
       {
         "title": "Breadcrumb",
-        "href": "/docs/components/breadcrumb"
+        "href": "/docs/ui/components/breadcrumb"
       },
       {
         "title": "Buttons",
-        "href": "/docs/components/buttons"
+        "href": "/docs/ui/components/buttons"
       },
       {
         "title": "Cards",
-        "href": "/docs/components/cards"
+        "href": "/docs/ui/components/cards"
       },
       {
         "title": "Carousel",
-        "href": "/docs/components/carousel"
+        "href": "/docs/ui/components/carousel"
       },
       {
         "title": "Charts",
-        "href": "/docs/components/charts"
+        "href": "/docs/ui/components/charts"
       },
       {
         "title": "Datagrid",
-        "href": "/docs/components/datagrid"
+        "href": "/docs/ui/components/datagrid"
       },
       {
         "title": "Divider",
-        "href": "/docs/components/divider"
+        "href": "/docs/ui/components/divider"
       },
       {
         "title": "Dropdowns",
-        "href": "/docs/components/dropdowns"
+        "href": "/docs/ui/components/dropdowns"
       },
       {
         "title": "Dropzone",
-        "href": "/docs/components/dropzone"
+        "href": "/docs/ui/components/dropzone"
       },
       {
         "title": "Empty",
-        "href": "/docs/components/empty"
+        "href": "/docs/ui/components/empty"
       },
       {
         "title": "Icons",
-        "href": "/docs/components/icons"
+        "href": "/docs/ui/components/icons"
       },
       {
         "title": "Inline Player",
-        "href": "/docs/components/inline-player"
+        "href": "/docs/ui/components/inline-player"
       },
       {
         "title": "Modals",
-        "href": "/docs/components/modals"
+        "href": "/docs/ui/components/modals"
       },
       {
         "title": "Placeholder",
-        "href": "/docs/components/placeholder"
+        "href": "/docs/ui/components/placeholder"
       },
       {
         "title": "Popover",
-        "href": "/docs/components/popover"
+        "href": "/docs/ui/components/popover"
       },
       {
         "title": "Progress",
-        "href": "/docs/components/progress"
+        "href": "/docs/ui/components/progress"
       },
       {
         "title": "Progress background",
-        "href": "/docs/components/progressbg"
+        "href": "/docs/ui/components/progressbg"
       },
       {
         "title": "Range slider",
-        "href": "/docs/components/range-slider"
+        "href": "/docs/ui/components/range-slider"
       },
       {
         "title": "Ribbons",
-        "href": "/docs/components/ribbons"
+        "href": "/docs/ui/components/ribbons"
       },
       {
         "title": "Spinners",
-        "href": "/docs/components/spinners"
+        "href": "/docs/ui/components/spinners"
       },
       {
         "title": "Statuses",
-        "href": "/docs/components/statuses"
+        "href": "/docs/ui/components/statuses"
       },
       {
         "title": "Steps",
-        "href": "/docs/components/steps"
+        "href": "/docs/ui/components/steps"
       },
       {
         "title": "Switch icon",
-        "href": "/docs/components/switch-icon"
+        "href": "/docs/ui/components/switch-icon"
       },
       {
         "title": "Tables",
-        "href": "/docs/components/tables"
+        "href": "/docs/ui/components/tables"
       },
       {
         "title": "Tabs",
-        "href": "/docs/components/tabs"
+        "href": "/docs/ui/components/tabs"
       },
       {
         "title": "Timelines",
-        "href": "/docs/components/timelines"
+        "href": "/docs/ui/components/timelines"
       },
       {
         "title": "Tinymce",
-        "href": "/docs/components/tinymce"
+        "href": "/docs/ui/components/tinymce"
       },
       {
         "title": "Toasts",
-        "href": "/docs/components/toasts"
+        "href": "/docs/ui/components/toasts"
       },
       {
         "title": "Tooltips",
-        "href": "/docs/components/tooltips"
+        "href": "/docs/ui/components/tooltips"
       },
       {
         "title": "Tracking",
-        "href": "/docs/components/tracking"
+        "href": "/docs/ui/components/tracking"
       }
     ]
   },
@@ -198,35 +198,35 @@
     "items": [
       {
         "title": "Base elements",
-        "href": "/docs/forms/form-elements"
+        "href": "/docs/ui/forms/form-elements"
       },
       {
         "title": "Fieldset",
-        "href": "/docs/forms/form-fieldset"
+        "href": "/docs/ui/forms/form-fieldset"
       },
       {
         "title": "Color check",
-        "href": "/docs/forms/form-color-check"
+        "href": "/docs/ui/forms/form-color-check"
       },
       {
         "title": "Image check",
-        "href": "/docs/forms/form-image-check"
+        "href": "/docs/ui/forms/form-image-check"
       },
       {
         "title": "Selectbox",
-        "href": "/docs/forms/form-selectboxes"
+        "href": "/docs/ui/forms/form-selectboxes"
       },
       {
         "title": "Validation",
-        "href": "/docs/forms/form-validation"
+        "href": "/docs/ui/forms/form-validation"
       },
       {
         "title": "Input mask",
-        "href": "/docs/forms/form-input-mask"
+        "href": "/docs/ui/forms/form-input-mask"
       },
       {
         "title": "Form helpers",
-        "href": "/docs/forms/form-helpers"
+        "href": "/docs/ui/forms/form-helpers"
       }
     ]
   },
@@ -235,11 +235,11 @@
     "items": [
       {
         "title": "Flags",
-        "href": "/docs/plugins/flags"
+        "href": "/docs/ui/plugins/flags"
       },
       {
         "title": "Payments",
-        "href": "/docs/plugins/payments"
+        "href": "/docs/ui/plugins/payments"
       }
     ]
   },
@@ -248,15 +248,15 @@
     "items": [
       {
         "title": "Borders",
-        "href": "/docs/utilities/borders"
+        "href": "/docs/ui/utilities/borders"
       },
       {
         "title": "Cursors",
-        "href": "/docs/utilities/cursors"
+        "href": "/docs/ui/utilities/cursors"
       },
       {
         "title": "Interactions",
-        "href": "/docs/utilities/interactions"
+        "href": "/docs/ui/utilities/interactions"
       }
     ]
   },
@@ -265,7 +265,7 @@
     "items": [
       {
         "title": "Introduction",
-        "href": "/docs/icons",
+        "href": "/docs/ui/icons",
         "label": "new"
       },
       {

docs/ui/components/avatars.mdx

@@ -73,7 +73,7 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](colors) to see the list of available colors.
+Customize the color of the avatars' background. You can click [here](/docs/ui/colors) to see the list of available colors.
 
 ```html example centered separated code
 <span class="avatar bg-green-lt">AB</span>

docs/ui/components/badges.mdx

@@ -72,7 +72,7 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
 
 ## Soft color badges
 
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.
+You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/colors) to see the list of available colors and choose ones that best suit your design.
 
 ```html code example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue-lt">Blue</span>

docs/ui/components/divider.mdx

@@ -42,7 +42,7 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/colors) to see the list of available colors.
 
 ```html code example height="380px"
 <p>

docs/ui/components/progress.mdx

@@ -66,7 +66,7 @@ You can also use native HTML5 `<progress>` element.
 
 ## Progress color
 
-Customize the color of the progress bar to suit your design. Click [here](colors) to see the list of available colors.
+Customize the color of the progress bar to suit your design. Click [here](/docs/ui/colors) to see the list of available colors.
 
 ```html code example columns={1} centered separated
 <div class="progress">

docs/ui/components/ribbons.mdx

@@ -68,7 +68,7 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
 
 ```html example columns={1} centered
 <div class="card">

docs/ui/components/steps.mdx

@@ -50,7 +50,7 @@ Add tooltips, if you want to provide users with additional information about the
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/colors) to see the range of available colors.
 
 ```html code example
 <div class="steps steps-green">

docs/ui/layout/page-layouts.mdx

@@ -4,7 +4,7 @@ description: Learn how to build a sample version of the dashboard
 ---
 
 <Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/docs/getting-started/download). 
+   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/download). 
 </Callout>
 
 ## Sample layout