Adam Bem
3c79bddde3
Co-authored-by: Adam Bem <adam.bem@zoho.eu> Reviewed-on: #227 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
53 lines
2.1 KiB
Vue
53 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
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 changeLogoForTheme(){
|
|
logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
|
|
}
|
|
|
|
function isDarkModeSet(){
|
|
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
}
|
|
|
|
onMounted( () => {
|
|
changeLogoForTheme();
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
|
|
<div class="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 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 Formatter" />
|
|
<SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
|
|
<SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
|
|
</sidebar-menu-element-component>
|
|
|
|
|
|
<sidebar-menu-element-component category-name="REST">
|
|
<SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
|
|
</sidebar-menu-element-component>
|
|
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</template> |