196 lines
8.2 KiB
PHP
196 lines
8.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ config('app.name', 'S-Learn Sentiment Analysis') }}</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800,900&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome Icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Animate.css -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
|
|
|
|
<!-- Scripts - Tailwind CSS via Vite -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<!-- HAPUS CHART.JS DARI SINI! -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script> -->
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
<!-- Mobile Menu Button -->
|
|
<button class="mobile-menu-btn" onclick="toggleSidebar()" id="mobileMenuBtn">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<!-- Sidebar - Biru Navy -->
|
|
<div class="sidebar" id="sidebar">
|
|
<!-- Sidebar Header - Tinggi disamakan dengan navbar -->
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<!-- Logo Gambar dari public/images/logo.png -->
|
|
<img src="{{ asset('images/logo.png') }}" alt="S-Learn Logo" class="sidebar-logo-image">
|
|
<div>
|
|
<div class="sidebar-logo-text">S-Learn Analytics</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Menu -->
|
|
<div class="px-3">
|
|
<!-- Dashboard Menu -->
|
|
<a href="{{ route('dashboard') }}" class="sidebar-menu-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
|
|
<i class="fas fa-chart-pie"></i>
|
|
<span>Dashboard Sentimen</span>
|
|
</a>
|
|
|
|
<!-- Data Management Menu -->
|
|
<a href="{{ route('data.management') }}" class="sidebar-menu-item {{ request()->routeIs('data.management') ? 'active' : '' }}">
|
|
<i class="fas fa-database"></i>
|
|
<span>Data Management</span>
|
|
</a>
|
|
|
|
<!-- Logout Menu -->
|
|
<form method="POST" action="{{ route('logout') }}" class="block">
|
|
@csrf
|
|
<button type="submit" class="sidebar-menu-item logout w-full text-left">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Sidebar Footer - User Info -->
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user-info">
|
|
<div class="sidebar-user-avatar">
|
|
{{ substr(auth()->user()->name ?? 'U', 0, 1) }}
|
|
</div>
|
|
<div class="sidebar-user-details">
|
|
<div class="sidebar-user-name">{{ auth()->user()->name ?? 'User' }}</div>
|
|
<div class="sidebar-user-role">
|
|
<i class="fas fa-circle text-green-400 text-[6px] mr-1"></i>
|
|
{{ auth()->user()->role ?? 'Administrator' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-center mt-3 text-white/50">
|
|
© {{ date('Y') }} S-Learn Analytics
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Sticky Navbar - Biru Navy -->
|
|
<nav class="navbar-sticky px-6">
|
|
<div class="flex justify-between items-center w-full">
|
|
<!-- Left side - Page Title -->
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-bars text-white/70 text-xl cursor-pointer hover:text-white transition md:hidden" onclick="toggleSidebar()"></i>
|
|
<div id="pageTitle">
|
|
@if(request()->routeIs('dashboard'))
|
|
<h1 class="text-xl font-bold text-white flex items-center">
|
|
<i class="fas fa-chart-line text-white/80 mr-2"></i>
|
|
Dashboard
|
|
</h1>
|
|
@elseif(request()->routeIs('data.management'))
|
|
<h1 class="text-xl font-bold text-white flex items-center">
|
|
<i class="fas fa-database text-white/80 mr-2"></i>
|
|
Data Management
|
|
</h1>
|
|
@else
|
|
<h1 class="text-xl font-bold text-white">S-Learn Analytics</h1>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side - Quick Actions -->
|
|
<div class="flex items-center space-x-3">
|
|
<!-- Refresh Button -->
|
|
<button onclick="location.reload()" class="p-2 rounded-lg hover:bg-white/10 transition">
|
|
<i class="fas fa-sync-alt text-white/70 hover:text-white"></i>
|
|
</button>
|
|
|
|
<!-- User Dropdown -->
|
|
<div class="flex items-center space-x-2 ml-2 pl-2 border-l border-white/20">
|
|
<span class="text-sm font-medium text-white/90">{{ auth()->user()->name ?? 'User' }}</span>
|
|
<div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
|
{{ substr(auth()->user()->name ?? 'U', 0, 1) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<main>
|
|
{{ $slot }}
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
// Toggle sidebar function
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
sidebar.classList.toggle('open');
|
|
|
|
if (sidebar.classList.contains('open')) {
|
|
menuBtn.innerHTML = '<i class="fas fa-times"></i>';
|
|
} else {
|
|
menuBtn.innerHTML = '<i class="fas fa-bars"></i>';
|
|
}
|
|
}
|
|
|
|
// Close sidebar when clicking outside on mobile
|
|
document.addEventListener('click', function(event) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
const isClickInsideSidebar = sidebar.contains(event.target);
|
|
const isClickOnMenuBtn = menuBtn.contains(event.target);
|
|
|
|
if (window.innerWidth <= 768 && sidebar.classList.contains('open') && !isClickInsideSidebar && !isClickOnMenuBtn) {
|
|
sidebar.classList.remove('open');
|
|
menuBtn.innerHTML = '<i class="fas fa-bars"></i>';
|
|
}
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
|
|
if (window.innerWidth > 768) {
|
|
sidebar.classList.remove('open');
|
|
menuBtn.style.display = 'none';
|
|
} else {
|
|
menuBtn.style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
// Tambahkan class untuk styling
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Hapus class dark dari html
|
|
document.documentElement.classList.remove('dark');
|
|
|
|
// Tambahkan class untuk styling
|
|
document.body.classList.add('bg-gray-50');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |