Initial commit - CMS Gov Bapenda Garut dengan EditorJS
This commit is contained in:
111
app/Views/admin/partials/navbar.php
Normal file
111
app/Views/admin/partials/navbar.php
Normal file
@@ -0,0 +1,111 @@
|
||||
<header
|
||||
x-data="{menuToggle: false}"
|
||||
class="sticky top-0 z-99999 flex w-full border-gray-200 bg-white lg:border-b dark:border-gray-800 dark:bg-gray-900"
|
||||
>
|
||||
<div class="flex grow flex-col items-center justify-between lg:flex-row lg:px-6">
|
||||
<div class="flex w-full items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:gap-4 lg:justify-normal lg:border-b-0 lg:px-0 lg:py-4 dark:border-gray-800">
|
||||
<!-- Hamburger Toggle BTN -->
|
||||
<button
|
||||
:class="sidebarToggle ? 'lg:bg-transparent dark:lg:bg-transparent bg-gray-100 dark:bg-gray-800' : ''"
|
||||
class="z-99999 flex h-10 w-10 items-center justify-center rounded-lg border-gray-200 text-gray-500 lg:h-11 lg:w-11 lg:border dark:border-gray-800 dark:text-gray-400"
|
||||
@click.stop="sidebarToggle = !sidebarToggle"
|
||||
>
|
||||
<i class="fe fe-menu hidden lg:block text-base"></i>
|
||||
<i :class="sidebarToggle ? 'hidden' : 'block lg:hidden'" class="fe fe-menu block lg:hidden text-lg"></i>
|
||||
<i :class="sidebarToggle ? 'block lg:hidden' : 'hidden'" class="fe fe-x block lg:hidden text-lg"></i>
|
||||
</button>
|
||||
<!-- Hamburger Toggle BTN -->
|
||||
|
||||
<!-- Page Title -->
|
||||
<div class="lg:hidden">
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white"><?= esc($title ?? 'Dashboard') ?></h2>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="hidden lg:block">
|
||||
<form>
|
||||
<div class="relative">
|
||||
<span class="absolute top-1/2 left-4 -translate-y-1/2">
|
||||
<i class="fe fe-search text-gray-500 dark:text-gray-400 text-lg"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
class="h-11 w-full rounded-lg border border-gray-200 bg-transparent py-2.5 pr-4 pl-12 text-sm text-gray-800 placeholder:text-gray-400 focus:border-primary-300 focus:ring-3 focus:ring-primary-500/10 focus:outline-none xl:w-[430px] dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="menuToggle ? 'flex' : 'hidden'" class="shadow-md w-full items-center justify-between gap-4 px-5 py-4 lg:flex lg:justify-end lg:px-0 lg:shadow-none">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Dark Mode Toggler -->
|
||||
<button
|
||||
@click="$store.darkMode.toggle()"
|
||||
class="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors 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"
|
||||
>
|
||||
<i class="fe fe-sun hidden dark:block text-lg"></i>
|
||||
<i class="fe fe-moon dark:hidden text-lg"></i>
|
||||
</button>
|
||||
<!-- Dark Mode Toggler -->
|
||||
|
||||
<!-- Notification Menu Area -->
|
||||
<div class="relative" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false">
|
||||
<button
|
||||
class="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors 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.prevent="dropdownOpen = !dropdownOpen"
|
||||
>
|
||||
<i class="fe fe-bell text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Notification Menu Area -->
|
||||
</div>
|
||||
|
||||
<!-- User Area -->
|
||||
<div class="relative" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false">
|
||||
<a
|
||||
class="flex items-center text-gray-700 dark:text-gray-400"
|
||||
href="#"
|
||||
@click.prevent="dropdownOpen = !dropdownOpen"
|
||||
>
|
||||
<span class="mr-3 h-11 w-11 overflow-hidden rounded-full">
|
||||
<img src="<?= base_url('assets/images/user/owner.jpg') ?>" alt="User" class="h-full w-full object-cover" />
|
||||
</span>
|
||||
<span class="text-sm mr-1 block font-medium dark:text-white"><?= esc(session()->get('username') ?? 'User') ?></span>
|
||||
<i :class="dropdownOpen && 'rotate-180'" class="fe fe-chevron-down text-gray-500 dark:text-gray-400 text-sm transition-transform"></i>
|
||||
</a>
|
||||
|
||||
<!-- Dropdown Start -->
|
||||
<div
|
||||
x-show="dropdownOpen"
|
||||
class="shadow-lg absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900"
|
||||
>
|
||||
<div>
|
||||
<span class="text-sm block font-medium text-gray-700 dark:text-gray-400">
|
||||
<?= esc(session()->get('username') ?? 'User') ?>
|
||||
</span>
|
||||
<span class="text-xs mt-0.5 block text-gray-500 dark:text-gray-400">
|
||||
<?= esc(session()->get('email') ?? 'user@example.com') ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col gap-1 border-b border-gray-200 pt-4 pb-3 dark:border-gray-800">
|
||||
<li>
|
||||
<a href="<?= base_url('admin/profile') ?>" class="group text-sm flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5">
|
||||
<i class="fe fe-user text-gray-500 group-hover:text-gray-700 dark:text-gray-400"></i>
|
||||
Edit profile
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="<?= base_url('auth/logout') ?>" class="group text-sm mt-3 flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-white/5">
|
||||
<i class="fe fe-log-out text-red-500 group-hover:text-red-700 dark:text-red-400"></i>
|
||||
Sign out
|
||||
</a>
|
||||
</div>
|
||||
<!-- Dropdown End -->
|
||||
</div>
|
||||
<!-- User Area -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
177
app/Views/admin/partials/sidebar.php
Normal file
177
app/Views/admin/partials/sidebar.php
Normal file
@@ -0,0 +1,177 @@
|
||||
<aside
|
||||
:class="sidebarToggle ? 'translate-x-0 lg:w-[90px]' : '-translate-x-full'"
|
||||
class="sidebar fixed left-0 top-0 z-9999 flex h-screen w-[290px] flex-col overflow-y-hidden border-r border-gray-200 bg-white px-5 dark:border-gray-800 dark:bg-gray-900 lg:static lg:translate-x-0"
|
||||
>
|
||||
<!-- SIDEBAR HEADER -->
|
||||
<div
|
||||
:class="sidebarToggle ? 'justify-center' : 'justify-between'"
|
||||
class="flex items-center gap-2 pt-8 sidebar-header pb-7"
|
||||
>
|
||||
<a href="<?= base_url('admin/dashboard') ?>" class="flex items-center gap-3">
|
||||
<span class="logo" :class="sidebarToggle ? 'hidden' : ''">
|
||||
<img class="h-10 w-auto" src="<?= base_url('assets/images/logo/b_logo_1757803697487.png') ?>" alt="Logo Bapenda Garut" />
|
||||
</span>
|
||||
<img
|
||||
class="logo-icon h-10 w-10 object-contain"
|
||||
:class="sidebarToggle ? 'lg:block' : 'hidden'"
|
||||
src="<?= base_url('assets/images/logo/b_logo_1757803697487.png') ?>"
|
||||
alt="Logo"
|
||||
/>
|
||||
<?php
|
||||
// Get site name from settings
|
||||
$settingsModel = new \App\Models\SettingsModel();
|
||||
$siteName = $settingsModel->getSetting('site_name', 'Bapenda Garut');
|
||||
?>
|
||||
<span class="site-name text-2xl font-semibold text-gray-800 dark:text-white" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
<?= esc($siteName) ?>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- SIDEBAR HEADER -->
|
||||
|
||||
<div class="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar">
|
||||
<!-- Sidebar Menu -->
|
||||
<nav>
|
||||
<?php
|
||||
// Get current URI segment
|
||||
$uri = service('uri');
|
||||
$segment1 = $uri->getSegment(1) ?? '';
|
||||
$segment2 = $uri->getSegment(2) ?? '';
|
||||
|
||||
// Determine active menu based on URI
|
||||
$activeMenu = '';
|
||||
if ($segment1 === 'admin') {
|
||||
if (empty($segment2) || $segment2 === 'dashboard') {
|
||||
$activeMenu = 'dashboard';
|
||||
} elseif ($segment2 === 'news') {
|
||||
$activeMenu = 'news';
|
||||
} elseif ($segment2 === 'pages') {
|
||||
$activeMenu = 'pages';
|
||||
} elseif ($segment2 === 'users') {
|
||||
$activeMenu = 'users';
|
||||
} elseif ($segment2 === 'audit-logs') {
|
||||
$activeMenu = 'audit-logs';
|
||||
} elseif ($segment2 === 'settings') {
|
||||
$activeMenu = 'settings';
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to get active class
|
||||
$getActiveClass = function($menu) use ($activeMenu) {
|
||||
return $activeMenu === $menu
|
||||
? 'bg-primary-50 text-primary-600 dark:bg-white/5 dark:text-primary-400'
|
||||
: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5';
|
||||
};
|
||||
?>
|
||||
<!-- Menu Group -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
|
||||
<span class="menu-group-title" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
MENU
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<ul class="flex flex-col gap-0.5 mb-6">
|
||||
<!-- Menu Item Dashboard -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/dashboard') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('dashboard') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-home text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item Dashboard -->
|
||||
|
||||
<!-- Menu Item News -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/news') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('news') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-file-text text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Berita
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item News -->
|
||||
|
||||
<!-- Menu Item Pages -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/pages') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('pages') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-file text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Halaman
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item Pages -->
|
||||
|
||||
<?php if (session()->get('role') === 'admin'): ?>
|
||||
<!-- Menu Item Users -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/users') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('users') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-users text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Pengguna
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item Users -->
|
||||
|
||||
<!-- Menu Item Audit Logs -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/audit-logs') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('audit-logs') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-clipboard text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Audit Log
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item Audit Logs -->
|
||||
|
||||
<!-- Menu Item Settings -->
|
||||
<li>
|
||||
<a
|
||||
href="<?= base_url('admin/settings') ?>"
|
||||
class="menu-item group flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium duration-300 <?= $getActiveClass('settings') ?>"
|
||||
>
|
||||
<span class="flex items-center justify-center w-6 h-6">
|
||||
<i class="fe fe-settings text-xl"></i>
|
||||
</span>
|
||||
<span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
|
||||
Pengaturan
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Menu Item Settings -->
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Sidebar Menu -->
|
||||
</div>
|
||||
</aside>
|
||||
Reference in New Issue
Block a user