Added ability to handle anchor links in sidebar

web-app/packages/admin-app/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     PDivider: typeof import('primevue/divider')['default']

web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: LicenseRef-MerginMaps-Commercial
 -->
 
 <script setup lang="ts">
-import { AdminRoutes } from '@mergin/admin-lib'
+import { AdminRoutes, SidebarFooter } from '@mergin/admin-lib'
 import { SideBarItemModel, SideBarTemplate } from '@mergin/lib'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
@@ -37,6 +37,9 @@ const sidebarItems = computed<SideBarItemModel[]>(() => [
 <template>
   <side-bar-template :sidebarItems="sidebarItems">
     <template #subtitle>Administration</template>
+    <template #footer>
+      <sidebar-footer />
+    </template>
   </side-bar-template>
 </template>
 

web-app/packages/admin-lib/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     PButton: typeof import('primevue/button')['default']
     PColumn: typeof import('primevue/column')['default']
     PDataTable: typeof import('primevue/datatable')['default']
+    PDivider: typeof import('primevue/divider')['default']
     PInputSwitch: typeof import('primevue/inputswitch')['default']
     PInputText: typeof import('primevue/inputtext')['default']
     PPassword: typeof import('primevue/password')['default']

web-app/packages/admin-lib/src/modules/index.ts

@@ -3,3 +3,4 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export * from './admin'
+export * from './layout'

web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <PDivider class="m-0" />
+  <a
+    href="/"
+    target="__blank"
+    class="flex justify-content-between align-items-center title-t5 no-underline cursor-pointer"
+    >Dashboard <i class="title-t1 ti ti-external-link"
+  /></a>
+</template>
+
+<script setup lang="ts"></script>

web-app/packages/admin-lib/src/modules/layout/components/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export { default as SidebarFooter } from './SidebarFooter.vue'

web-app/packages/admin-lib/src/modules/layout/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export * from './components'

web-app/packages/lib/src/modules/layout/components/SideBarItem.vue

@@ -21,6 +21,7 @@ function closeDrawer() {
 <template>
   <li class="px-2">
     <router-link
+      v-if="item.to"
       :class="[
         'sidebar-item__link p-3 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg paragraph-p5',
         item.active && 'sidebar-item__link--active'
@@ -32,6 +33,20 @@ function closeDrawer() {
       </div>
       <span>{{ item.title }}</span></router-link
     >
+    <a
+      v-else-if="item.href"
+      :class="[
+        'sidebar-item__link p-3 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg paragraph-p5',
+        item.active && 'sidebar-item__link--active'
+      ]"
+      :href="item.href"
+      target="_blank"
+    >
+      <div class="mr-2 flex align-items-center">
+        <i :class="['paragraph-p3', item.icon]"></i>
+      </div>
+      <span>{{ item.title }}</span>
+    </a>
   </li>
 </template>
 

web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue

@@ -60,11 +60,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </ul>
         </nav>
       </div>
-      <div>
+      <footer class="flex flex-column row-gap-3 p-3">
         <slot name="footer">
           <!-- footer content -->
+          <template v-if="userStore.isSuperUser">
+            <PDivider class="m-0" />
+            <a
+              href="/admin"
+              target="__blank"
+              class="flex justify-content-between align-items-center title-t5 no-underline cursor-pointer"
+              >Admin Panel <i class="title-t1 ti ti-external-link"
+            /></a>
+          </template>
         </slot>
-      </div>
+      </footer>
     </div>
   </aside>
 </template>
@@ -75,13 +84,14 @@ import { useRoute } from 'vue-router'
 
 import { SideBarItemModel } from '../types'
 
-import { DashboardRouteName } from '@/main'
+import { DashboardRouteName, useUserStore } from '@/main'
 import SideBarItem from '@/modules/layout/components/SideBarItem.vue'
 import { useLayoutStore } from '@/modules/layout/store'
 import { ProjectRouteName } from '@/modules/project'
 
 const route = useRoute()
 const layoutStore = useLayoutStore()
+const userStore = useUserStore()
 const props = defineProps<{
   sidebarItems?: SideBarItemModel[]
 }>()

web-app/packages/lib/src/modules/layout/types.ts

@@ -4,7 +4,8 @@
 
 export interface SideBarItemModel {
   title: string
-  to: string
+  to?: string
+  href?: string
   icon: string
   active: boolean
 }