dyzulk/app
1
0
Fork 0
mirror of https://github.com/twinpath/app.git synced 2026-01-26 13:21:59 +07:00
Code Issues Packages Projects Releases 1 Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Dyzulk Developer
2025-12-22 12:03:01 +07:00
commit 10dc345147
367 changed files with 31188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
resources/views/layouts/app-header.blade.php Normal file
View File

@@ -0,0 +1,123 @@
<header
class="sticky top-0 flex w-full bg-white border-gray-200 z-99999 dark:border-gray-800 dark:bg-gray-900 xl:border-b"
x-data="{
isApplicationMenuOpen: false,
toggleApplicationMenu() {
this.isApplicationMenuOpen = !this.isApplicationMenuOpen;
}
}">
<div class="flex flex-col items-center justify-between grow xl:flex-row xl:px-6">
<div
class="flex items-center justify-between w-full gap-2 px-3 py-3 border-b border-gray-200 dark:border-gray-800 sm:gap-4 xl:justify-normal xl:border-b-0 xl:px-0 lg:py-4">
<!-- Desktop Sidebar Toggle Button (visible on xl and up) -->
<button
class="hidden xl:flex items-center justify-center w-10 h-10 text-gray-500 border border-gray-200 rounded-lg dark:border-gray-800 dark:text-gray-400 lg:h-11 lg:w-11"
:class="{ 'bg-gray-100 dark:bg-white/[0.03]': !$store.sidebar.isExpanded }"
@click="$store.sidebar.toggleExpanded()" aria-label="Toggle Sidebar">
<svg x-show="!$store.sidebar.isMobileOpen" width="16" height="12" viewBox="0 0 16 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.583252 1C0.583252 0.585788 0.919038 0.25 1.33325 0.25H14.6666C15.0808 0.25 15.4166 0.585786 15.4166 1C15.4166 1.41421 15.0808 1.75 14.6666 1.75L1.33325 1.75C0.919038 1.75 0.583252 1.41422 0.583252 1ZM0.583252 11C0.583252 10.5858 0.919038 10.25 1.33325 10.25L14.6666 10.25C15.0808 10.25 15.4166 10.5858 15.4166 11C15.4166 11.4142 15.0808 11.75 14.6666 11.75L1.33325 11.75C0.919038 11.75 0.583252 11.4142 0.583252 11ZM1.33325 5.25C0.919038 5.25 0.583252 5.58579 0.583252 6C0.583252 6.41421 0.919038 6.75 1.33325 6.75L7.99992 6.75C8.41413 6.75 8.74992 6.41421 8.74992 6C8.74992 5.58579 8.41413 5.25 7.99992 5.25L1.33325 5.25Z"
fill="currentColor"></path>
</svg>
<svg x-show="$store.sidebar.isMobileOpen" class="fill-current" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
fill="" />
</svg>
</button>
<!-- Mobile Menu Toggle Button (visible below xl) -->
<button
class="flex xl:hidden items-center justify-center w-10 h-10 text-gray-500 rounded-lg dark:text-gray-400 lg:h-11 lg:w-11"
:class="{ 'bg-gray-100 dark:bg-white/[0.03]': $store.sidebar.isMobileOpen }"
@click="$store.sidebar.toggleMobileOpen()" aria-label="Toggle Mobile Menu">
<svg x-show="!$store.sidebar.isMobileOpen" width="16" height="12" viewBox="0 0 16 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.583252 1C0.583252 0.585788 0.919038 0.25 1.33325 0.25H14.6666C15.0808 0.25 15.4166 0.585786 15.4166 1C15.4166 1.41421 15.0808 1.75 14.6666 1.75L1.33325 1.75C0.919038 1.75 0.583252 1.41422 0.583252 1ZM0.583252 11C0.583252 10.5858 0.919038 10.25 1.33325 10.25L14.6666 10.25C15.0808 10.25 15.4166 10.5858 15.4166 11C15.4166 11.4142 15.0808 11.75 14.6666 11.75L1.33325 11.75C0.919038 11.75 0.583252 11.4142 0.583252 11ZM1.33325 5.25C0.919038 5.25 0.583252 5.58579 0.583252 6C0.583252 6.41421 0.919038 6.75 1.33325 6.75L7.99992 6.75C8.41413 6.75 8.74992 6.41421 8.74992 6C8.74992 5.58579 8.41413 5.25 7.99992 5.25L1.33325 5.25Z"
fill="currentColor"></path>
</svg>
<svg x-show="$store.sidebar.isMobileOpen" class="fill-current" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
fill="" />
</svg>
</button>
<!-- Logo (mobile only) -->
<a href="{{ route('home') }}" class="xl:hidden">
<img class="dark:hidden" src="/images/logo/logo.svg" alt="Logo" />
<img class="hidden dark:block" src="/images/logo/logo-dark.svg" alt="Logo" />
</a>
<!-- Application Menu Toggle (mobile only) -->
<button @click="toggleApplicationMenu()"
class="flex items-center justify-center w-10 h-10 text-gray-700 rounded-lg z-99999 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 xl:hidden">
<!-- Dots Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.99902 10.4951C6.82745 10.4951 7.49902 11.1667 7.49902 11.9951V12.0051C7.49902 12.8335 6.82745 13.5051 5.99902 13.5051C5.1706 13.5051 4.49902 12.8335 4.49902 12.0051V11.9951C4.49902 11.1667 5.1706 10.4951 5.99902 10.4951ZM17.999 10.4951C18.8275 10.4951 19.499 11.1667 19.499 11.9951V12.0051C19.499 12.8335 18.8275 13.5051 17.999 13.5051C17.1706 13.5051 16.499 12.8335 16.499 12.0051V11.9951C16.499 11.1667 17.1706 10.4951 17.999 10.4951ZM13.499 11.9951C13.499 11.1667 12.8275 10.4951 11.999 10.4951C11.1706 10.4951 10.499 11.1667 10.499 11.9951V12.0051C10.499 12.8335 11.1706 13.5051 11.999 13.5051C12.8275 13.5051 13.499 12.8335 13.499 12.0051V11.9951Z"
fill="currentColor" />
</svg>
</button>
<!-- Search Bar (desktop only) -->
<div class="hidden xl:block">
<form>
<div class="relative">
<span class="absolute -translate-y-1/2 pointer-events-none left-4 top-1/2">
<!-- Search Icon -->
<svg class="fill-gray-500 dark:fill-gray-400" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.04175 9.37363C3.04175 5.87693 5.87711 3.04199 9.37508 3.04199C12.8731 3.04199 15.7084 5.87693 15.7084 9.37363C15.7084 12.8703 12.8731 15.7053 9.37508 15.7053C5.87711 15.7053 3.04175 12.8703 3.04175 9.37363ZM9.37508 1.54199C5.04902 1.54199 1.54175 5.04817 1.54175 9.37363C1.54175 13.6991 5.04902 17.2053 9.37508 17.2053C11.2674 17.2053 13.003 16.5344 14.357 15.4176L17.177 18.238C17.4699 18.5309 17.9448 18.5309 18.2377 18.238C18.5306 17.9451 18.5306 17.4703 18.2377 17.1774L15.418 14.3573C16.5365 13.0033 17.2084 11.2669 17.2084 9.37363C17.2084 5.04817 13.7011 1.54199 9.37508 1.54199Z"
fill="" />
</svg>
</span>
<input type="text" placeholder="Search or type command..."
class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-200 bg-transparent py-2.5 pl-12 pr-14 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:bg-white/3 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800 xl:w-[430px]" />
<button
class="absolute right-2.5 top-1/2 inline-flex -translate-y-1/2 items-center gap-0.5 rounded-lg border border-gray-200 bg-gray-50 px-[7px] py-[4.5px] text-xs -tracking-[0.2px] text-gray-500 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400">
<span> ⌘ </span>
<span> K </span>
</button>
</div>
</form>
</div>
</div>
<!-- Application Menu (mobile) and Right Side Actions (desktop) -->
<div :class="isApplicationMenuOpen ? 'flex' : 'hidden'"
class="items-center justify-between w-full gap-4 px-5 py-4 xl:flex shadow-theme-md xl:justify-end xl:px-0 xl:shadow-none">
<div class="flex items-center gap-2 2xsm:gap-3">
<!-- Theme Toggle Button -->
<button
class="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full hover:text-dark-900 h-11 w-11 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
@click="$store.theme.toggle()">
<svg class="hidden dark:block" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z"
fill="currentColor" />
</svg>
<svg class="dark:hidden" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z"
fill="currentColor" />
</svg>
</button>
<!-- Notification Dropdown -->
<x-header.notification-dropdown />
</div>
<!-- User Dropdown -->
<x-header.user-dropdown />
</div>
</div>
</header>

144
resources/views/layouts/app.blade.php Normal file
View File

@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title ?? 'Dashboard' }} | {{ config('app.name') }}</title>
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Alpine.js -->
{{-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> --}}
<!-- Theme Store -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('theme', {
init() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
'light';
this.theme = savedTheme || systemTheme;
this.updateTheme();
},
theme: 'light',
toggle() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', this.theme);
this.updateTheme();
},
updateTheme() {
const html = document.documentElement;
const body = document.body;
if (this.theme === 'dark') {
html.classList.add('dark');
body.classList.add('dark', 'bg-gray-900');
} else {
html.classList.remove('dark');
body.classList.remove('dark', 'bg-gray-900');
}
}
});
Alpine.store('sidebar', {
// Initialize based on screen size
isExpanded: window.innerWidth >= 1280, // true for desktop, false for mobile
isMobileOpen: false,
isHovered: false,
toggleExpanded() {
this.isExpanded = !this.isExpanded;
// When toggling desktop sidebar, ensure mobile menu is closed
this.isMobileOpen = false;
},
toggleMobileOpen() {
this.isMobileOpen = !this.isMobileOpen;
// Don't modify isExpanded when toggling mobile menu
},
setMobileOpen(val) {
this.isMobileOpen = val;
},
setHovered(val) {
// Only allow hover effects on desktop when sidebar is collapsed
if (window.innerWidth >= 1280 && !this.isExpanded) {
this.isHovered = val;
}
}
});
});
</script>
<!-- Apply dark mode immediately to prevent flash -->
<script>
(function() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = savedTheme || systemTheme;
if (theme === 'dark') {
document.documentElement.classList.add('dark');
document.body.classList.add('dark', 'bg-gray-900');
} else {
document.documentElement.classList.remove('dark');
document.body.classList.remove('dark', 'bg-gray-900');
}
})();
</script>
<!-- Cropper.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
</head>
<body
x-data="{ 'loaded': true}"
x-init="$store.sidebar.isExpanded = window.innerWidth >= 1280;
const checkMobile = () => {
if (window.innerWidth < 1280) {
$store.sidebar.setMobileOpen(false);
$store.sidebar.isExpanded = false;
} else {
$store.sidebar.isMobileOpen = false;
$store.sidebar.isExpanded = true;
}
};
window.addEventListener('resize', checkMobile);">
{{-- Flash Message Component --}}
<x-ui.flash-message />
{{-- preloader --}}
<x-common.preloader/>
{{-- preloader end --}}
<div class="min-h-screen xl:flex">
@include('layouts.backdrop')
@include('layouts.sidebar')
<div class="flex-1 transition-all duration-300 ease-in-out"
:class="{
'xl:ml-[290px]': $store.sidebar.isExpanded || $store.sidebar.isHovered,
'xl:ml-[90px]': !$store.sidebar.isExpanded && !$store.sidebar.isHovered,
'ml-0': $store.sidebar.isMobileOpen
}">
<!-- app header start -->
@include('layouts.app-header')
<!-- app header end -->
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
@yield('content')
</div>
</div>
</div>
</body>
@stack('scripts')
</html>

12
resources/views/layouts/backdrop.blade.php Normal file
View File

@@ -0,0 +1,12 @@
{{-- <div
x-show="$store.sidebar.isMobileOpen"
@click="$store.sidebar.toggleMobileOpen()"
class="fixed inset-0 bg-gray-900/50 z-[9999] xl:hidden"
>
sidebarToggle ? 'block xl:hidden' : 'hidden'
</div> --}}
<div
:class="$store.sidebar.isMobileOpen ? 'block xl:hidden' : 'hidden'"
class="fixed z-50 h-screen w-full bg-gray-900/50"
></div>

120
resources/views/layouts/fullscreen-layout.blade.php Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title ?? 'Dashboard' }} | {{ config('app.name') }}</title>
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Alpine.js -->
{{-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> --}}
<!-- Theme Store -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('theme', {
init() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
'light';
this.theme = savedTheme || systemTheme;
this.updateTheme();
},
theme: 'light',
toggle() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', this.theme);
this.updateTheme();
},
updateTheme() {
const html = document.documentElement;
const body = document.body;
if (this.theme === 'dark') {
html.classList.add('dark');
body.classList.add('dark', 'bg-gray-900');
} else {
html.classList.remove('dark');
body.classList.remove('dark', 'bg-gray-900');
}
}
});
Alpine.store('sidebar', {
// Initialize based on screen size
isExpanded: window.innerWidth >= 1280, // true for desktop, false for mobile
isMobileOpen: false,
isHovered: false,
toggleExpanded() {
this.isExpanded = !this.isExpanded;
// When toggling desktop sidebar, ensure mobile menu is closed
this.isMobileOpen = false;
},
toggleMobileOpen() {
this.isMobileOpen = !this.isMobileOpen;
// Don't modify isExpanded when toggling mobile menu
},
setMobileOpen(val) {
this.isMobileOpen = val;
},
setHovered(val) {
// Only allow hover effects on desktop when sidebar is collapsed
if (window.innerWidth >= 1280 && !this.isExpanded) {
this.isHovered = val;
}
}
});
});
</script>
<!-- Apply dark mode immediately to prevent flash -->
<script>
(function() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = savedTheme || systemTheme;
if (theme === 'dark') {
document.documentElement.classList.add('dark');
document.body.classList.add('dark', 'bg-gray-900');
} else {
document.documentElement.classList.remove('dark');
document.body.classList.remove('dark', 'bg-gray-900');
}
})();
</script>
</head>
<body x-data="{ 'loaded': true}" x-init="$store.sidebar.isExpanded = window.innerWidth >= 1280;
const checkMobile = () => {
if (window.innerWidth < 1280) {
$store.sidebar.setMobileOpen(false);
$store.sidebar.isExpanded = false;
} else {
$store.sidebar.isMobileOpen = false;
$store.sidebar.isExpanded = true;
}
};
window.addEventListener('resize', checkMobile);">
{{-- Flash Message Component --}}
<x-ui.flash-message />
{{-- preloader --}}
<x-common.preloader/>
{{-- preloader end --}}
@yield('content')
</body>
@stack('scripts')
</html>

12
resources/views/layouts/sidebar-widget.blade.php Normal file
View File

@@ -0,0 +1,12 @@
<div class="mx-auto mb-10 w-full max-w-60 rounded-2xl bg-gray-50 px-4 py-5 text-center dark:bg-white/[0.03]">
<h3 class="mb-2 font-semibold text-gray-900 dark:text-white">
#1 Tailwind CSS Dashboard
</h3>
<p class="mb-4 text-gray-500 text-theme-sm dark:text-gray-400">
Leading Tailwind CSS Admin Template with 500+ UI Component and Pages.
</p>
<a href="https://tailadmin.com/pricing" target="_blank" rel="nofollow"
class="flex items-center justify-center p-3 font-medium text-white rounded-lg bg-brand-500 text-theme-sm hover:bg-brand-600">
Purchase Plan
</a>
</div>

217
resources/views/layouts/sidebar.blade.php Normal file
View File

@@ -0,0 +1,217 @@
@php
use App\Helpers\MenuHelper;
$menuGroups = MenuHelper::getMenuGroups();
// Get current path
$currentPath = request()->path();
@endphp
<aside id="sidebar"
class="fixed flex flex-col mt-0 top-0 px-5 left-0 bg-white dark:bg-gray-900 dark:border-gray-800 text-gray-900 h-screen transition-all duration-300 ease-in-out z-99999 border-r border-gray-200"
x-data="{
openSubmenus: {},
init() {
// Auto-open Dashboard menu on page load
this.initializeActiveMenus();
},
initializeActiveMenus() {
@foreach ($menuGroups as $groupIndex => $menuGroup)
@foreach ($menuGroup['items'] as $itemIndex => $item)
@if (isset($item['subItems']) && MenuHelper::isActive($item))
this.openSubmenus['{{ $groupIndex }}-{{ $itemIndex }}'] = true;
@endif
@endforeach
@endforeach
},
toggleSubmenu(groupIndex, itemIndex) {
const key = groupIndex + '-' + itemIndex;
const newState = !this.openSubmenus[key];
// Close all other submenus when opening a new one
if (newState) {
this.openSubmenus = {};
}
this.openSubmenus[key] = newState;
},
isSubmenuOpen(groupIndex, itemIndex) {
const key = groupIndex + '-' + itemIndex;
return this.openSubmenus[key] || false;
},
isActive(itemName) {
// This is still needed for Alpine, but we can also use PHP to set active classes
return false;
}
}"
:class="{
'w-[290px]': $store.sidebar.isExpanded || $store.sidebar.isMobileOpen || $store.sidebar.isHovered,
'w-[90px]': !$store.sidebar.isExpanded && !$store.sidebar.isHovered,
'translate-x-0': $store.sidebar.isMobileOpen,
'-translate-x-full xl:translate-x-0': !$store.sidebar.isMobileOpen
}"
@mouseenter="if (!$store.sidebar.isExpanded) $store.sidebar.setHovered(true)"
@mouseleave="$store.sidebar.setHovered(false)">
<!-- Logo Section -->
<div class="pt-8 pb-7 flex"
:class="(!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen) ?
'xl:justify-center' :
'justify-start'">
<a href="/">
<img x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
class="dark:hidden" src="/images/logo/logo.svg" alt="Logo" width="150" height="40" />
<img x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
class="hidden dark:block" src="/images/logo/logo-dark.svg" alt="Logo" width="150"
height="40" />
<img x-show="!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen"
src="/images/logo/logo-icon.svg" alt="Logo" width="32" height="32" />
</a>
</div>
<!-- Navigation Menu -->
<div class="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar">
<nav class="mb-6">
<div class="flex flex-col gap-4">
@foreach ($menuGroups as $groupIndex => $menuGroup)
<div>
<!-- Menu Group Title -->
<h2 class="mb-4 text-xs uppercase flex leading-[20px] text-gray-400"
:class="(!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen) ?
'lg:justify-center' : 'justify-start'">
<template
x-if="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen">
<span>{{ $menuGroup['title'] }}</span>
</template>
<template x-if="!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z" fill="currentColor"/>
</svg>
</template>
</h2>
<!-- Menu Items -->
<ul class="flex flex-col gap-1">
@foreach ($menuGroup['items'] as $itemIndex => $item)
<li>
@if (isset($item['subItems']))
<!-- Menu Item with Submenu -->
<button @click="toggleSubmenu({{ $groupIndex }}, {{ $itemIndex }})"
class="menu-item group w-full"
:class="[
isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) ?
'menu-item-active' : 'menu-item-inactive',
!$store.sidebar.isExpanded && !$store.sidebar.isHovered ?
'xl:justify-center' : 'xl:justify-start'
]">
<!-- Icon -->
<span :class="isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) ?
'menu-item-icon-active' : 'menu-item-icon-inactive'">
{!! MenuHelper::getIconSvg($item['icon']) !!}
</span>
<!-- Text -->
<span
x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
class="menu-item-text flex items-center gap-2">
{{ $item['name'] }}
@if (!empty($item['new']))
<span class="absolute right-10"
:class="{{ MenuHelper::isActive($item) ? 'true' : 'false' }} ?
'menu-dropdown-badge menu-dropdown-badge-active' :
'menu-dropdown-badge menu-dropdown-badge-inactive'">
new
</span>
@endif
</span>
<!-- Chevron Down Icon -->
<svg x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
class="ml-auto w-5 h-5 transition-transform duration-200"
:class="{
'rotate-180 text-brand-500': isSubmenuOpen({{ $groupIndex }},
{{ $itemIndex }})
}"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<!-- Submenu -->
<div x-show="isSubmenuOpen({{ $groupIndex }}, {{ $itemIndex }}) && ($store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen)">
<ul class="mt-2 space-y-1 ml-9">
@foreach ($item['subItems'] as $subItem)
<li>
<a href="{{ isset($subItem['route_name']) ? route($subItem['route_name']) : '#' }}"
class="menu-dropdown-item {{ MenuHelper::isActive($subItem) ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
{{ $subItem['name'] }}
<span class="flex items-center gap-1 ml-auto">
@if (!empty($subItem['new']))
<span
:class="{{ MenuHelper::isActive($subItem) ? 'true' : 'false' }} ?
'menu-dropdown-badge menu-dropdown-badge-active' :
'menu-dropdown-badge menu-dropdown-badge-inactive'">
new
</span>
@endif
@if (!empty($subItem['pro']))
<span
:class="{{ MenuHelper::isActive($subItem) ? 'true' : 'false' }} ?
'menu-dropdown-badge-pro menu-dropdown-badge-pro-active' :
'menu-dropdown-badge-pro menu-dropdown-badge-pro-inactive'">
pro
</span>
@endif
</span>
</a>
</li>
@endforeach
</ul>
</div>
@else
<!-- Simple Menu Item -->
<a href="{{ isset($item['route_name']) ? route($item['route_name']) : '#' }}"
class="menu-item group {{ MenuHelper::isActive($item) ? 'menu-item-active' : 'menu-item-inactive' }}"
:class="(!$store.sidebar.isExpanded && !$store.sidebar.isHovered && !$store.sidebar.isMobileOpen) ? 'xl:justify-center' : 'justify-start'">
<!-- Icon -->
<span
:class="{{ MenuHelper::isActive($item) ? 'true' : 'false' }} ? 'menu-item-icon-active' :
'menu-item-icon-inactive'">
{!! MenuHelper::getIconSvg($item['icon']) !!}
</span>
<!-- Text -->
<span
x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen"
class="menu-item-text flex items-center gap-2">
{{ $item['name'] }}
@if (!empty($item['new']))
<span
class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-brand-500 text-white">
new
</span>
@endif
</span>
</a>
@endif
</li>
@endforeach
</ul>
</div>
@endforeach
</div>
</nav>
<!-- Sidebar Widget -->
<!-- <div x-data x-show="$store.sidebar.isExpanded || $store.sidebar.isHovered || $store.sidebar.isMobileOpen" x-transition class="mt-auto">
@include('layouts.sidebar-widget')
</div> -->
</div>
</aside>
<!-- Mobile Overlay -->
<div x-show="$store.sidebar.isMobileOpen" @click="$store.sidebar.setMobileOpen(false)"
class="fixed z-50 h-screen w-full bg-gray-900/50"></div>