finish tools docs

website/src/lib/docs/en/toolbar.mdx

@@ -2,9 +2,31 @@
 title: Toolbar
 ---
 
+<script lang="ts">
+    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import { currentTool, Tool } from '$lib/stores';
+	import { onMount, onDestroy } from 'svelte';
+
+    onMount(() => {
+        currentTool.set(Tool.ROUTING);
+    });
+
+    onDestroy(() => {
+        currentTool.set(null);
+    });
+</script>
+
 # { title }
 
 The toolbar is located on the left side of the map, and is the heart of the application, as it provides access to the main features of **gpx.studio**.
-As for the [edit actions](./menu/edit), most of the tools can be applied to multiple files at once.
+Each tool is represented by an icon, and can be activated by clicking on it.
 
-The next sections describe the tools individually.
+<div class="flex flex-row justify-center text-foreground">
+    <div>
+        <Toolbar class="border rounded-md shadow-lg" />
+    </div>
+</div>
+
+As with [edit actions](./menu/edit), most tools can be applied to multiple files at once, and to [inner tracks and segments](./gpx).
+
+The next sections describe each tool in detail.