Dev/v1.2 (#4)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Reviewed-on: #4

fe/src/themes/Enigma/SideMenu/SideMenu.vue

@@ -3,7 +3,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useBreadcrumb } from '@/composables/useBreadcrumb'
 import { useNotifications } from '@/modules/notification'
 import '@/assets/css/themes/enigma/side-menu.css'
-import logo from '@/assets/images/logonew-mykopkb.svg'
+import logo from '@/assets/images/logo.svg'
 import { useSideMenu } from '@/composables/useSideMenu'
 import { useAuthStore } from '@/stores/auth'
 import { Lucide } from '@/components/ui/lucide'
@@ -129,16 +129,18 @@ onUnmounted(() => {
         <!-- Logo  -->
         <div
           class="relative z-10 mt-3 hidden h-[90px] w-[320px] flex-none items-center overflow-hidden pl-8 pr-14 duration-100 xl:flex group-[.side-menu--collapsed]:group-hover:xl:w-[320px] group-[.side-menu--collapsed]:xl:w-[165px]">
-          <a class="relative flex items-center transition-[margin] duration-100 xl:ml-1.5 group-[.side-menu--collapsed]:group-hover:xl:ml-1.5 group-[.side-menu--collapsed]:xl:ml-8"
+          <a class="relative flex items-center pr-9 transition-[margin] duration-100 xl:ml-1.5 group-[.side-menu--collapsed]:group-hover:xl:ml-1.5 group-[.side-menu--collapsed]:xl:ml-8"
             href="">
-            <img class="size-12" :src="logo" />
+            <span class="inline-flex shrink-0 items-center rounded-md bg-white px-2 py-1">
+              <img class="h-auto max-h-5 w-auto max-w-18 object-contain object-left" :src="logo" alt="" />
+            </span>
             <div
               class="dark:text-foreground text-background ml-3.5 text-nowrap transition-opacity group-[.side-menu--collapsed]:group-hover:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0">
               <span class="text-base font-medium">{{ appName }} {{ appVersion }}</span>
             </div>
           </a>
           <button type="button" @click="toggleCompactMenu" aria-label="Toggle compact menu"
-            class="toggle-compact-menu text-background dark:text-foreground border-background/20 bg-background/10 dark:bg-foreground/2 dark:border-foreground/11 relative ml-auto hidden items-center justify-center rounded-md border py-0.5 pl-0.5 pr-1 opacity-70 transition-[opacity,transform] hover:opacity-100 group-[.side-menu--collapsed]:xl:rotate-180 group-[.side-menu--collapsed]:group-hover:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0 2xl:flex">
+            class="toggle-compact-menu text-background dark:text-foreground border-background/20 bg-background/10 dark:bg-foreground/2 dark:border-foreground/11 absolute right-14 top-1/2 z-10 hidden -translate-y-1/2 items-center justify-center rounded-md border py-0.5 pl-0.5 pr-1 opacity-70 transition-[opacity,transform] hover:opacity-100 group-[.side-menu--collapsed]:xl:rotate-180 group-[.side-menu--collapsed]:group-hover:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0 2xl:flex">
             <Lucide icon="ChevronLeft" />
           </button>
         </div>

fe/src/themes/Layout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useThemeStore, getTheme, themes, type Themes } from '@/stores/theme'
-import { ThemeSwitcher } from '@/components/theme-switcher'
 import { Lucide, type Icon as LucideIcon } from '@/components/ui/lucide'
 import { useRoute, useRouter } from 'vue-router'
 import { onMounted, computed } from 'vue'
@@ -56,19 +55,19 @@ const sideTabs: SideTab[] = [
     icon: 'ci:facebook',
     offsetRem: 7,
     onClick: () => {
-      window.open('https://www.facebook.com/p/Rejimen-Askar-Jurutera-DiRaja-100086287161777/', '_blank')
-    },
-  },
-  {
-    id: 'feedback-page',
-    label: 'Helpdesk',
-    iconType: 'lucide',
-    icon: 'MessageCircle',
-    offsetRem: 10.5,
-    onClick: () => {
-      window.open('https://docs.google.com/forms/d/e/1FAIpQLSd_0p-kKmsHq9z4fZ3e6X13V6O64s1-CpJw4_vR768Gg0_sA/viewform?usp=header', '_blank')
+      window.open('https://www.facebook.com/KoperasiPermodalanKelantanBerhad/', '_blank')
     },
   },
+  // {
+  //   id: 'feedback-page',
+  //   label: 'Helpdesk',
+  //   iconType: 'lucide',
+  //   icon: 'MessageCircle',
+  //   offsetRem: 10.5,
+  //   onClick: () => {
+  //     window.open('https://docs.google.com/forms/d/e/1FAIpQLSd_0p-kKmsHq9z4fZ3e6X13V6O64s1-CpJw4_vR768Gg0_sA/viewform?usp=header', '_blank')
+  //   },
+  // },
 ]
 
 onMounted(() => {
@@ -81,8 +80,6 @@ onMounted(() => {
 
 <template>
   <div>
-    <ThemeSwitcher />
-
     <button v-for="tab in sideTabs" :key="tab.id" type="button" :aria-label="tab.label" :style="{
       top: `calc(50% + ${tab.offsetRem}rem)`,
       ['--color' as any]: 'var(--color-primary)',