make dashboard layout

website/src/App.tsx

@@ -1,24 +1,66 @@
-import { A } from "@solidjs/router";
+import { A, useLocation } from "@solidjs/router";
-import { JSX } from "solid-js";
+import { For, JSX } from "solid-js";
 import SettingIcon from "./icons/SettingIcon";
+import HomeIcon from "./icons/HomeIcon";
+import ArchiveIcon from "./icons/ArchiveIcon";
+import ClockIcon from "./icons/ClockIcon";
 
 export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
+  const location = useLocation();
+
+  const menus = [
+    {
+      path: "/",
+      title: "Dashboard",
+      icon: HomeIcon,
+    },
+    {
+      path: "/pengujian",
+      title: "Pengujian",
+      icon: ArchiveIcon,
+    },
+    {
+      path: "/histori",
+      title: "Histori",
+      icon: ClockIcon,
+    },
+    {
+      path: "/pengaturan",
+      title: "Pengaturan",
+      icon: SettingIcon,
+    },
+  ];
+
   return (
-    <div class="min-h-screen bg-gray-50">
+    <div class="min-h-screen bg-gray-50 flex flex-col text-gray-700">
-      <div class="fixed top-0 left-0 bottom-0 z-20 bg-white w-72 lg:block hidden shadow h-screen"></div>
+      <nav class="sticky top-0 left-0 right-0 z-20 bg-white w-full flex items-center justify-between h-[70px] shadow-sm px-5">
-      <div class="lg:ml-72">
+        <div class="text-xl font-medium uppercase">
-        <nav class="bg-white w-full flex items-center justify-between h-20 shadow-sm px-5">
+          <span class="text-primary">Ferm</span>onitor
-          <div class="text-xl font-medium uppercase">Fermonitor</div>
-          <A href="/setting">
-            <SettingIcon class="w-7 h-7" />
-          </A>
-        </nav>
-        <div class="p-5">
-          <div>
-            <A href="/">Home</A> |<A href="/about">About</A>
-          </div>
-          {props.children}
         </div>
+        <A href="/pengaturan">
+          <SettingIcon class="w-6 h-6" />
+        </A>
+      </nav>
+      <div class="grow relative">
+        <div class="absolute top-0 left-0 w-72 bg-white shadow-sm h-full px-8">
+          <div class="mt-10">
+            <For each={menus}>
+              {(item) => (
+                <A
+                  href={item.path}
+                  class={
+                    "flex mb-3 items-center transition " +
+                    (location.pathname == item.path ? "text-primary" : "")
+                  }
+                >
+                  <item.icon class="w-5 h-5 mr-3"></item.icon>
+                  {item.title}
+                </A>
+              )}
+            </For>
+          </div>
+        </div>
+        <div class="p-5 lg:ml-72">{props.children}</div>
       </div>
     </div>
   );

website/src/icons/ArchiveIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+      />
+    </svg>
+  );
+}

website/src/icons/ClockIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+}

website/src/icons/HomeIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}

website/tailwind.config.js

@@ -5,7 +5,11 @@ export default {
     './src/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#4784f5'
+      }
+    },
   },
   plugins: [],
 }