| 1 | <template> |
| 2 | <div class="sidebar-footer bg-body rounded-lg py-0.5" :class="{ collapsed }"> |
| 3 | <n-menu :options="menuOptions" :collapsed :collapsed-width :indent="18" /> |
| 4 | </div> |
| 5 | </template> |
| 6 | |
| 7 | <script lang="ts" setup> |
| 8 | import { NMenu } from "naive-ui" |
| 9 | import { computed, h, ref } from "vue" |
| 10 | import { RouterLink } from "vue-router" |
| 11 | import { useThemeStore } from "@/stores/theme" |
| 12 | import { renderIcon } from "@/utils" |
| 13 | |
| 14 | const { collapsed = false } = defineProps<{ |
| 15 | collapsed?: boolean |
| 16 | }>() |
| 17 | |
| 18 | const ContactIcon = "ic:outline-alternate-email" |
| 19 | const DocsIcon = "carbon:document" |
| 20 | const LogoutIcon = "ion:log-out-outline" |
| 21 | |
| 22 | const menuOptions = ref([ |
| 23 | { |
| 24 | label: () => |
| 25 | h( |
| 26 | "a", |
| 27 | { |
| 28 | href: "https://docs.socfortress.co/", |
| 29 | target: "_blank", |
| 30 | rel: "noopener noreferrer" |
| 31 | }, |
| 32 | { default: () => "Documentation" } |
| 33 | ), |
| 34 | key: "documentation", |
| 35 | icon: renderIcon(DocsIcon) |
| 36 | }, |
| 37 | { |
| 38 | label: () => |
| 39 | h( |
| 40 | "a", |
| 41 | { |
| 42 | href: "https://www.socfortress.co/contact-us", |
| 43 | target: "_blank", |
| 44 | rel: "noopener noreferrer" |
| 45 | }, |
| 46 | { default: () => "Contact SOCFortress" } |
| 47 | ), |
| 48 | key: "contact-socfortress", |
| 49 | icon: renderIcon(ContactIcon) |
| 50 | }, |
| 51 | { |
| 52 | label: () => |
| 53 | h( |
| 54 | RouterLink, |
| 55 | { |
| 56 | to: { |
| 57 | name: "Logout" |
| 58 | } |
| 59 | }, |
| 60 | { default: () => "Logout" } |
| 61 | ), |
| 62 | key: "Logout", |
| 63 | icon: renderIcon(LogoutIcon) |
| 64 | } |
| 65 | ]) |
| 66 | |
| 67 | const themeStore = useThemeStore() |
| 68 | |
| 69 | const collapsedWidth = computed<number>(() => themeStore.sidebar.closeWidth - 16) |
| 70 | </script> |