Beginning the mobile UI

app.vue

@@ -10,7 +10,7 @@ const toggled = ref(false);
         <div class="gapx-3 flex align-stretch">
           <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
           <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
-          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" :class="{ 'mod-active': $route.path.startsWith('/editing') }">Editeur</NuxtLink>
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
         </div>
       </div>
       <div class="mobile-bigger"><SearchView /></div>
@@ -19,7 +19,16 @@ const toggled = ref(false);
         <NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
       </div>
     </div>
-    <NuxtLayout ref="layout"><NuxtPage/></NuxtLayout>
+    <NuxtLayout ref="layout">
+      <template #mobile>
+        <div class="mobile-nav-bar">
+          <NuxtLink class="mobile-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
+          <NuxtLink class="mobile-nav-bar-text" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
+          <NuxtLink class="mobile-nav-bar-text" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
+        </div>
+      </template>
+      <NuxtPage/>
+    </NuxtLayout>
     <div class="site-footer">
       <p>Copyright Peaceultime - 2024</p>
       <NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>

assets/common.css

@@ -385,3 +385,16 @@ html.light-mode .light-block {
     display: inline-block;
     vertical-align: sub;
 }
+
+.mobile-nav-bar {
+    display: flex;
+    flex-direction: column;
+    margin: 0.5em;
+}
+
+.mobile-nav-bar-text {
+    padding: .25em;
+    font-size: larger;
+    color: var(--text-color);
+    font-weight: bolder;
+}

components/explorer/ExplorerNavigation.vue

@@ -12,17 +12,9 @@ if(!isNaN(project.value))
 </script>
 
 <template>
-    <div class="site-body-left-column">
-        <div class="site-body-left-column-inner">
-            <div class="nav-view-outer">
-                <div class="nav-view">
     <div class="tree-item">
         <div class="tree-item-children">
             <NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
         </div>
     </div>
-                </div>
-            </div>
-        </div>
-    </div>
 </template>

layouts/default.vue

@@ -6,6 +6,17 @@ defineExpose({
 
 <template>
 	<div class="site-body">
+		<div class="site-body-left-column desktop-hidden mobile-block">
+			<div class="site-body-left-column-inner">
+				<div class="nav-view-outer">
+					<div class="nav-view">
+						<div class="mobile-slot">
+							<slot name="mobile"></slot>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 		<slot />
 	</div>
 </template>

layouts/explorer.vue

@@ -6,7 +6,18 @@ defineExpose({
 
 <template>
 	<div class="site-body">
+		<div class="site-body-left-column">
+			<div class="site-body-left-column-inner">
+				<div class="nav-view-outer">
+					<div class="nav-view">
+						<div class="mobile-slot desktop-hidden mobile-block">
+							<slot name="mobile"></slot>
+						</div>
 						<ExplorerNavigation></ExplorerNavigation>
+					</div>
+				</div>
+			</div>
+		</div>
 		<slot></slot>
 	</div>
 </template>

server/api/project/[projectId]/comment.get.ts

@@ -1,4 +1,5 @@
 import useDatabase from '~/composables/useDatabase';
+import { Comment } from '~/types/api';
 
 export default defineEventHandler(async (e) => {
     const project = getRouterParam(e, "projectId");

server/api/project/[projectId]/navigation.get.ts

@@ -1,6 +1,8 @@
 import useDatabase from '~/composables/useDatabase';
 import { Navigation } from '~/types/api';
 
+type NavigatioNExtension = Navigation & { owner: number, navigable: boolean };
+
 export default defineEventHandler(async (e) => {
     const project = getRouterParam(e, "projectId");
     const { user } = await getUserSession(e);
@@ -13,7 +15,7 @@ export default defineEventHandler(async (e) => {
 
     const db = useDatabase();
 
-    const content = db.query(`SELECT "path", "title", "type", "order", "private", "navigable", "owner" FROM explorer_files WHERE project = ?1`).all(project!).sort((a: any, b: any) => a.path.length - b.path.length) as Navigation[];
+    const content = db.query(`SELECT "path", "title", "type", "order", "private", "navigable", "owner" FROM explorer_files WHERE project = ?1`).all(project!).sort((a: any, b: any) => a.path.length - b.path.length) as NavigatioNExtension[];
 
     if(content.length > 0)
     {