Add documentation

src/languages/de.ts

@@ -199,6 +199,7 @@ const de = {
 	'settings.apperance.nav.search': 'Suche in der Navigationsleiste anzeigen',
 	'settings.nav.add': 'Hinzufügen',
 	'settings.nav.unused': 'Ungenutzte Komponenten',
+	'settings.nav.tooltip': 'Bewege die icons einfach via Drag and Drop an die gewünschte Position',
 	'settings.apperance.homework.opacity': 'Transparenz abgelaufener Hausaufgaben',
 	'settings.homework.amount': 'Hausaufgaben pro Seite',
 

src/languages/en.ts

@@ -194,6 +194,7 @@ const en = {
 	'settings.apperance.nav.search': 'Show search in the navigation bar',
 	'settings.nav.add': 'Add',
 	'settings.nav.unused': 'Unused components',
+	'settings.nav.tooltip': 'Simply move the icons via drag and drop to their desired position',
 	'settings.apperance.homework.opacity': 'Transparency of finished homework',
 	'settings.homework.amount': 'Homework per page',
 

src/lib/preferences/NavigationItems.svelte

@@ -53,6 +53,10 @@
 </script>
 
 <div>
+	<div class="pb-3">
+		<i class="bx bx-question-mark" />
+		<I18n key="settings.nav.tooltip" />
+	</div>
 	<ul
 		class="w-full justify-evenly flex gap-2 list-none bg-light-box dark:bg-dark-box bg-opacity-50 rounded-lg py-2 px-1"
 		on:dragover={(e) => {

src/routes/documentation/settings/+page.md

@@ -19,14 +19,6 @@ By default the theme will automatically adapt to your systems theme.
 At the top of [this page in the settings](/settings/preferences) you can select between _automatic_, _dark_ and _light_. Please note that automatic currently doesn't work in real time but only on reload.
 This can also be changed by searching for _Theme_ in the launcher/search.
 
-### Navigation Bar
-
-By default the navigation shows labels underneath the icons, for experienced users who already know which icons leads to which site,
-this may not be as minimal and optically pleasing as they would desire it to be.  
-For those users a switch exists to toggle between showing and hiding these labels.  
-By default the search _(also known as the launcher)_ can only be started using the keyboard shortcut `ctrl` + `k`,
-when enabling the second switch you can also start it with a touch/the mouse from the navigation.
-
 ### Homework
 
 Homeworks which are already due are greyed out. The amount of this effect can be changed using the slider at the bottom.

src/routes/documentation/settings/navigation/+page.md

@@ -0,0 +1,16 @@
+---
+title: Settings
+author:
+  name: Dlurak
+  link: https://github.com/Dlurak
+date: 2024-03-02
+---
+
+# Navigation Settings
+
+These settings can be found [here](/settings/preferences). By default the navigation shows labels underneath the icons,
+for experienced users who already know which icons leads to which site,
+this may not be as minimal and optically pleasing as they would desire it to be.  
+For those users a switch exists to toggle between showing and hiding these labels.  
+You can customize which buttons are in which order. By dragging and dropping them in the gray area, they can be removed
+by pressing the `x` button and readded by pressing the <span class="bg-light-secondary dark:bg-dark-secondary px-2 py-1">Add</span> button.