merge new tools (#244)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-authored-by: Adam Bem <bema@noreply.example.com>
Reviewed-on: #244

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref , onMounted} from 'vue'
+import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
+import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
+import FooterComponent from './FooterComponent.vue';
+import logoDark from '@assets/logo_biale.svg';
+import logoWhite from '@assets/logo_czarne.svg';
+
+const logoR11 = ref( logoDark );
+
+
+function changeLogoForTheme(){
+    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
+}
+
+function isDarkModeSet(){
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+onMounted( () => {
+    changeLogoForTheme();
+})
+
+</script>
+
+<template>
+    <aside class="hidden md:flex relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
+        <div class="flex flex-col h-full px-3 pt-2 pb-4 overflow-y-auto">
+            <a href="https://release11.com/">
+                <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
+            </a>
+            <div class="flex basis-full flex-col font-medium items-center">
+                <sidebar-menu-element-component category-name="XML">
+                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
+                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
+                </sidebar-menu-element-component>
+
+                <sidebar-menu-element-component category-name="Formatter">
+                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML" />
+                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON" />
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML" />
+                </sidebar-menu-element-component>
+
+
+                <sidebar-menu-element-component category-name="REST">
+                    <SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
+                </sidebar-menu-element-component>
+
+            </div>
+            <FooterComponent></FooterComponent>
+        </div>
+    </aside>
+</template>