@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/docs/ui/components/vector-maps.mdx

@@ -0,0 +1,170 @@
+---
+title: Vector Maps
+description: Interactive guide to creating vector maps with jsVectorMap.
+summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+
+```html
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+	});
+});
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+      // @formatter:on
+      document.addEventListener("DOMContentLoaded", function() {
+      	const map = new jsVectorMap({
+      		selector: '#map-world-markers',
+      		map: 'world_merc',
+      		backgroundColor: 'transparent',
+      		regionStyle: {
+      			initial: {
+      				fill: tabler.getColor('body-bg'),
+      				stroke: tabler.getColor('border-color'),
+      				strokeWidth: 2,
+      			}
+      		},
+      		zoomOnScroll: false,
+      		zoomButtons: false,
+      		markers: [
+      			{
+      				coords: [61.524, 105.3188],
+      				name: "Russia",
+      			},
+      			{
+      				coords: [56.1304, -106.3468],
+      				name: "Canada",
+      			},
+      			{
+      				coords: [71.7069, -42.6043],
+      				name: "Greenland",
+      			},
+      			{
+      				coords: [26.8206, 30.8025],
+      				name: "Egypt",
+      			},
+      			{
+      				coords: [-14.235, -51.9253],
+      				name: "Brazil",
+      			},
+      			{
+      				coords: [35.8617, 104.1954],
+      				name: "China",
+      			},
+      			{
+      				coords: [37.0902, -95.7129],
+      				name: "United States",
+      			},
+      			{
+      				coords: [60.472024, 8.468946],
+      				name: "Norway",
+      			},
+      			{
+      				coords: [48.379433, 31.16558],
+      				name: "Ukraine",
+      			},
+      		],
+      		markerStyle: {
+      			initial: {
+      				r: 4,
+      				stroke: '#fff',
+      				opacity: 1,
+      				strokeWidth: 3,
+      				stokeOpacity: .5,
+      				fill: tabler.getColor('blue')
+      			},
+      			hover: {
+      				fill: tabler.getColor('blue'),
+      				stroke: tabler.getColor('blue')
+      			}
+      		},
+      		markerLabelStyle: {
+      			initial: {
+      				fontSize: 10
+      			},
+      		},
+      		labels: {
+      			markers: {
+      				render: function(marker) {
+      					return marker.name
+      				},
+      			},
+      		},
+      	});
+      	window.addEventListener("resize", () => {
+      		map.updateSize();
+      	});
+      });
+      // @formatter:off
+    </script>
+```

package/docs/ui/forms/form-elements.mdx

@@ -140,7 +140,6 @@ Include an additional element in your input section, such as a button which can
     </div>
     <div class="col-auto">
       <a href="#" class="btn btn-icon" aria-label="Button">
-
         <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <circle cx="10" cy="10" r="7" />

package/docs/ui/getting-started/browser-support.mdx

@@ -4,9 +4,11 @@ description: Check browser compatibility for Tabler.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
@@ -20,3 +22,7 @@ Browser|Version
 <img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
 <img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
 <img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+
+## Internet Explorer
+
+Internet Explorer is not supported.

package/docs/ui/getting-started/how-to-contribute.mdx

@@ -0,0 +1,96 @@
+---
+title: How to Contribute
+summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+description: Guide to contributing to Tabler and setting up for development.
+---
+
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+
+## Contribution Requirements
+
+When contributing to Tabler, please adhere to the following guidelines:
+
+1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
+2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
+3. Contributions must be submitted via GitHub pull requests.
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
+
+## Installation
+
+Follow these steps to set up Tabler for development:
+
+1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/tabler.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```bash
+   git checkout -b your-branch-name
+	```
+
+## Development
+
+To set up Tabler for development, follow these steps:
+
+<div className="steps">
+
+### Ensure Node.js and npm are installed
+
+You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+### Install Ruby and Bundler
+
+Tabler uses Ruby and Bundler to manage dependencies. Install Ruby and Bundler by following the instructions in the [Ruby documentation](https://www.ruby-lang.org/en/documentation/installation/) and the [Bundler website](https://bundler.io/). 
+
+### Install dependencies
+
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+
+```bash
+pnpm install
+```
+
+### Install Jekyll
+
+Tabler uses Jekyll to build the documentation. Install Jekyll by running the following command:
+
+```bash
+bundle install
+```
+
+### Start developer mode
+
+Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
+
+```bash
+pnpm run dev
+```
+
+### Make changes
+
+Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
+</div>
+
+## Compiling for Production
+
+Before submitting a pull request, ensure your changes are properly compiled and tested:
+
+1. Compile the production files
+
+	```bash
+	pnpm run build
+	```
+
+2. Test all pages to confirm everything works as expected.
+
+## Submitting Your Contribution
+
+Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!

package/docs/ui/getting-started/installation.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation
+order: 1
+summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
+description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+---
+
+This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+
+<div className="steps">
+
+### Step 1: Create a Basic HTML File
+
+Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler demo</title>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+```
+
+### Step 2: Add Tabler CSS and JavaScript
+
+Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+```
+
+Update your HTML file to include these resources:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler Demo</title>
+  <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+</head>
+<body>
+  <h1>Hello, Tabler!</h1>
+  <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+</body>
+</html>
+```
+
+This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+
+You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
+
+### 3. Open in Your Browser
+
+Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+
+</div>
+
+With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.

package/docs/ui/getting-started/license.mdx

@@ -0,0 +1,30 @@
+---
+title: Tabler License
+summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+description: "Tabler's MIT license: freedom to use, modify, and share."
+---
+
+Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+
+## What You Can Do with Tabler
+
+The MIT license allows you to:
+- Use Tabler in **commercial projects**.
+- Use Tabler in **personal or private projects**.
+- **Modify and customize** the source code to fit your requirements.
+- **Distribute** the original or modified code.
+- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
+
+## What You Cannot Do with Tabler
+
+- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+
+## What You Must Do When Using Tabler
+
+When using Tabler, you must:
+1. Include the **license notice** in all copies of the work.
+2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
+
+For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
+
+By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!

package/docs/ui/layout/navbars.mdx

@@ -0,0 +1,106 @@
+---
+title: Navbars
+summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
+description: Create and customize responsive navigation bars with ease.
+---
+
+The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars.
+
+With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
+
+
+
+## Sample navbar
+
+To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
+
+```html
+<header class="navbar navbar-expand-md d-print-none">
+  ...
+</header>
+```
+
+The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
+
+```html example fullpage vcentered background="surface" padding={0} height="20rem"
+<header class="navbar navbar-expand-md d-print-none">
+  <div class="container-xl">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+      <a href="javascript:void(0)">
+        <svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
+          <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
+          <path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
+        </svg>
+      </a>
+    </div>
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon">
+            <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+              <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+              <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Home
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+              <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Profile
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M9 11l3 3l8 -8"></path>
+              <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Settings
+          </span>
+        </a>
+      </li>
+    </ul>
+    <div class="navbar-nav flex-row order-md-last ms-auto">
+      <div class="nav-item dropdown">
+        <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+          <span class="avatar avatar-sm" style="background-image: url(/static/samples/avatars/044m.jpg)"></span>
+          <div class="d-none d-xl-block ps-2">
+            <div>Paweł Kuna</div>
+            <div class="mt-1 small text-secondary">UI Designer</div>
+          </div>
+        </a>
+        <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+          <a href="#" class="dropdown-item">Status</a>
+          <a href="./profile.html" class="dropdown-item">Profile</a>
+          <a href="#" class="dropdown-item">Feedback</a>
+          <div class="dropdown-divider"></div>
+          <a href="./settings.html" class="dropdown-item">Settings</a>
+          <a href="./sign-in.html" class="dropdown-item">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+```