Reviewed-on: #270 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: widlam <mikolaj.widla@gmail.com> Co-committed-by: widlam <mikolaj.widla@gmail.com>
		
			
				
	
	
		
			70 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			70 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <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 );
 | |
| 
 | |
| const emit = defineEmits([
 | |
|     'theme:changed'
 | |
| ])
 | |
| 
 | |
| 
 | |
| function changeLogoForTheme(){
 | |
|     logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
 | |
| }
 | |
| 
 | |
| function isDarkModeSet(){
 | |
|     return localStorage.theme == "dark";
 | |
| }
 | |
| 
 | |
| function changeTheme(theme:string){
 | |
|             changeLogoForTheme()
 | |
|             emit('theme:changed',theme);
 | |
|     }
 | |
| 
 | |
| 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-normal items-center">
 | |
|                 <sidebar-menu-element-component category-name="Parser">
 | |
|                     <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>
 | |
| 
 | |
|                 <sidebar-menu-element-component category-name="Encoder">
 | |
|                     <SidebarToolLinkComponent path-to="/encoder/base64" element-content="Base64" />
 | |
|                     <SidebarToolLinkComponent path-to="/encoder/url" element-content="URL" />
 | |
|                 </sidebar-menu-element-component>
 | |
| 
 | |
| 
 | |
|             </div>
 | |
|             <FooterComponent @theme="changeTheme"></FooterComponent>
 | |
|         </div>
 | |
|     </aside>
 | |
| </template> |