From 6034132975120f83aae8f775aab913ff90a604f6 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Thu, 6 Mar 2025 16:05:54 +0700
Subject: [PATCH] step 8 : grid auto fr dan z-index menu di dashboard.html

---
 v1/dashboard.html | 130 +++++++++++++++++-----------------------------
 1 file changed, 47 insertions(+), 83 deletions(-)

diff --git a/v1/dashboard.html b/v1/dashboard.html
index 1f942b0..c9f8d24 100644
--- a/v1/dashboard.html
+++ b/v1/dashboard.html
@@ -28,64 +28,50 @@
                 </a>
                 <!-- menu mobile appear -->
                 <div>
-                    <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity" @click="open = false"></div>
-
+                    <!-- Overlay -->
+                    <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false"></div>
+                
+                    <!-- Modal -->
                     <div x-show="open" x-transition
-                        class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out"
+                        class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
                         x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
                         <ul class="space-y-2">
                             <li>
-                                <a href="#"
-                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
-                                    <div class="flex items-center space-x-2 gap-2">
-                                        <span class="material-symbols-outlined text-black/87">
-                                            settings
-                                        </span>
+                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                    <div class="flex items-center gap-2">
+                                        <span class="material-symbols-outlined text-black/87">settings</span>
                                         Setting
                                     </div>
                                 </a>
                             </li>
                             <li>
-                                <a href="#"
-                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
-                                    <div class="flex items-center space-x-2 gap-2">
-                                        <span class="material-symbols-outlined text-black/87">
-                                            edit
-                                        </span>
-                                        Assay
-                                        Format
+                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                    <div class="flex items-center gap-2">
+                                        <span class="material-symbols-outlined text-black/87">edit</span>
+                                        Assay Format
                                     </div>
                                 </a>
                             </li>
                             <li>
-                                <a href="#"
-                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
-                                    <div class="flex items-center space-x-2 gap-2">
-                                        <span class="material-symbols-outlined text-black/87">
-                                            calculate
-                                        </span>
+                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                    <div class="flex items-center gap-2">
+                                        <span class="material-symbols-outlined text-black/87">calculate</span>
                                         Result
                                     </div>
                                 </a>
                             </li>
                             <li>
-                                <a href="#"
-                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
-                                    <div class="flex items-center space-x-2 gap-2">
-                                        <span class="material-symbols-outlined text-black/87">
-                                            online_prediction
-                                        </span>
+                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                    <div class="flex items-center gap-2">
+                                        <span class="material-symbols-outlined text-black/87">online_prediction</span>
                                         Status
                                     </div>
                                 </a>
                             </li>
                             <li>
-                                <a href="#"
-                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
-                                    <div class="flex items-center space-x-2 gap-2">
-                                        <span class="material-symbols-outlined text-black/87">
-                                            person
-                                        </span>
+                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                    <div class="flex items-center gap-2">
+                                        <span class="material-symbols-outlined text-black/87">person</span>
                                         Akun
                                     </div>
                                 </a>
@@ -93,23 +79,24 @@
                         </ul>
                     </div>
                 </div>
+                
                 <!-- menu mobile appear -->
                 <!-- menu large appear -->
                 <nav aria-label="Global" class="hidden lg:block">
                     <ul class="flex items-center gap-6 text-sm">
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> SETTING </a>
+                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> SETTING </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY FORMAT
+                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ASSAY FORMAT
                             </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> RESULT
+                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> RESULT
                             </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ONLINE </a>
+                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ONLINE </a>
                         </li>
                         <li>
                             <img src="../images/avatar.png" class="mr-3">
@@ -138,60 +125,39 @@
                             <div class="bg-black/87 p-2 text-white font-medium text-lg">LOGS</div>
                             <div class="overflow-y-auto flex-1 p-2 bg-black/87">
                                 <div class="space-y-4">
-                                    <div class="grid lg:grid-cols-2">
-                                        <h2 class="font-normal text-sm text-white">2025-03-02 08:00:00 <span
-                                                class="text-[#20DC49] font-normal text-sm">[Port1]</span></h2>
-                                        <p class="font-normal text-sm text-white">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
+                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
+                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
+                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
+                                        </h2>
+                                        <p class="font-normal text-sm text-white w-full text-justify">
+                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
                                             doloremque, quisquam architecto possimus odio accusamus...
                                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
+                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
                                         </p>
                                     </div>
                                     <!-- 2 -->
-                                    <div class="grid lg:grid-cols-2">
-                                        <h2 class="font-normal text-sm text-white">2025-03-02 08:00:00 <span
-                                                class="text-[#20DC49] font-normal text-sm">[Port1]</span></h2>
-                                        <p class="font-normal text-sm text-white">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
+                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
+                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
+                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
+                                        </h2>
+                                        <p class="font-normal text-sm text-white w-full text-justify">
+                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
                                             doloremque, quisquam architecto possimus odio accusamus...
                                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
+                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
                                         </p>
                                     </div>
                                     <!-- 3 -->
-                                    <div class="grid lg:grid-cols-2">
-                                        <h2 class="font-normal text-sm text-white">2025-03-02 08:00:00 <span
-                                                class="text-[#20DC49] font-normal text-sm">[Port1]</span></h2>
-                                        <p class="font-normal text-sm text-white">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
+                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
+                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
+                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
+                                        </h2>
+                                        <p class="font-normal text-sm text-white w-full text-justify">
+                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
                                             doloremque, quisquam architecto possimus odio accusamus...
                                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...Lorem ipsum dolor
-                                            sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
+                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
                                         </p>
                                     </div>
                                 </div>
@@ -199,8 +165,6 @@
                         </div>
                     </div>
                 </div>
-
-
                 <!-- Kanan -->
                 <div class="flex w-full lg:w-1/2 mt-5 lg:mt-0">
                     <div class="flex flex-col w-full">