R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Centered menu items

Browse Source
This commit is contained in:
Adam Bem
2023-06-15 14:10:42 +02:00
parent a82f7f3b73
commit 7f8cd7be5e
3 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
View File

@@ -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>