Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.
This commit is contained in:
Haqeem Solehan
327
components/layouts/Header.vue
Normal file
327
components/layouts/Header.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<script setup>
|
||||
const isVertical = ref(true);
|
||||
const isDesktop = ref(true);
|
||||
|
||||
const emit = defineEmits(["toggleMenu"]);
|
||||
|
||||
// Use site settings composable
|
||||
const { siteSettings, setTheme, getCurrentTheme } = useSiteSettings();
|
||||
|
||||
// const { locale } = useI18n();
|
||||
// const colorMode = useColorMode();
|
||||
const langList = languageList();
|
||||
|
||||
const locale = ref("en");
|
||||
|
||||
const themes = themeList();
|
||||
const themes2 = themeList2();
|
||||
|
||||
function setThemeLocal(theme) {
|
||||
setTheme(theme); // Use the site settings setTheme function
|
||||
}
|
||||
|
||||
function rgbToHex(rgbString) {
|
||||
// Split the input string into an array of components
|
||||
const rgbArray = rgbString.split(",");
|
||||
|
||||
// Convert each component to its numeric value
|
||||
const r = parseInt(rgbArray[0].trim(), 10);
|
||||
const g = parseInt(rgbArray[1].trim(), 10);
|
||||
const b = parseInt(rgbArray[2].trim(), 10);
|
||||
|
||||
// Convert the numeric RGB values to hexadecimal
|
||||
const rHex = r.toString(16).padStart(2, "0");
|
||||
const gHex = g.toString(16).padStart(2, "0");
|
||||
const bHex = b.toString(16).padStart(2, "0");
|
||||
|
||||
// Concatenate the components and return the final hexadecimal color code
|
||||
return `#${rHex}${gHex}${bHex}`;
|
||||
}
|
||||
|
||||
// Toggle Open/Close menu
|
||||
const toggleMenu = (event) => {
|
||||
emit("toggleMenu", event);
|
||||
};
|
||||
|
||||
// Focus on search input
|
||||
function toggleSearch() {
|
||||
document.getElementById("header-search").value = "";
|
||||
document.getElementById("header-search").focus();
|
||||
}
|
||||
|
||||
// Change language
|
||||
const changeLanguage = (lang) => {
|
||||
locale.value = lang;
|
||||
};
|
||||
|
||||
const languageNow = computed(() => {
|
||||
return langList.find((lang) => lang.value == locale.value);
|
||||
});
|
||||
|
||||
// Get current theme icon
|
||||
const currentThemeIcon = computed(() => {
|
||||
const theme = getCurrentTheme();
|
||||
return theme === "dark" ? "ic:outline-dark-mode" : "ic:outline-light-mode";
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// If mobile toggleMenu
|
||||
if (window.innerWidth < 768) {
|
||||
emit("toggleMenu", true);
|
||||
}
|
||||
|
||||
// Load site settings on mount and ensure they're properly populated
|
||||
const { loadSiteSettings } = useSiteSettings();
|
||||
loadSiteSettings().then(() => {
|
||||
nextTick(() => {
|
||||
// console.log('[Header.vue] Site settings loaded. Name:', siteSettings.value?.siteName, 'ShowInHeader:', siteSettings.value?.showSiteNameInHeader, 'Logo:', siteSettings.value?.siteLogo);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add computed to ensure logo reactivity
|
||||
const currentLogo = computed(() => {
|
||||
const logoUrl = siteSettings.value?.siteLogo;
|
||||
if (logoUrl && logoUrl.trim() !== "") {
|
||||
return logoUrl; // Use logo from settings if available and not empty
|
||||
}
|
||||
return "/img/logo/corradAF-logo.svg"; // Ultimate fallback
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-header">
|
||||
<div class="flex items-stretch justify-between">
|
||||
<div v-if="isVertical" class="flex">
|
||||
<span class="flex items-center justify-center">
|
||||
<button class="icon-btn h-10 w-10 rounded-full" @click="toggleMenu">
|
||||
<Icon name="ic:round-menu" class="" />
|
||||
</button>
|
||||
</span>
|
||||
<!-- Site logo and name for vertical layout - only show if explicitly enabled -->
|
||||
<div
|
||||
v-if="siteSettings?.value?.showSiteNameInHeader"
|
||||
class="flex items-center ml-4"
|
||||
>
|
||||
<img
|
||||
:src="currentLogo"
|
||||
:alt="siteSettings?.value?.siteName || 'Site Logo'"
|
||||
class="h-8 block"
|
||||
@error="$event.target.src = '/img/logo/corradAF-logo.svg'"
|
||||
/>
|
||||
<span
|
||||
v-if="siteSettings?.value?.siteName"
|
||||
class="text-lg font-semibold"
|
||||
:class="{ 'ml-3': siteSettings?.value?.siteLogo }"
|
||||
:style="{
|
||||
fontSize: (siteSettings?.value?.siteNameFontSize || 18) + 'px',
|
||||
}"
|
||||
>
|
||||
{{ siteSettings?.value?.siteName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" v-else>
|
||||
<nuxt-link to="/">
|
||||
<div class="flex flex-auto gap-3 justify-center items-center">
|
||||
<img
|
||||
:src="currentLogo"
|
||||
:alt="siteSettings?.value?.siteName || 'Site Logo'"
|
||||
class="h-8 block"
|
||||
@error="$event.target.src = '/img/logo/corradAF-logo.svg'"
|
||||
/>
|
||||
<span
|
||||
v-if="
|
||||
siteSettings?.value?.siteName && siteSettings?.value?.showSiteNameInHeader
|
||||
"
|
||||
class="text-lg font-semibold"
|
||||
:style="{
|
||||
fontSize: (siteSettings?.value?.siteNameFontSize || 18) + 'px',
|
||||
}"
|
||||
>
|
||||
{{ siteSettings?.value?.siteName }}
|
||||
</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 item-center justify-items-end">
|
||||
<VoiceReader class="ml-4" />
|
||||
|
||||
<!-- New dropdown for themeList.js -->
|
||||
<VDropdown placement="bottom-end" distance="13" name="theme">
|
||||
<button class="icon-btn h-10 w-10 rounded-full">
|
||||
<Icon size="22px" name="ph:paint-brush-broad" />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ul class="header-dropdown w-full md:w-52">
|
||||
<li v-for="(val, index) in themes" :key="index">
|
||||
<a
|
||||
@click="setThemeLocal(val.theme)"
|
||||
class="flex justify-between items-center cursor-pointer py-2 px-4 hover:bg-[rgb(var(--bg-1))]"
|
||||
>
|
||||
<span class="capitalize"> {{ val.theme }} </span>
|
||||
<div class="flex items-center gap-x-1">
|
||||
<div
|
||||
v-for="(color, colorIndex) in val.colors"
|
||||
:key="colorIndex"
|
||||
class="h-[25px] w-[10px] rounded-lg"
|
||||
:style="{
|
||||
backgroundColor: rgbToHex(color.value),
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</VDropdown>
|
||||
|
||||
<!-- New dropdown for themeList2.js -->
|
||||
<VDropdown placement="bottom-end" distance="13" name="theme2">
|
||||
<button class="icon-btn h-10 w-10 rounded-full">
|
||||
<Icon size="22px" name="ph:wheelchair" />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ul class="header-dropdown w-full md:w-52">
|
||||
<li v-for="(val, index) in themes2" :key="index">
|
||||
<a
|
||||
@click="setThemeLocal(val.theme)"
|
||||
class="flex justify-between items-center cursor-pointer py-2 px-4 hover:bg-[rgb(var(--bg-1))]"
|
||||
>
|
||||
<span class="capitalize"> {{ val.theme }} </span>
|
||||
<div class="flex items-center gap-x-1">
|
||||
<div
|
||||
v-for="(color, colorIndex) in val.colors"
|
||||
:key="colorIndex"
|
||||
class="h-[25px] w-[10px] rounded-lg"
|
||||
:style="{
|
||||
backgroundColor: rgbToHex(color.value),
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</VDropdown>
|
||||
|
||||
<VDropdown placement="bottom-end" distance="13" name="notification">
|
||||
<button class="relative icon-btn h-10 w-10 rounded-full">
|
||||
<span class="w-3 h-3 absolute top-1 right-2 rounded-full bg-primary"></span>
|
||||
<Icon name="ic:round-notifications-none" class="" />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ul class="header-dropdown w-full md:w-80 text-[#4B5563]">
|
||||
<li class="d-head flex items-center justify-between py-2 px-4">
|
||||
<span class="font-semibold">Notification</span>
|
||||
<div
|
||||
class="flex items-center text-primary cursor-pointer hover:underline"
|
||||
>
|
||||
<a class="ml-2">View All</a>
|
||||
</div>
|
||||
</li>
|
||||
<NuxtScrollbar>
|
||||
<li>
|
||||
<div class="bg-[rgb(var(--bg-1))] py-2 px-4">Today</div>
|
||||
<a class="py-2 px-4 block">
|
||||
<div class="flex items-center">
|
||||
<Icon name="ic:outline-circle" class="text-primary flex-none" />
|
||||
<span class="mx-2"
|
||||
>Terdapat Satu Pembayaran yang berlaku menggunakan bil Kuih Raya
|
||||
Cik Kiah</span
|
||||
>
|
||||
<div class="w-12 h-12 rounded-full ml-auto flex-none">
|
||||
<img class="rounded-full" src="@/assets/img/user/default.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="py-2 px-4 block">
|
||||
<div class="flex items-center">
|
||||
<Icon name="ic:outline-circle" class="text-primary flex-none" />
|
||||
<span class="mx-2"
|
||||
>Terdapat Satu Pembayaran yang berlaku menggunakan bil
|
||||
Mercun</span
|
||||
>
|
||||
<div class="w-12 h-12 rounded-full ml-auto flex-none">
|
||||
<img
|
||||
class="rounded-full"
|
||||
src="@/assets/img/user/default.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</NuxtScrollbar>
|
||||
</ul>
|
||||
</template>
|
||||
</VDropdown>
|
||||
|
||||
<VDropdown
|
||||
placement="bottom-end"
|
||||
distance="13"
|
||||
name="profile"
|
||||
class="flex justify-center item-center"
|
||||
>
|
||||
<button class="icon-btn profile px-2">
|
||||
<img
|
||||
class="w-8 h-8 object-cover rounded-full"
|
||||
src="@/assets/img/user/default.svg"
|
||||
/>
|
||||
<div v-if="isDesktop" class="grid grid-cols-1 text-left ml-3 flex-none">
|
||||
<p class="font-semibold text-sm truncate w-24 mb-0">Johan</p>
|
||||
</div>
|
||||
<Icon name="ic:outline-keyboard-arrow-down" class="ml-3" />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ul class="header-dropdown w-full md:w-52">
|
||||
<li>
|
||||
<a
|
||||
href="/logout"
|
||||
class="flex items-center cursor-pointer py-2 px-4 hover:bg-[rgb(var(--bg-1))]"
|
||||
>
|
||||
<Icon name="ic:outline-logout" class="mr-2" />
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Nav for Layout Vertical -->
|
||||
<div tabindex="0" class="w-header-search">
|
||||
<Icon name="ic:outline-search" class="mr-3" />
|
||||
<FormKit
|
||||
id="header-search"
|
||||
:classes="{
|
||||
outer: 'mb-0 flex-1',
|
||||
}"
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.popper) {
|
||||
background: #e92791;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
:deep(.popper #arrow::before) {
|
||||
background: #e92791;
|
||||
}
|
||||
|
||||
:deep(.popper:hover),
|
||||
:deep(.popper:hover > #arrow::before) {
|
||||
background: #e92791;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user