From fcaea9f3e2bfce4ec0ec614f6d3bf50852f5b86c Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 25 Oct 2024 11:46:29 +0200
Subject: [PATCH 1/2] Added ability to handle anchor links in sidebar

---
 .../src/modules/layout/components/SideBarItem.vue | 15 +++++++++++++++
 .../modules/layout/components/SideBarTemplate.vue | 15 +++++++++++++--
 web-app/packages/lib/src/modules/layout/types.ts  |  3 ++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
index 8198ac79..57c26f38 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
+++ b/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>
 
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
index 60c9fa37..c0404548 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
@@ -75,13 +75,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[]
 }>()
@@ -106,7 +107,17 @@ const initialSidebarItems = computed<SideBarItemModel[]>(() => {
         title: 'Projects',
         to: '/projects',
         icon: 'ti ti-article'
-      }
+      },
+      ...(userStore.isSuperUser
+        ? [
+            {
+              active: false,
+              title: 'Administration',
+              href: '/admin',
+              icon: 'ti ti-home-cog'
+            }
+          ]
+        : [])
     ]
   )
 })
diff --git a/web-app/packages/lib/src/modules/layout/types.ts b/web-app/packages/lib/src/modules/layout/types.ts
index 9adff558..38b3e873 100644
--- a/web-app/packages/lib/src/modules/layout/types.ts
+++ b/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
 }

From 06c11171f3338259b9c684784e07c976dd11bf19 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 28 Oct 2024 13:13:50 +0100
Subject: [PATCH 2/2] added sidebar footer to admin

---
 web-app/packages/admin-app/components.d.ts    |  2 +-
 .../src/modules/layout/components/Sidebar.vue |  5 +++-
 web-app/packages/admin-lib/components.d.ts    |  1 +
 .../packages/admin-lib/src/modules/index.ts   |  1 +
 .../layout/components/SidebarFooter.vue       | 11 ++++++++
 .../src/modules/layout/components/index.ts    |  5 ++++
 .../admin-lib/src/modules/layout/index.ts     |  5 ++++
 .../layout/components/SideBarTemplate.vue     | 25 +++++++++----------
 8 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue
 create mode 100644 web-app/packages/admin-lib/src/modules/layout/components/index.ts
 create mode 100644 web-app/packages/admin-lib/src/modules/layout/index.ts

diff --git a/web-app/packages/admin-app/components.d.ts b/web-app/packages/admin-app/components.d.ts
index 97368df8..6bcacfd1 100644
--- a/web-app/packages/admin-app/components.d.ts
+++ b/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']
diff --git a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue b/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
index cccd4d1d..ffb15e66 100644
--- a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
+++ b/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>
 
diff --git a/web-app/packages/admin-lib/components.d.ts b/web-app/packages/admin-lib/components.d.ts
index a42c284a..e548e1e2 100644
--- a/web-app/packages/admin-lib/components.d.ts
+++ b/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']
diff --git a/web-app/packages/admin-lib/src/modules/index.ts b/web-app/packages/admin-lib/src/modules/index.ts
index 1f5c85ac..73f87b14 100644
--- a/web-app/packages/admin-lib/src/modules/index.ts
+++ b/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'
diff --git a/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue b/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue
new file mode 100644
index 00000000..75667f01
--- /dev/null
+++ b/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>
diff --git a/web-app/packages/admin-lib/src/modules/layout/components/index.ts b/web-app/packages/admin-lib/src/modules/layout/components/index.ts
new file mode 100644
index 00000000..dcf4179e
--- /dev/null
+++ b/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'
diff --git a/web-app/packages/admin-lib/src/modules/layout/index.ts b/web-app/packages/admin-lib/src/modules/layout/index.ts
new file mode 100644
index 00000000..d333dd14
--- /dev/null
+++ b/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'
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
index c0404548..813e2a79 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
+++ b/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>
@@ -107,17 +116,7 @@ const initialSidebarItems = computed<SideBarItemModel[]>(() => {
         title: 'Projects',
         to: '/projects',
         icon: 'ti ti-article'
-      },
-      ...(userStore.isSuperUser
-        ? [
-            {
-              active: false,
-              title: 'Administration',
-              href: '/admin',
-              icon: 'ti ti-home-cog'
-            }
-          ]
-        : [])
+      }
     ]
   )
 })