From 4aec12e0f300e582bc4d5e869ff84d64e9206e28 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Tue, 9 May 2023 18:43:25 +0200
Subject: [PATCH] refactor
---
components/Nav/Navbar.vue | 29 +++++++++++++++++++++++++
components/{ => Nav}/Navigation.vue | 1 -
components/{ => Nav}/TableOfContent.vue | 6 +----
layouts/article.vue | 23 ++++----------------
layouts/custom.vue | 18 ++-------------
5 files changed, 36 insertions(+), 41 deletions(-)
create mode 100644 components/Nav/Navbar.vue
rename components/{ => Nav}/Navigation.vue (94%)
rename components/{ => Nav}/TableOfContent.vue (79%)
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
new file mode 100644
index 00000000..ed9146b9
--- /dev/null
+++ b/components/Nav/Navbar.vue
@@ -0,0 +1,29 @@
+<template>
+ <v-app-bar>
+ <v-app-bar-nav-icon
+ variant="text"
+ @click.stop="drawer = !drawer"
+ ></v-app-bar-nav-icon>
+ <v-toolbar-title>Microbial Warefare</v-toolbar-title>
+ <v-btn @click="toggleTheme">toggle theme</v-btn>
+ </v-app-bar>
+ <v-navigation-drawer v-model="drawer">
+ <v-card flat>
+ <v-list>
+ <NavNavigation :navigation="navigation" />
+ </v-list>
+ </v-card>
+ </v-navigation-drawer>
+
+</template>
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+const { navigation, page, surround, globals } = useContent();
+console.log(page.value);
+const theme = useTheme();
+
+function toggleTheme() {
+ theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+const drawer = ref(true);
+</script>
diff --git a/components/Navigation.vue b/components/Nav/Navigation.vue
similarity index 94%
rename from components/Navigation.vue
rename to components/Nav/Navigation.vue
index faad58fd..b2c227d9 100644
--- a/components/Navigation.vue
+++ b/components/Nav/Navigation.vue
@@ -13,7 +13,6 @@ const props = defineProps<{
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
- prepend-icon="mdi-account-circle"
nav
:title="navItem.title"
active-color="primary"
diff --git a/components/TableOfContent.vue b/components/Nav/TableOfContent.vue
similarity index 79%
rename from components/TableOfContent.vue
rename to components/Nav/TableOfContent.vue
index a281e098..ef7a7e6c 100644
--- a/components/TableOfContent.vue
+++ b/components/Nav/TableOfContent.vue
@@ -1,10 +1,6 @@
<script setup lang="ts">
const props = defineProps<{
links: any;
- depth: {
- type: number;
- default: 2;
- };
}>();
// const { navigation } = useContent();
@@ -20,7 +16,7 @@ const props = defineProps<{
:href="`#${link.id}`"
variant="plain"
>
- <template v-if="link?.children && links.depth <= props.depth">
+ <template v-if="link?.children?.length > 0 && link.depth <= 3">
<TableOfContent :links="link.children" />
</template>
</v-list-item>
diff --git a/layouts/article.vue b/layouts/article.vue
index 6b2bfaf8..cd373b26 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,26 +1,12 @@
<template>
<v-card>
<v-app>
- <v-app-bar>
- <v-app-bar-nav-icon
- variant="text"
- @click.stop="drawer = !drawer"
- ></v-app-bar-nav-icon>
- <v-toolbar-title>Microbial Warefare</v-toolbar-title>
- </v-app-bar>
-
- <v-navigation-drawer v-model="drawer">
- <v-card flat>
- <v-list>
- <Navigation :navigation="navigation" />
- </v-list>
- </v-card>
- </v-navigation-drawer>
+ <NavNavbar />
<v-navigation-drawer location="right" permanent>
- <v-list> <TableOfContent :links="page.body.toc.links" /> </v-list
+ <v-list> <NavTableOfContent :links="page.body.toc.links" /> </v-list
></v-navigation-drawer>
<v-main style="min-height: 300px">
- <v-container>
+ <v-container class="px-8">
<slot />
<v-footer app>footer</v-footer>
@@ -31,7 +17,6 @@
</template>
<script setup lang="ts">
const { navigation, page, surround, globals } = useContent();
-console.log(page.value);
-const drawer = ref(true);
+console.log("the toc", page.value);
</script>
diff --git a/layouts/custom.vue b/layouts/custom.vue
index 0f6a223d..8e67eac3 100644
--- a/layouts/custom.vue
+++ b/layouts/custom.vue
@@ -1,21 +1,7 @@
<template>
<v-card>
<v-app>
- <v-app-bar>
- <v-app-bar-nav-icon
- variant="text"
- @click.stop="drawer = !drawer"
- ></v-app-bar-nav-icon>
- <v-toolbar-title>Microbial Warefare</v-toolbar-title>
- </v-app-bar>
-
- <v-navigation-drawer v-model="drawer">
- <v-card flat>
- <v-list>
- <Navigation :navigation="navigation" />
- </v-list>
- </v-card>
- </v-navigation-drawer>
+ <NavNavbar />
<v-main style="min-height: 300px">
<v-container>
@@ -27,7 +13,7 @@
</v-card>
</template>
<script setup lang="ts">
-const { navigation, page, surround, globals } = useContent();
+const { navigation } = useContent();
const drawer = ref(true);
</script>
--
GitLab