sidebar

project/resources/views/layouts/dashboard.blade.php

@@ -24,6 +24,7 @@
 <!-- Baru Select2 -->
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 <!-- CSS Select2 di head -->
+
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
 
     <style>
@@ -176,8 +177,15 @@
     }
     /* --- Sidebar Styling --- */
     .sidebar {
+        position: fixed; /* Agar tetap di posisinya saat scroll */
+        top: 60px;       /* Sesuaikan dengan tinggi navbarmu */
+        bottom: 0;
+        width: 300px;
+        z-index: 996;    /* Agar berada di atas konten utama */
         background-color: #ffffff;
         padding: 20px 15px;
+        transition: all 0.3s;
+        box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
     }
 
     .sidebar-nav .nav-item {
@@ -221,6 +229,33 @@
     .sidebar-nav .nav-link:hover i {
         color: #ffffff;      /* Ikon jadi putih saat hover */
     }
+    @media (max-width: 1199px) {
+    .toggle-sidebar::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.3);
+        z-index: 995;
+    }
+    }
+
+    /* Pengaturan untuk Desktop (>= 1200px) */
+    @media (min-width: 1200px) {
+        .sidebar {
+            left: 0; /* Muncul */
+        }
+        #main, #footer {
+            margin-left: 300px;
+            transition: all 0.3s;
+        }
+        /* Sembunyikan sidebar saat tombol diklik di desktop */
+        .toggle-sidebar .sidebar {
+            left: -300px;
+        }
+        .toggle-sidebar #main, .toggle-sidebar #footer {
+            margin-left: 0;
+        }
+    }
   </style>
 </head>
 
@@ -244,7 +279,54 @@
 <script src="{{ asset('assets/js/main.js') }}"></script>
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+  (function() {
+    "use strict";
 
+    /**
+     * Helper function untuk mempermudah selector
+     */
+    const select = (el, all = false) => {
+      el = el.trim()
+      if (all) {
+        return [...document.querySelectorAll(el)]
+      } else {
+        return document.querySelector(el)
+      }
+    }
+
+    /**
+     * Helper untuk event listener
+     */
+    const on = (type, el, listener, all = false) => {
+      if (all) {
+        select(el, all).forEach(e => e.addEventListener(type, listener))
+      } else {
+        select(el, all).addEventListener(type, listener)
+      }
+    }
+    document.addEventListener('click', function(e) {
+    if (e.target.classList.contains('toggle-sidebar-btn') || e.target.closest('.toggle-sidebar-btn')) {
+        document.body.classList.toggle('toggle-sidebar');
+    }
+    });
+  })();
+  document.addEventListener('click', function(e) {
+  // Toggle sidebar
+  if (e.target.classList.contains('toggle-sidebar-btn') || e.target.closest('.toggle-sidebar-btn')) {
+    document.body.classList.toggle('toggle-sidebar');
+    return;
+  }
+
+  // Tutup sidebar saat klik overlay di mobile
+  const sidebar = document.querySelector('.sidebar');
+  if (window.innerWidth < 1200 &&
+      document.body.classList.contains('toggle-sidebar') &&
+      !sidebar.contains(e.target)) {
+    document.body.classList.remove('toggle-sidebar');
+  }
+});
+</script>
   @stack('scripts')
 </body>
 

project/resources/views/partials/navbar.blade.php

@@ -1,8 +1,12 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-white py-2 shadow-sm fixed-top" style="border-bottom: 2px solid #fff5f0;">
-  <div class="container-fluid px-4">
+    <div class="container-fluid px-4">
-    <a class="navbar-brand fw-bold d-flex align-items-center" href="/dashboard" style="color: #FF782D; font-size: 1.5rem; letter-spacing: -0.5px;">
+        <div class="d-flex align-items-center">
-        <i class="bi bi-heart-pulse-fill me-2"></i> PosSehat
+        <i class="bi bi-list toggle-sidebar-btn me-3" style="font-size: 1.5rem; color: #FF782D; cursor: pointer;"></i>
-    </a>
+
+        <a class="navbar-brand fw-bold d-flex align-items-center" href="/dashboard" style="color: #FF782D; font-size: 1.5rem; letter-spacing: -0.5px;">
+            <i class="bi bi-heart-pulse-fill me-2"></i> PosSehat
+        </a>
+    </div>
 
     <div class="ms-auto d-flex align-items-center">
         <ul class="navbar-nav">

project/resources/views/pengukuran_balita/create.blade.php

@@ -78,7 +78,7 @@
                     <div class="col-md-4 mb-3">
                         <label class="form-label fw-semibold">Berat Badan (kg)</label>
                         <div class="input-group">
-                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="berat_badan" required placeholder="0.00">
+                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="berat_badan" required placeholder="0.00" step="any" min="0">
                             <span class="input-group-text bg-light border-start-0 text-muted">kg</span>
                         </div>
                     </div>
@@ -86,7 +86,7 @@
                     <div class="col-md-4 mb-3">
                         <label class="form-label fw-semibold">Tinggi Badan (cm)</label>
                         <div class="input-group">
-                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="tinggi_badan" required placeholder="0.0">
+                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="tinggi_badan" required placeholder="0.0" step="any" min="0">
                             <span class="input-group-text bg-light border-start-0 text-muted">cm</span>
                         </div>
                     </div>
@@ -94,7 +94,7 @@
                     <div class="col-md-4 mb-3">
                         <label class="form-label fw-semibold">Lingkar Kepala (cm)</label>
                         <div class="input-group">
-                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="lingkar_kepala" required placeholder="0.0">
+                            <input type="number" class="form-control custom-input text-center fs-5 fw-bold" name="lingkar_kepala" required placeholder="0.0" step="any" min="0">
                             <span class="input-group-text bg-light border-start-0 text-muted">cm</span>
                         </div>
                     </div>

project/resources/views/pengukuran_ibuhamil/create.blade.php

@@ -88,7 +88,8 @@
                                     class="form-control custom-input fs-5 fw-bold text-center"
                                     name="berat_badan"
                                     required
-                                    placeholder="0.0">
+                                    placeholder="0.0"
+                                    min="0">
                                 <span class="input-group-text bg-light border-start-0 text-muted">kg</span>
                             </div>
                         </div>
@@ -103,7 +104,8 @@ class="form-control custom-input fs-5 fw-bold text-center"
                                     class="form-control custom-input fs-5 fw-bold text-center"
                                     name="tinggi_badan"
                                     required
-                                    placeholder="0.0">
+                                    placeholder="0.0"
+                                    min="0">
                                 <span class="input-group-text bg-light border-start-0 text-muted">cm</span>
                             </div>
                         </div>
@@ -118,7 +120,8 @@ class="form-control custom-input fs-5 fw-bold text-center"
                                     class="form-control custom-input fs-5 fw-bold text-center"
                                     name="lila"
                                     required
-                                    placeholder="0.0">
+                                    placeholder="0.0"
+                                    min="0">
                                 <span class="input-group-text bg-light border-start-0 text-muted">cm</span>
                             </div>
                         </div>