From 7f8cd7be5e9a8be863380444ba73cf191931d43b Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 14:10:42 +0200
Subject: [PATCH] Centered menu items

---
 .../components/sidebar/SidebarComponent.vue   | 30 ++++++++-----------
 .../sidebar/SidebarMenuElementComponent.vue   | 13 ++++----
 .../sidebar/SidebarToolLinkComponent.vue      | 16 +++++++---
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 4b873b3..12971e1 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -16,11 +16,7 @@ onMounted( () => {
 } )
 
 function changeLogoForTheme(){
-    if (isDarkModeSet()) {
-    logoR11.value = logoDark;
-    } else{
-        logoR11.value = logoWhite;
-    }
+    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
 }
 
 
@@ -29,30 +25,30 @@ function changeLogoForTheme(){
 
 <template>
     <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
-        <div class="h-full px-3 py-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
+        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
             <a href="https://release11.com/">
-                <img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
+                <img :src="logoR11" class="w-72 h-16 p-2 pt-0 dark:bg-gray-800"/>
             </a>
-            <ul class="space-y-2 font-medium">
+            <div class="flex flex-col font-medium items-center">
                 <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>
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
+                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
                 </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>
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
                 </sidebar-menu-element-component>
 
 
                 <sidebar-menu-element-component category-name="REST">
-                    <li><SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" /></li>
+                    <SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
                 </sidebar-menu-element-component>
 
-            </ul>
+            </div>
         </div>
     </aside>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index c7959f1..4a3c3c9 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const isActive = ref(false);
+const isActive = ref(true);
 
 function switchHiddenElement(){
     isActive.value = !isActive.value;
@@ -17,12 +17,11 @@ const props = defineProps(
 
 
 <template>
-    <li>
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="flex items-center w-full p-2 text-lg font-bold text-gray-900 transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700">
-            <span class="flex-1 text-center items-center whitespace-nowrap">{{props.categoryName}}</span>
+
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
+            <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <ul class="py-2 space-y-2 bg-white dark:bg-gray-700 rounded-b-xl" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full mb-4 py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
-        </ul>
-    </li>
+        </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index 5d885ce..b6450b8 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -2,13 +2,21 @@
 import { RouterLink } from 'vue-router';
 const props = defineProps(
     {
-        elementContent: {required: false},
-        pathTo: {type: String, required:true}
+        elementContent: { required: false },
+        pathTo: { type: String, required: true }
     }
 )
 
 </script>
 
 <template>
-    <RouterLink class="flex w-full py-2 px-4 text-center text-gray-800 font-thin transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
-</template>
\ No newline at end of file
+    <RouterLink
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600"
+        :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+</template>
+
+<style>
+.router-link-active {
+    font-weight: 500;
+}
+</style>
\ No newline at end of file