Merge remote-tracking branch 'origin/dev' into dev

src/pages/_docs/alerts.md

@@ -1,6 +1,6 @@
 ---
 title: Alerts
-menu: docs.components.alerts
+menu: help.docs.components.alerts
 description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
 bootstrap-link: components/alerts/
 ---

src/pages/_docs/autosize.md

@@ -1,6 +1,6 @@
 ---
 title: Autosize
-menu: docs.plugins.autosize
+menu: help.docs.plugins.autosize
 description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
 libs: autosize
 ---

src/pages/_docs/avatars.md

@@ -1,6 +1,6 @@
 ---
 title: Avatars
-menu: docs.components.avatars
+menu: help.docs.components.avatars
 description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
 ---
 

src/pages/_docs/badges.md

@@ -1,6 +1,6 @@
 ---
 title: Badges
-menu: docs.components.badges
+menu: help.docs.components.badges
 description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
 bootstrap-link: components/badge/
 ---

src/pages/_docs/borders.md

@@ -1,6 +1,6 @@
 ---
 title: Borders
-menu: docs.utils.borders
+menu: help.docs.utils.borders
 description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
 ---
 

src/pages/_docs/breadcrumb.md

@@ -1,6 +1,6 @@
 ---
 title: Breadcrumb
-menu: docs.components.breadcrumb
+menu: help.docs.components.breadcrumb
 description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
 bootstrap-link: components/breadcrumb/
 ---

src/pages/_docs/browser-support.md

@@ -1,6 +1,6 @@
 ---
 title: Browser Support
-menu: docs.base.browser-support
+menu: help.docs.base.browser-support
 ---
 
 As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.

src/pages/_docs/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons
 description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
 bootstrap-link: components/buttons/
-menu: docs.components.buttons
+menu: help.docs.components.buttons
 ---
 
 

src/pages/_docs/cards.md

@@ -1,6 +1,6 @@
 ---
 title: Cards
-menu: docs.components.cards
+menu: help.docs.components.cards
 description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
 bootstrap-link: components/card/
 ---

src/pages/_docs/carousel.md

@@ -1,6 +1,6 @@
 ---
 title: Carousel
-menu: docs.components.carousel
+menu: help.docs.components.carousel
 description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.  
 bootstrap-link: components/carousel/
 ---

src/pages/_docs/charts.md

@@ -1,6 +1,6 @@
 ---
 title: Charts
-menu: docs.plugins.charts
+menu: help.docs.plugins.charts
 libs: apexcharts
 description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
 ---

src/pages/_docs/colors.md

@@ -1,6 +1,6 @@
 ---
 title: Colors
-menu: docs.content.colors
+menu: help.docs.content.colors
 description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. 
 bootstrap-link: utilities/colors/
 ---

src/pages/_docs/countup.md

@@ -1,7 +1,7 @@
 ---
 title: Countup
 description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)
-menu: docs.components.countup
+menu: help.docs.components.countup
 libs: countup
 ---
 

src/pages/_docs/cursors.md

@@ -1,7 +1,7 @@
 ---
 title: Cursors
 description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
-menu: docs.utils.cursors
+menu: help.docs.utils.cursors
 ---
 
 ## Cursor utilities 

src/pages/_docs/customize.md

@@ -1,5 +1,5 @@
 ---
-menu: docs.content.customize
+menu: help.docs.content.customize
 title: Customize Tabler
 description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
 ---

src/pages/_docs/datagrid.md

@@ -1,6 +1,6 @@
 ---
 title: Data grid
-menu: docs.components.datagrid
+menu: help.docs.components.datagrid
 description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
 ---
 

src/pages/_docs/divider.md

@@ -2,7 +2,7 @@
 title: Divider
 description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.  
 bootstrap-link: components/dropdowns/#dividers
-menu: docs.components.divider
+menu: help.docs.components.divider
 ---
 
 

src/pages/_docs/download.md

@@ -1,6 +1,6 @@
 ---
 title: Download
-menu: docs.base.download
+menu: help.docs.base.download
 description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
 ---
 

src/pages/_docs/dropdowns.md

@@ -2,7 +2,7 @@
 title: Dropdowns
 description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
 bootstrap-link: components/dropdowns
-menu: docs.components.dropdowns
+menu: help.docs.components.dropdowns
 ---
 
 

src/pages/_docs/dropzone.md

@@ -1,6 +1,6 @@
 ---
 title: Dropzone
-menu: docs.plugins.dropzone
+menu: help.docs.plugins.dropzone
 libs: dropzone
 description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
 ---

src/pages/_docs/empty.md

@@ -1,7 +1,7 @@
 ---
 title: Empty states
 description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
-menu: docs.components.empty
+menu: help.docs.components.empty
 ---
 
 

src/pages/_docs/flags.md

@@ -1,6 +1,6 @@
 ---
 title: Flags
-menu: docs.plugins.flags
+menu: help.docs.plugins.flags
 description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. 
 plugin: flags
 libs: tabler-flags

src/pages/_docs/form-color-check.md

@@ -1,6 +1,6 @@
 ---
 title: Color check
-menu: docs.forms.color-check
+menu: help.docs.forms.color-check
 ---
 
 Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors.

src/pages/_docs/form-elements.md

@@ -3,7 +3,7 @@ title: Form elements
 description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
 bootstrap-link: components/forms/
 libs: nouislider
-menu: docs.forms.form-elements
+menu: help.docs.forms.form-elements
 ---
 
 

src/pages/_docs/form-fieldset.md

@@ -1,6 +1,6 @@
 ---
 title: Form fieldset
-menu: docs.forms.fieldset
+menu: help.docs.forms.fieldset
 ---
 
 Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element.

src/pages/_docs/form-helpers.md

@@ -1,7 +1,7 @@
 ---
 title: Form helpers
 description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. 
-menu: docs.forms.form-helpers
+menu: help.docs.forms.form-helpers
 ---
 
 

src/pages/_docs/form-image-check.md

@@ -1,6 +1,6 @@
 ---
 title: Image check
-menu: docs.forms.image-check
+menu: help.docs.forms.image-check
 ---
 
 Add an image check to your form and give users visually attractive options to choose from.

src/pages/_docs/form-selectboxes.md

@@ -1,6 +1,6 @@
 ---
 title: Form selectboxes
-menu: docs.forms.selectboxes
+menu: help.docs.forms.selectboxes
 ---
 
 Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.

src/pages/_docs/form-validation.md

@@ -1,6 +1,6 @@
 ---
 title: Validation states
-menu: docs.forms.validation-states
+menu: help.docs.forms.validation-states
 description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
 ---
 

src/pages/_docs/getting-started.md

@@ -1,6 +1,6 @@
 ---
 title: Getting started
-menu: docs.base.getting-started
+menu: help.docs.base.getting-started
 ---
 
 ## What are the benefits?

src/pages/_docs/icons.md

@@ -1,6 +1,6 @@
 ---
 title: Icons
-menu: docs.content.icons
+menu: help.docs.content.icons
 description: Use one of over 1500 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 banner: icons
 ---

src/pages/_docs/index.html

@@ -1,6 +1,6 @@
 ---
 title: Introduction
-menu: docs.index
+menu: help.docs.index
 redirect_from: docs.html
 ---
 

src/pages/_docs/inline-player.md

@@ -1,6 +1,6 @@
 ---
 title: Inline player
-menu: docs.plugins.plyr
+menu: help.docs.plugins.plyr
 libs: plyr
 description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
 ---

src/pages/_docs/input-mask.md

@@ -1,7 +1,7 @@
 ---
 title: Input mask
 description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
-menu: docs.plugins.input-mask
+menu: help.docs.plugins.input-mask
 ---
 
 To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.

src/pages/_docs/interactions.md

@@ -1,7 +1,7 @@
 ---
 title: Interactions
 description: Utility classes that change how users interact with contents of a website.
-menu: docs.utils.interactions
+menu: help.docs.utils.interactions
 ---
 
 ## Text selection

src/pages/_docs/modals.md

@@ -1,7 +1,7 @@
 ---
 title: Modals
 description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
-menu: docs.components.modals
+menu: help.docs.components.modals
 ---
 
 ## Default markup

src/pages/_docs/page-headers.md

@@ -1,6 +1,6 @@
 ---
 title: Page headers
-menu: docs.layout.headers
+menu: help.docs.layout.headers
 description: Page heading examples for Tabler
 ---
 

src/pages/_docs/payments.md

@@ -1,6 +1,6 @@
 ---
 title: Payments
-menu: docs.plugins.payments
+menu: help.docs.plugins.payments
 description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
 plugin: payments
 ---

src/pages/_docs/placeholder.md

@@ -1,6 +1,6 @@
 ---
 title: Placeholder
-menu: docs.components.placeholder
+menu: help.docs.components.placeholder
 description: Placeholder is used to reserve space for content that soon will appear in a layout.
 redirect_from:
     - /docs/skeleton.html

src/pages/_docs/popover.md

@@ -2,7 +2,7 @@
 title: Popovers
 description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
 bootstrap-link: components/popovers
-menu: docs.components.popover
+menu: help.docs.components.popover
 ---
 
 

src/pages/_docs/progress.md

@@ -2,7 +2,7 @@
 title: Progress bars
 description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
 bootstrap-link: components/progress
-menu: docs.components.progress
+menu: help.docs.components.progress
 ---
 
 

src/pages/_docs/progressbg.md

@@ -1,6 +1,6 @@
 ---
 title: Progressbg
-menu: docs.components.progressbg
+menu: help.docs.components.progressbg
 ---
 
 {% capture code %}

src/pages/_docs/range-slider.md

@@ -1,6 +1,6 @@
 ---
 title: Range slider
-menu: docs.components.range-slider
+menu: help.docs.components.range-slider
 libs: nouislider
 ---
 

src/pages/_docs/ribbons.md

@@ -1,6 +1,6 @@
 ---
 title: Ribbons
-menu: docs.components.ribbons
+menu: help.docs.components.ribbons
 description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. 
 ---
 

src/pages/_docs/spinners.md

@@ -1,6 +1,6 @@
 ---
 title: Spinners
-menu: docs.components.spinners
+menu: help.docs.components.spinners
 description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
 bootstrap-link: components/spinners/
 ---

src/pages/_docs/statuses.md

@@ -1,6 +1,6 @@
 ---
 title: Statuses
-menu: docs.components.statuses
+menu: help.docs.components.statuses
 description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
 ---
 

src/pages/_docs/steps.md

@@ -1,6 +1,6 @@
 ---
 title: Steps
-menu: docs.components.steps
+menu: help.docs.components.steps
 description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
 new: true
 ---

src/pages/_docs/switch-icon.md

@@ -1,6 +1,6 @@
 ---
 title: Switch icon
-menu: docs.components.switch-icon
+menu: help.docs.components.switch-icon
 description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
 banner: icons
 ---