Component 0 - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <meta http equiv="X UA Compatible" content="ie=edge"> <title>KS Smart Solution</title> <link rel="icon" type="image/x icon" href="/images/logo.png"> <meta name="csrf token" content="{{ csrf_token() }}"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> {{ Font Awesome for icons }} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/6.0.0 beta3/css/all.min.css"> {{ Style sheets }} <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/components_style.css"> <link rel="stylesheet" href="/css/fonts.css"> <link rel="stylesheet" href="/css/style2.css"> {{ Data Table }} <meta name="csrf token" content="{{ csrf_token() }}"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery 3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery validate/1.19.0/jquery.validate.js"></script> <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384 MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> </head> <body> <button class="sidebar toggle" onclick="toggleSidebar()"> <img src="https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcQwurvgmCgQccXCiOtT710vMbQAcN B0Ut4Yg&s" alt="toggleicon" height="15px" width="15px"> </button> <div class="sidebar shadow sm rounded 3"> <button class="close sidebar" onclick="toggleSidebar()"> <img src="https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcTVM3yLIBl0RGysURWg08_xBxGSIjDfsukeQg&s" alt="close" height="15px" width="15px"> </button> <div> <div class="logo d flex justify content center align items center mt 4 mb 4"> <img src="{{ asset('images/Dashboard_logo.png') }}" class="dashboard_logo" alt="logo" height="40px" width="40px"> <p class="ml 3 mt 2 fw bold h5">KS Smart Solution</p> </div> <ul class="nav flex column"> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('dashboardscreen') ? 'active' : '' }}" href="{{ route('dashboardscreen') }}"> <img src="{{ asset('images/dashboard_svg/key square.svg') }}" alt="Dashboard Logo" class="me 2 custom logo"> Dashboard </a> </li> @if (auth() >user() >user_type == 'Admin') <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('user.list') || Route::is('add.user') || Route::is('user_add_screen') || Route::is('user.details') || Route::is('user.edit') ? 'active' : '' }}" href="{{ route('user.list') }}"> <img src="{{ asset('images/dashboard_svg/user.svg') }}" alt="users" class="me 2 custom logo">Users </a> </li> @endif <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('category.list') ? 'active' : '' }}" href="{{ route('category.list') }}"> <img src="{{ asset('images/category.png') }}" alt="category" class="me 2 custom logo">Category </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('school.list') || Route::is('school_add_screen') || Route::is('school.details') || Route::is('school_update') || Route::is('high_tech.list') || Route::is('hitech_add_screen') || Route::is('hitech.details') ? 'active' : '' }}" href="#schoolSubmenu" data bs toggle="collapse" role="button" aria expanded="{{ Route::is('school.list') || Route::is('school_add_screen') || Route::is('school.details') || Route::is('school_update') || Route::is('high_tech.list') || Route::is('hitech_add_screen') || Route::is('hitech.details') ? 'true' : 'false' }}" aria controls="schoolSubmenu" id="schoolMenuLink"> <img src="{{ asset('images/school.png') }}" alt="school" class="me 2 custom logo"> School <span class="ms auto"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi caret down" id="schoolArrow" viewBox="0 0 16 16"> <path d="M3.204 5h9.592L8 10.481zm .753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796 5.48c.566 .647.106 1.659 .753 1.659H3.204a1 1 0 0 0 .753 1.659" /> </svg> </span> </a> <div class="collapse {{ Route::is('school.list') || Route::is('school_add_screen') || Route::is('school.details') || Route::is('school_update') || Route::is('high_tech.list') || Route::is('hitech_add_screen') || Route::is('hitech.details') ? 'show' : '' }}" id="schoolSubmenu"> <ul class="nav flex column ms 4 mt 1"> <li class="nav item mb 2"> <a class="nav link text secondary {{ Route::is('school.list') || Route::is('school_add_screen') || Route::is('school.details') || Route::is('school_update') ? 'active' : '' }}" href="{{ route('school.list') }}"> <img src="{{ asset('images/smart_class.png') }}" alt="smart class" class="me 2 custom logo" style="width:20px; height:20px;">Smart Class </a> </li> <li class="nav item mb 2"> <a class="nav link text secondary {{ Route::is('high_tech.list') || Route::is('hitech_add_screen') || Route::is('hitech.details') ? 'active' : '' }}" href="{{ route('high_tech.list') }}"> <img src="{{ asset('images/high_tech.png') }}" alt="hi tech" class="me 2 custom logo" style="width:20px; height:20px;">Hi Tech </a> </li> </ul> </div> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('vendor.list') || Route::is('vendor.list') || Route::is('vendor_add_screen') || Route::is('vendor.details') ? 'active' : '' }}" href="{{ route('vendor.list') }}"> <img src="{{ asset('images/dashboard_svg/vendor.svg') }}" alt="Vendor" class="me 2 custom logo">Vendor </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('task.list') || Route::is('task_add_screen') || Route::is('task.details') ? 'active' : '' }}" href="{{ route('task.list') }}"> <img src="{{ asset('images/Task.png') }}" alt="task management" class="me 2 custom logo">Task Management </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('payment_list') ? 'active' : '' }}" href="{{ route('payment_list') }}"> <img src="{{ asset('images/payment2.png') }}" alt="task management" class="me 2 custom logo" style="width:25px; height:25px;">Payment </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('report_page') ? 'active' : '' }}" onclick="window.location.replace('{{ route('report_page') }}');"> <img src="{{ asset('/images/dashboard_svg/report.svg') }}" alt="report" class="me 2 custom logo">Report </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary {{ Route::is('report_page_1') ? 'active' : '' }}" onclick="window.location.replace('{{ route('report_page_1') }}');"> <img src="{{ asset('/images/dashboard_svg/report.svg') }}" alt="report" class="me 2 custom logo">Detailed Report </a> </li> <li class="nav item mb 3"> <a class="nav link d flex align items center text secondary" href="#" onclick="event.preventDefault(); showLogoutModal();"> <img src="{{ asset('/images/logout.png') }}" alt="Logout" class="me 2 custom logo">Logout </a> <form id="logout form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </li> </ul> <div class="" style="left: 0; bottom: 20; z index: 9999; padding: 20px;"> <hr> <div class="d flex align items center rounded 5 p 2 profile card"> <img src="https://srueis.sru.ac.th/assets/images/users/1.jpg" alt="Profile Picture" class="rounded circle" style="width: 40px; height: 40px; object fit: cover; margin right: 10px;"> <div class="me 3"> <h6 class="fw bolder"> <a href="{{ route('user.details', ['id' => 1]) }}" class="text decoration none"> {{ auth() >user() >username }} </a> </h6> <p class="text secondary mb 0">{{ auth() >user() >user_type }}</p> </div> </div> </div> <! <div class="profile"> <div class="d flex align items center rounded 5 p 2 profile card"> <img src="https://srueis.sru.ac.th/assets/images/users/1.jpg" alt="Profile Picture" class="rounded circle" style="width: 40px; height: 40px; object fit: cover; margin right: 10px;"> <div class="me 3"> <h6 class="fw bolder">{{ auth() >user() >username }}</h6> <p class="text secondary mb 0">{{ auth() >user() >user_type }}</p> </div> </div> </div> > </div> </div> <div class="sidebar overlay"></div> <div class="content"> @yield('content') </div> {{ Logout model dilogu box }} <div> <div class="modal fade" id="logoutModal" tabindex=" 1" role="dialog" aria labelledby="logoutModalLabel" aria hidden="true"> <div class="modal dialog modal dialog centered" role="document"> <div class="modal content rounded 3" style="height: 200px; width: 400px;"> <div class="modal header justify content center bg primary text white"> <h3 class="modal title text center" id="logoutModalLabel">Logout</h3> </div> <div class="modal body text center h5"> Are you sure you want to log out? </div> <div class="modal footer justify content center"> <button type="button" class="btn btn secondary" data dismiss="modal" onclick="closeLogouModel()">Cancel</button> <button type="button" class="btn btn primary" onclick="performLogout()">Logout</button> </div> </div> </div> </div> </div> <script> function toggleSidebar() { const sidebar = document.querySelector('.sidebar'); const content = document.querySelector('.content'); const overlay = document.querySelector('.sidebar overlay'); const body = document.body; const logo = document.querySelector('.logo'); const toggleButton = document.querySelector('.sidebar toggle'); sidebar.classList.toggle('show'); content.classList.toggle('shifted'); overlay.style.display = sidebar.classList.contains('show') ? 'block' : 'none'; if (sidebar.classList.contains('show')) { body.classList.add('no scroll'); logo.style.display = 'flex'; toggleButton.style.display = 'none'; } else { body.classList.remove('no scroll'); logo.style.display = 'none'; toggleButton.style.display = 'block'; } } function showLogoutModal() { $('#logoutModal').modal('show'); } function performLogout() { document.getElementById('logout form').submit(); } function closeLogouModel() { $('#logoutModal').modal('hide'); } </script> <script> const schoolArrow = document.getElementById('schoolArrow'); const isExpanded = "{{ Route::is('school.list') || Route::is('school_add_screen') || Route::is('school.details') || Route::is('school_update') || Route::is(patterns: 'high_tech.list') || Route::is('hitech_add_screen') || Route::is('hitech.details') ? 'true' : 'false' }}"; if (isExpanded === 'true') { schoolArrow.style.transform = 'rotate(180deg)'; } else { schoolArrow.style.transform = 'rotate(0deg)'; } </script> </body> <style> .sidebar { width: 250px; height: 100%; position: fixed; top: 0; left: 0; background color: #f8f9fa; transition: transform 0.3s ease; z index: 1000; } .profile { display: none; } @media (max width: 992px) { .sidebar { width: 100%; transform: translateX( 100%); } .sidebar.show { transform: translateX(0); } } .content { margin left: 0; margin top: 0px; transition: margin left 0.3s ease; } @media (min width: 992px) { .content { margin left: 250px; } } .sidebar toggle { display: none; position: absolute; top: 20px; left: 25px; border: none; } @media (max width: 992px) { .sidebar toggle { display: block; } .toggle sidebar { border: none; background: none; } .logo mobile { padding top: 10px; } } .close sidebar { display: none; position: absolute; top: 10px; right: 10px; border: none; } @media (max width: 992px) { .close sidebar { display: block; } } .sidebar overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z index: 999; } .sidebar.show+.sidebar overlay { display: block; } body.no scroll { position: fixed; width: 100%; overflow: hidden; } @media (max width: 992px) { .mb 5 { display: none; } .profile { display: block; } } </style> </html>