355 lines
11 KiB
Vue
355 lines
11 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
import { Head, Link, router, usePage } from "@inertiajs/vue3";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faUserGroup,
|
|
faShieldHalved,
|
|
faArrowLeft,
|
|
faFileWord,
|
|
faBars,
|
|
faGears,
|
|
faKey,
|
|
faEnvelope,
|
|
faEnvelopeOpenText,
|
|
faAt,
|
|
faInbox,
|
|
faFileLines,
|
|
faMessage,
|
|
faAddressBook,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
import DropdownLink from "@/Components/DropdownLink.vue";
|
|
import GlobalSearch from "@/Layouts/Partials/GlobalSearch.vue";
|
|
import NotificationsBell from "@/Layouts/Partials/NotificationsBell.vue";
|
|
import ApplicationMark from "@/Components/ApplicationMark.vue";
|
|
|
|
const props = defineProps({ title: { type: String, default: "Administrator" } });
|
|
|
|
// Basic state reused (simplified vs AppLayout)
|
|
const sidebarCollapsed = ref(false);
|
|
const isMobile = ref(false);
|
|
const mobileSidebarOpen = ref(false);
|
|
function handleResize() {
|
|
if (typeof window === "undefined") return;
|
|
isMobile.value = window.innerWidth < 1024;
|
|
if (!isMobile.value) mobileSidebarOpen.value = false;
|
|
sidebarCollapsed.value = isMobile.value; // auto collapse on small
|
|
}
|
|
onMounted(() => {
|
|
handleResize();
|
|
window.addEventListener("resize", handleResize);
|
|
});
|
|
onUnmounted(() => window.removeEventListener("resize", handleResize));
|
|
|
|
function toggleSidebar() {
|
|
if (isMobile.value) mobileSidebarOpen.value = !mobileSidebarOpen.value;
|
|
else sidebarCollapsed.value = !sidebarCollapsed.value;
|
|
}
|
|
|
|
const logout = () => router.post(route("logout"));
|
|
const page = usePage();
|
|
|
|
// Categorized admin navigation groups with distinct icons
|
|
const navGroups = computed(() => [
|
|
{
|
|
key: "core",
|
|
label: "Jedro",
|
|
items: [
|
|
{
|
|
key: "admin.dashboard",
|
|
label: "Pregled",
|
|
route: "admin.index",
|
|
icon: faShieldHalved,
|
|
active: ["admin.index"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "users",
|
|
label: "Uporabniki & Dovoljenja",
|
|
items: [
|
|
{
|
|
key: "admin.users",
|
|
label: "Uporabniki",
|
|
route: "admin.users.index",
|
|
icon: faUserGroup,
|
|
active: ["admin.users.index"],
|
|
},
|
|
{
|
|
key: "admin.permissions.index",
|
|
label: "Dovoljenja",
|
|
route: "admin.permissions.index",
|
|
icon: faKey,
|
|
active: ["admin.permissions.index", "admin.permissions.create"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "documents",
|
|
label: "Dokumenti",
|
|
items: [
|
|
{
|
|
key: "admin.document-settings.index",
|
|
label: "Nastavitve dokumentov",
|
|
route: "admin.document-settings.index",
|
|
icon: faGears,
|
|
active: ["admin.document-settings.index"],
|
|
},
|
|
{
|
|
key: "admin.document-templates.index",
|
|
label: "Predloge dokumentov",
|
|
route: "admin.document-templates.index",
|
|
icon: faFileWord,
|
|
active: ["admin.document-templates.index"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "email",
|
|
label: "Email",
|
|
items: [
|
|
{
|
|
key: "admin.email-templates.index",
|
|
label: "Email predloge",
|
|
route: "admin.email-templates.index",
|
|
icon: faEnvelopeOpenText,
|
|
active: [
|
|
"admin.email-templates.index",
|
|
"admin.email-templates.create",
|
|
"admin.email-templates.edit",
|
|
],
|
|
},
|
|
{
|
|
key: "admin.email-logs.index",
|
|
label: "Email dnevniki",
|
|
route: "admin.email-logs.index",
|
|
icon: faInbox,
|
|
active: ["admin.email-logs.index", "admin.email-logs.show"],
|
|
},
|
|
{
|
|
key: "admin.mail-profiles.index",
|
|
label: "Mail profili",
|
|
route: "admin.mail-profiles.index",
|
|
icon: faAt,
|
|
active: ["admin.mail-profiles.index"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "sms",
|
|
label: "SMS",
|
|
items: [
|
|
{
|
|
key: "admin.sms-templates.index",
|
|
label: "SMS predloge",
|
|
route: "admin.sms-templates.index",
|
|
icon: faFileLines,
|
|
active: [
|
|
"admin.sms-templates.index",
|
|
"admin.sms-templates.create",
|
|
"admin.sms-templates.edit",
|
|
],
|
|
},
|
|
{
|
|
key: "admin.sms-logs.index",
|
|
label: "SMS dnevniki",
|
|
route: "admin.sms-logs.index",
|
|
icon: faInbox,
|
|
active: ["admin.sms-logs.index", "admin.sms-logs.show"],
|
|
},
|
|
{
|
|
key: "admin.sms-senders.index",
|
|
label: "SMS pošiljatelji",
|
|
route: "admin.sms-senders.index",
|
|
icon: faAddressBook,
|
|
active: ["admin.sms-senders.index"],
|
|
},
|
|
{
|
|
key: "admin.sms-profiles.index",
|
|
label: "SMS profili",
|
|
route: "admin.sms-profiles.index",
|
|
icon: faGears,
|
|
active: ["admin.sms-profiles.index"],
|
|
},
|
|
{
|
|
key: "admin.packages.index",
|
|
label: "SMS paketi",
|
|
route: "admin.packages.index",
|
|
icon: faMessage,
|
|
active: ["admin.packages.index", "admin.packages.show"],
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
function isActive(patterns) {
|
|
try {
|
|
return patterns.some((p) => route().current(p));
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex bg-gray-100">
|
|
<Head :title="title" />
|
|
<!-- Backdrop for mobile sidebar -->
|
|
<div
|
|
v-if="isMobile && mobileSidebarOpen"
|
|
class="fixed inset-0 z-40 bg-black/30"
|
|
@click="mobileSidebarOpen = false"
|
|
/>
|
|
|
|
<aside
|
|
:class="[
|
|
sidebarCollapsed ? 'w-16' : 'w-60',
|
|
'bg-white border-r border-gray-200 transition-all duration-200 z-50',
|
|
isMobile
|
|
? 'fixed inset-y-0 left-0 transform ' +
|
|
(mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full')
|
|
: 'sticky top-0 h-screen',
|
|
]"
|
|
>
|
|
<div class="h-16 px-4 flex items-center justify-between border-b">
|
|
<Link :href="route('dashboard')" class="flex items-center gap-2">
|
|
<ApplicationMark class="h-8 w-auto" />
|
|
<span v-if="!sidebarCollapsed" class="text-sm font-semibold">Admin</span>
|
|
</Link>
|
|
</div>
|
|
<nav class="py-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200">
|
|
<div v-for="group in navGroups" :key="group.key" class="mt-2 first:mt-0">
|
|
<p
|
|
v-if="!sidebarCollapsed"
|
|
class="px-4 mb-1 mt-4 first:mt-0 text-[10px] font-semibold uppercase tracking-wider text-gray-400"
|
|
>
|
|
{{ group.label }}
|
|
</p>
|
|
<ul class="space-y-1">
|
|
<li v-for="item in group.items" :key="item.key">
|
|
<Link
|
|
:href="route(item.route)"
|
|
:title="item.label"
|
|
:class="[
|
|
'flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100',
|
|
isActive(item.active) ? 'bg-gray-100 text-gray-900' : 'text-gray-600',
|
|
]"
|
|
>
|
|
<FontAwesomeIcon :icon="item.icon" class="w-5 h-5 text-gray-600" />
|
|
<span v-if="!sidebarCollapsed">{{ item.label }}</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-6 border-t pt-4 space-y-2 px-4">
|
|
<Link
|
|
:href="route('dashboard')"
|
|
class="text-xs text-gray-500 hover:underline flex items-center gap-1"
|
|
>
|
|
<FontAwesomeIcon :icon="faArrowLeft" class="w-3.5 h-3.5" />
|
|
<span v-if="!sidebarCollapsed">Nazaj na aplikacijo</span>
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col min-w-0">
|
|
<div
|
|
class="h-16 bg-white border-b border-gray-100 px-4 flex items-center justify-between sticky top-0 z-30"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
@click="toggleSidebar"
|
|
class="inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
|
|
aria-label="Toggle sidebar"
|
|
>
|
|
<!-- Replaced raw SVG with FontAwesome icon -->
|
|
<FontAwesomeIcon :icon="faBars" class="w-5 h-5" />
|
|
</button>
|
|
<h1 class="text-base font-semibold text-gray-800 hidden sm:block">
|
|
{{ title }}
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<NotificationsBell class="mr-2" />
|
|
<!-- User dropdown replicated from AppLayout style -->
|
|
<div class="ms-3 relative">
|
|
<Dropdown align="right" width="48">
|
|
<template #trigger>
|
|
<button
|
|
v-if="$page.props.jetstream?.managesProfilePhotos"
|
|
class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"
|
|
>
|
|
<img
|
|
class="h-8 w-8 rounded-full object-cover"
|
|
:src="$page.props.auth.user.profile_photo_url"
|
|
:alt="$page.props.auth.user.name"
|
|
/>
|
|
</button>
|
|
|
|
<span v-else class="inline-flex rounded-md">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150"
|
|
>
|
|
{{ $page.props.auth.user.name }}
|
|
<svg
|
|
class="ms-2 -me-0.5 h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="block px-4 py-2 text-xs text-gray-400">Nastavitve računa</div>
|
|
<DropdownLink :href="route('profile.show')">Profil</DropdownLink>
|
|
<DropdownLink
|
|
v-if="$page.props.jetstream?.hasApiFeatures"
|
|
:href="route('api-tokens.index')"
|
|
>API Tokens</DropdownLink
|
|
>
|
|
<div class="border-t border-gray-200" />
|
|
<form @submit.prevent="logout">
|
|
<DropdownLink as="button">Izpis</DropdownLink>
|
|
</form>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="p-4">
|
|
<div
|
|
v-if="$page.props.flash?.success"
|
|
class="mb-4 rounded bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-2 text-sm"
|
|
>
|
|
{{ $page.props.flash.success }}
|
|
</div>
|
|
<div
|
|
v-if="$page.props.errors && Object.keys($page.props.errors).length"
|
|
class="mb-4 rounded bg-rose-50 border border-rose-200 text-rose-700 px-4 py-2 text-sm"
|
|
>
|
|
<ul class="list-disc ml-5 space-y-1">
|
|
<li v-for="(err, key) in $page.props.errors" :key="key">{{ err }}</li>
|
|
</ul>
|
|
</div>
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
|
|
<GlobalSearch :open="false" />
|
|
</div>
|
|
</template>
|