Added sidebar (#224)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #224
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref , onMounted } from 'vue'
+import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
+import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
+import logoDark from '@assets/logo_biale.svg';
+import logoWhite from '@assets/logo_czarne.svg';
+
+const logoR11 = ref( logoDark );
+
+function isDarkModeSet(){
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+onMounted( () => {
+    changeLogoForTheme();
+} )
+
+function changeLogoForTheme(){
+    if (isDarkModeSet()) {
+    logoR11.value = logoDark;
+    } else{
+        logoR11.value = logoWhite;
+    }
+}
+
+
+
+</script>
+
+<template>
+    <aside class="relative top-0 left-0 z-40 w-1/12 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+        <div class="h-full px-3 py-4 overflow-y-auto bg-gray-100 dark:bg-gray-800">
+            <a href="https://release11.com/">
+                <img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
+            </a>
+            <ul class="space-y-2 font-medium">
+                <sidebar-menu-element-component category-name="XML">
+                    <li><SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" /></li>
+                    <li><SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" /></li>
+                    <li><SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" /></li>
+                    <li><SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" /></li>
+                </sidebar-menu-element-component>
+
+                <sidebar-menu-element-component category-name="Formatter">
+                    <li><SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" /></li>
+                    <li><SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" /></li>
+                    <li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
+                </sidebar-menu-element-component>
+
+                <li><SidebarToolLinkComponent class="text-left" path-to="/rest/mock" element-content="REST Mock" /></li>
+
+            </ul>
+        </div>
+    </aside>
+</template>

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { ref } from 'vue'
+const hiddenOrActive = ref('hidden');
+
+function switchHiddenElement(){
+    if(hiddenOrActive.value == 'hidden'){
+        hiddenOrActive.value = "active";
+    } else{
+        hiddenOrActive.value = "hidden"
+    }
+}
+
+const props = defineProps(
+    {
+        categoryName: {required : true}
+    }
+)
+
+
+</script>
+
+
+<template>
+    <li>
+        <button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+            <span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
+        </button>
+        <ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
+            <slot></slot>
+        </ul>
+    </li>
+</template>

Frontend/src/components/sidebar/SidebarToolLinkComponent.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { RouterLink } from 'vue-router';
+const props = defineProps(
+    {
+        elementContent: {required: false},
+        pathTo: {type: String, required:true}
+    }
+)
+
+</script>
+
+<template>
+    <RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+</template>