medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: use Navigation and Sidebar components

This commit is contained in:
jamesread 2025-12-25 01:27:57 +00:00
parent 6a43cdd35b
commit e49db63dad
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/resources/vue/App.vue
View File

@ -19,7 +19,9 @@
</Header> </Header>
<div id="layout"> <div id="layout">
<Navigation ref="navigation" id="mainnav" v-if="showNavigation">
<Sidebar ref="sidebar" id = "mainnav" v-if="showNavigation" /> <Sidebar ref="sidebar" id = "mainnav" v-if="showNavigation" />
</Navigation>
<div id="content" initial-martial-complete="{{ hasLoaded }}"> <div id="content" initial-martial-complete="{{ hasLoaded }}">
<main title="Main content"> <main title="Main content">
@ -77,6 +79,7 @@
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import Sidebar from 'picocrank/vue/components/Sidebar.vue'; import Sidebar from 'picocrank/vue/components/Sidebar.vue';
import Navigation from 'picocrank/vue/components/Navigation.vue';
import Header from 'picocrank/vue/components/Header.vue'; import Header from 'picocrank/vue/components/Header.vue';
import { HugeiconsIcon } from '@hugeicons/vue' import { HugeiconsIcon } from '@hugeicons/vue'
import { Menu01Icon } from '@hugeicons/core-free-icons' import { Menu01Icon } from '@hugeicons/core-free-icons'
@ -91,6 +94,7 @@ const { t, locale } = useI18n();
const router = useRouter(); const router = useRouter();
const sidebar = ref(null); const sidebar = ref(null);
const navigation = ref(null);
const username = ref('notset'); const username = ref('notset');
const isLoggedIn = ref(false); const isLoggedIn = ref(false);
const serverConnection = ref(true); const serverConnection = ref(true);
@ -181,7 +185,7 @@ function updateHeaderFromInit() {
showLoginLink.value = false showLoginLink.value = false
} }
renderSidebar() renderNavigation()
if (window.initResponse.loginRequired) { if (window.initResponse.loginRequired) {
router.push('/login') router.push('/login')
@ -189,19 +193,19 @@ function updateHeaderFromInit() {
} }
} }
function renderSidebar() { function renderNavigation() {
if (!sidebar.value) { if (!navigation.value) {
return return
} }
const rootDashboards = window.initResponse?.rootDashboards || [] const rootDashboards = window.initResponse?.rootDashboards || []
if (typeof sidebar.value.clear === 'function') { if (typeof navigation.value.clear === 'function') {
sidebar.value.clear() navigation.value.clear()
} }
for (const rootDashboard of rootDashboards) { for (const rootDashboard of rootDashboards) {
sidebar.value.addNavigationLink({ navigation.value.addNavigationLink({
id: rootDashboard, id: rootDashboard,
name: rootDashboard, name: rootDashboard,
title: rootDashboard, title: rootDashboard,
@ -210,15 +214,15 @@ function renderSidebar() {
}) })
} }
sidebar.value.addSeparator() navigation.value.addSeparator()
sidebar.value.addRouterLink('Entities', t('nav.entities')) navigation.value.addRouterLink('Entities', t('nav.entities'))
if (showLogs.value) { if (showLogs.value) {
sidebar.value.addRouterLink('Logs', t('nav.logs')) navigation.value.addRouterLink('Logs', t('nav.logs'))
} }
if (showDiagnostics.value) { if (showDiagnostics.value) {
sidebar.value.addRouterLink('Diagnostics', t('nav.diagnostics')) navigation.value.addRouterLink('Diagnostics', t('nav.diagnostics'))
} }
} }
@ -257,9 +261,9 @@ function changeLanguage() {
languagePreference.value = selectedLanguage.value languagePreference.value = selectedLanguage.value
} }
// Update sidebar with new translations // Update navigation with new translations
if (sidebar.value) { if (navigation.value) {
renderSidebar() renderNavigation()
} }
closeLanguageDialog() closeLanguageDialog()