refactor(web): scroll resources container

overextended · Mar 19, 2023 · 4cbcd57 · 4cbcd57
1 parent 7b2b440
commit 4cbcd57
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/web/src/index.css b/web/src/index.css
@@ -13,3 +13,19 @@
   width: 100vw;
   height: 100vh;
 }
+
+::-webkit-scrollbar {
+  width: 2px;
+}
+
+::-webkit-scrollbar-track {
+  background: #25262b;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #909296;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a6a7ab;
+}
diff --git a/web/src/pages/root/Root.svelte b/web/src/pages/root/Root.svelte
@@ -3,14 +3,31 @@
   import { IconSearch } from '@tabler/icons-svelte';
   import { router } from 'tinro';
 
-  const resources = ['ox_core', 'oxmysql', 'ox_inventory', 'ox_doorlock', 'ox_lib', 'ox_vehicleshop', 'ox_target'];
+  const resources = [
+    'ox_core',
+    'oxmysql',
+    'ox_inventory',
+    'ox_doorlock',
+    'ox_lib',
+    'ox_vehicleshop',
+    'ox_target',
+    'ox_core',
+    'oxmysql',
+    'ox_inventory',
+    'ox_doorlock',
+    'ox_lib',
+    'ox_vehicleshop',
+    'ox_target',
+  ];
 </script>
 
 <div class="p-4 w-full h-full flex justify-between gap-4">
-  <div class="bg-dark-700 p-4 flex flex-col w-2/3 rounded-md">
-    <p class="text-2xl mb-4">Resources</p>
-    <Input icon={IconSearch} />
-    <div class="flex flex-col gap-3 mt-6">
+  <div class="bg-dark-700 p-4 pr-0 flex flex-col w-2/3 rounded-md">
+    <div class="pr-4">
+      <p class="text-2xl mb-4">Resources</p>
+      <Input icon={IconSearch} />
+    </div>
+    <div class="flex flex-col gap-3 mt-6 overflow-y-auto pr-4">
       {#each resources as resource}
         <button
           on:click={() => router.goto(`/${resource}`)}