layout sidebar

0669f59b · 64160292 · 030d024d · 0669f59b · 030d024d · 030d024d
Commit 0669f59b authored 2 years ago by 64160292
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -8,6 +8,6 @@
 class AdminController extends Controller
 {
    public function Home(){
-        return view('Admin/v_admin_home');
+        return view('Admin/test');
    }
 }
--- a/app/Http/Controllers/Login_controller.php
+++ b/app/Http/Controllers/Login_controller.php
-<?php
-namespace App\Http\Controllers;
-use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
-class Login_controller extends Controller
-{
-    //
-}
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
-<?php
-namespace App\Http\Controllers;
-use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
-class UserController extends Controller
-{
-    public function Home(){
-        return view('User/v_user_home');
-    }
-}
--- a/public/css/sidebar.css
+++ b/public/css/sidebar.css
+/* Google Fonts - Kanit */
+@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Kanit', sans-serif;
+}
+body {
+    min-height: 100%;
+    width: 100%;
+    background: #e0e4e7;
+}
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 70px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+}
+nav .logo {
+    display: flex;
+    align-items: center;
+    margin: 0 24px;
+}
+nav .user {
+    display: flex;
+    width: 1500%;
+    justify-content: end;
+    margin-right: 10px;
+}
+nav .bottom-cotent {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    margin-right: 30px;
+}
+.logo .nav-link {
+    display: flex;
+    align-items: center;
+    background-color: #ffffff;
+    text-decoration: none;
+}
+.user .nav-link {
+    display: flex;
+    align-items: center;
+    background-color: #ffffff;
+    text-decoration: none;
+    font-size: 16px;
+    color: #000;
+    font-weight: 400;
+}
+.bottom-cotent .icon {
+    color: #333;
+    font-size: 24px;
+    margin-right: 14px;
+    cursor: pointer;
+}
+.bottom-cotent .menu-icon {
+    margin: 14px;
+    font-size: 20px;
+    color: #000;
+}
+.logo .menu-icon {
+    color: #333;
+    font-size: 24px;
+    margin-right: 14px;
+    cursor: pointer;
+}
+.logo .logo-name {
+    color: #333;
+    font-size: 22px;
+    font-weight: 500;
+}
+nav .sidebar {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    height: 100%;
+    width: 320px;
+    padding: 10px 0;
+    background-color: #ffffff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+    transition: all 0.5s ease;
+}
+nav.open .sidebar {
+    left: 0;
+}
+.sidebar .sidebar-content {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 10px 16px;
+}
+.sidebar-content .list {
+    list-style: none;
+}
+.list .nav-link {
+    display: flex;
+    align-items: center;
+    margin: 5px 0;
+    padding: 5px 12px;
+    border-radius: 8px;
+    background-color: #ffffff;
+    text-decoration: none;
+}
+.lists .nav-link:hover {
+    background-color: #36618D;
+    /*  */
+}
+.nav-link .icon {
+    margin: 14px;
+    font-size: 20px;
+    color: #000;
+}
+.nav-link .link {
+    font-size: 16px;
+    color: #000;
+    font-weight: 400;
+}
+.overlay {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    height: 1000vh;
+    width: 200%;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.5s ease;
+    background: rgba(0, 0, 0, 0.3);
+}
+nav.open~.overlay {
+    opacity: 1;
+    left: 320px;
+    pointer-events: auto;
+}
\ No newline at end of file
--- a/public/icon/cremation_system_logo/cremation_name.png
+++ b/public/icon/cremation_system_logo/cremation_name.png
--- a/public/icon/cremation_system_logo/cremation_system_logo.png
+++ b/public/icon/cremation_system_logo/cremation_system_logo.png
--- a/resources/views/Admin/Member/v_approve_user.blade.php
+++ b/resources/views/Admin/Member/v_approve_user.blade.php
--- a/resources/views/Admin/Member/v_update_user.blade.php
+++ b/resources/views/Admin/Member/v_update_user.blade.php
--- a/resources/views/Admin/Transaction/v_approve_tranfer.blade.php
+++ b/resources/views/Admin/Transaction/v_approve_tranfer.blade.php
--- a/resources/views/Admin/Transaction/v_cremation_charge.blade.php
+++ b/resources/views/Admin/Transaction/v_cremation_charge.blade.php
--- a/resources/views/Admin/test.blade.php
+++ b/resources/views/Admin/test.blade.php
+@extends('layouts.sidebar')
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <br>
+    <br>
+    <br>
+    <!-- Content -->
+    <p>TEST SIDEBAR AND HEADER</p>
+</body>
+</html>
\ No newline at end of file
--- a/resources/views/Admin/v_admin_home.blade.php
+++ b/resources/views/Admin/v_admin_home.blade.php
-admin
--- a/resources/views/Admin/v_admin_report.blade.php
+++ b/resources/views/Admin/v_admin_report.blade.php
--- a/resources/views/Login/v_Login.blade.php
+++ b/resources/views/Login/v_Login.blade.php
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>CSA</title>
-        <link rel="stylesheet" href="css\login.css">
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Trirong:wght@300&display=swap" rel="stylesheet">
-        <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>
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    </head>
-    <body>
-        <div class="split left">
-            <img src="image\login.jpg" class="img">
-          </div>
-          <div class="split right">
-            <div class="centered">
-              <img src="image\lawyerscouncil.png" alt="Avatar man">
-            </div>
-            <div class="login-position">
-                <h2 class="font" style="font-size: 30px;" >เข้าสู่ระบบ</h2>
-                <div class="div-between" style=>
-                    <div><input type="text" class="input-resize" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" style="width: 400px;  height:35px ;"></div>
-                    <div><input type="password" class="input-resize" class="form-control" placeholder="Password" aria-label="Passwords   " aria-describedby="basic-addon1" style="width: 400px; height:35px ;"></div>
-                    <div><a href="/"><button class="button-register" class="button-resize" type="button">Login</button></a></div>
-            </div>
-          </div>
-    </body>
-</html>
--- a/resources/views/Register/v_admin_register.blade.php
+++ b/resources/views/Register/v_admin_register.blade.php
--- a/resources/views/Register/v_user_register.blade.php
+++ b/resources/views/Register/v_user_register.blade.php
--- a/resources/views/User/v_user_home.blade.php
+++ b/resources/views/User/v_user_home.blade.php
-user
--- a/resources/views/User/v_user_proof_tranfer.blade.php
+++ b/resources/views/User/v_user_proof_tranfer.blade.php
--- a/resources/views/User/v_user_transection_history.blade.php
+++ b/resources/views/User/v_user_transection_history.blade.php
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sidebar Menu</title>
+    <!-- CSS -->
+    <link rel="stylesheet" href="css/sidebar.css">
+    <!-- Boxicons CSS -->
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+</head>
+<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>
+<body>
+    <nav>
+        <div class="logo">
+            <i class='bx bx-menu menu-icon'></i>
+            <a href="" class="nav-link">
+                <img src="icon/cremation_system_logo/cremation_system_logo.png" class="rounded float-start" alt="..." width="50" height="50">
+                <img src="icon/cremation_system_logo/cremation_name.png" class="rounded float-start" alt="..." width="190" height="70">
+            </a>
+        </div>
+        <div class="user">
+            <a href="" class="nav-link">
+                <span>นายดาบเจ็ดสี มณีเจ็ดแสง</span>
+            </a>
+        </div>
+        <div class="bottom-cotent">
+            <a href="" class="nav-link">
+                <i class='bx bx-log-out icon'></i>
+            </a>
+        </div>
+        <div class="sidebar">
+            <div class="logo">
+                <i class='bx bx-menu menu-icon'></i>
+                <img src="icon/cremation_system_logo/cremation_system_logo.png" class="img-fluid" alt="..." width="50" height="50">
+                <img src="icon/cremation_system_logo/cremation_name.png" class="img-fluid" alt="..." width="190" height="70">
+            </div>
+            <div class="sidebar-content">
+                <ul class="lists">
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-home-alt icon'></i>
+                            <span class="link">หน้าหลัก</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-notepad icon'></i>
+                            <span class="link">ลงทะเบียนสมาชิก</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-check-square icon'></i>
+                            <span class="link">อนุมัติสมาชิก</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-calculator icon'></i>
+                            <span class="link">คำนวณเงิน</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-edit-alt icon'></i>
+                            <span class="link">ปรับปรุงข้อมูลสมาชิก</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-receipt icon'></i>
+                            <span class="link">หลักฐานการแจ้งฝากเงิน</span>
+                        </a>
+                    </li>
+                    <li class="list">
+                        <a href="" class="nav-link">
+                            <i class='bx bx-file-find icon'></i>
+                            <span class="link">รายงาน</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <br>
+    <br>
+    <!-- Content -->
+    <!-- Overlay -->
+    <section class="overlay"></section>
+    <script>
+        const navBar = document.querySelector("nav"),
+            menuBtns = document.querySelectorAll(".menu-icon"),
+            overlay = document.querySelector(".overlay");
+        menuBtns.forEach(menuBtn => {
+            menuBtn.addEventListener("click", () => {
+                navBar.classList.toggle("open");
+            });
+        });
+        overlay.addEventListener("click", () => {
+            navBar.classList.remove("open");
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file