im trying to make admin dashboard page, i use vue3 and tailwind,flowbite, and vue-flowbite. I Manage to make it like this
but i notice something there's scrollball in the bottom of the page, when i check it, something was wrong it become like this
i dont know what's wrong, there's some gap and when the screen is smaller the gap become even bigger. here the code:
component SideBar.vue
<template>
<div
class="w-72 flex flex-col sticky top-0 min-h-screen items-center bg-white"
>
<div class="w-full sticky top-0">
<img
alt="bibaliLogoWhite"
:src="require(`@/assets/bibaliBg.png`)"
class="w-24 mt-7 mx-auto"
/>
<div
class="mt-10 flex flex-col items-end space-y-3 text-[#333333] w-full"
>
<router-link
to="/dashboard/admin"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>Manage Admin</p>
<i class="fas fa-user-shield mt-1 mr-6 ml-3"></i>
</router-link>
<router-link
to="/dashboard/karyawan"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>Manage Karyawan</p>
<i class="fas fa-user-group mt-1 mr-6 ml-3"></i>
</router-link>
<router-link
to="/dashboard/nilai-karyawan"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>Nilai Karyawan</p>
<i class="fas fa-chart-line mt-1 mr-6 ml-3"></i>
</router-link>
<router-link
to="/dashboard/spk"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>SPK</p>
<i class="fas fa-calculator mt-1 mr-6 ml-3"></i>
</router-link>
<router-link
to="/dashboard/ewa"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>EWA</p>
<i class="fas fa-hand-holding-dollar mt-1 mr-6 ml-3"></i>
</router-link>
<router-link
to="/dashboard/news"
class="flex w-[200px] a h-full rounded-l-full flex-row justify-end py-2"
>
<p>News</p>
<i class="fa-regular fa-newspaper mt-1 mr-6 ml-3"></i>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SideBar",
};
</script>
<style scoped>
a:hover {
color: #ffffff;
background: linear-gradient(to right, #bb0c06 0%, #fb2f01 35%, #ff8f63 100%);
transition-duration: 0.5s;
}
a.router-link-active {
color: #ffffff;
background: linear-gradient(to right, #bb0c06 0%, #fb2f01 35%, #ff8f63 100%);
transition-duration: 0.5s;
}
.bg-custom {
background: rgb(251, 47, 1);
background: linear-gradient(
266deg,
rgba(251, 47, 1, 1) 60%,
rgba(255, 143, 99, 1) 100%
);
}
</style>
and this is component NavBar.vue
<template>
<div class="h-16 bg-red-primary z-50 drop-shadow-lg">
<dropdown placement="bottom" class="float-right rounded-3xl z-50 mt-1">
<template #trigger>
<div
class="flex mr-5 cursor-pointer mb-3 hover:bg-red-primary-600 rounded-2xl justify-center text-white"
>
<div class="flex flex-col mt-2 px-2 pb-1">
<div>Roland Brilianto</div>
<div>Jabatan</div>
</div>
<i class="fa-solid fa-caret-down fa-lg my-auto ml-5 px-2 pb-1"></i>
</div>
</template>
<div class="p-2 tex-right z-50">
<div class="hover:bg-slate-100 w-24 py-2 pl-2 cursor-pointer">
<i class="fa-regular fa-user fa-lg mr-2"></i>
Profile
</div>
<div class="hover:bg-slate-100 w-24 py-2 pl-2 cursor-pointer">
<i class="fa-solid fa-arrow-right-from-bracket fa-lg"></i>
Logout
</div>
</div>
</dropdown>
</div>
</template>
<script>
import { Dropdown } from "flowbite-vue";
export default {
components: {
Dropdown,
},
};
</script>
<style>
.tes {
color: #f3f3f3;
}
</style>
and there is a folder called Dashboard where i put all the components together, here is the index.vue
<template>
<div class="flex">
<side-bar />
<div class="flex flex-col w-full">
<nav-bar class="sticky top-0" />
<router-view></router-view>
</div>
</div>
</template>
<script>
import SideBar from "@/components/SideBar.vue";
import NavBar from "@/components/NavBar.vue";
export default {
name: "DashboardIndex",
components: {
SideBar,
NavBar,
},
};
</script>
and in that folder too contain another file called ManageAdmin.vue and here is the code:
<template>
<div class="text-center">testest</div>
<div class="mx-20 bg-white rounded-xl">
<div class="flex flex-row justify-between py-3">
<div class="flex flex-row pl-3">
<label
for="countries"
class="block mb-2 mr-2 my-auto text-sm font-medium text-gray-900 dark:text-white"
>Show</label
>
<select
id="countries"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<label
for="countries"
class="block mb-2 mr-2 ml-2 my-auto text-sm font-medium text-gray-900 dark:text-white"
>Entries</label
>
</div>
<div>
<button-primary class="mr-7 py-2 px-2">Add Karyawan</button-primary>
</div>
</div>
<div
class="relative overflow-x-auto max-w-[950px] mx-auto overflow-y-auto max-h-[400px] shadow-md sm:rounded-lg"
>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs text-white sticky top-0 uppercase bg-red-primary dark:bg-gray-700 dark:text-gray-400"
>
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input
id="checkbox-all-search"
type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label for="checkbox-all-search" class="sr-only"
>checkbox</label
>
</div>
</th>
<th scope="col" class="px-6 py-3">Product name</th>
<th scope="col" class="px-6 py-3">Color</th>
<th scope="col" class="px-6 py-3">Category</th>
<th scope="col" class="px-6 py-3">Accesories</th>
<th scope="col" class="px-6 py-3">Available</th>
<th scope="col" class="px-6 py-3">Price</th>
<th scope="col" class="px-6 py-3">Weight</th>
<th scope="col" class="px-6 py-3">Action</th>
</tr>
</thead>
<tbody>
<tr
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
>
<td class="w-4 p-4">
<div class="flex items-center">
<input
id="checkbox-table-search-1"
type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label for="checkbox-table-search-1" class="sr-only"
>checkbox</label
>
</div>
</td>
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Apple MacBook Pro 17"
</th>
<td class="px-6 py-4">Silver</td>
<td class="px-6 py-4">Laptop</td>
<td class="px-6 py-4">Yes</td>
<td class="px-6 py-4">Yes</td>
<td class="px-6 py-4">$2999</td>
<td class="px-6 py-4">3.0 lb.</td>
<td class="flex items-center px-6 py-4 space-x-3">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>Edit</a
>
<a
href="#"
class="font-medium text-red-600 dark:text-red-500 hover:underline"
>Remove</a
>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex flex-col items-center pb-2">
<!-- Help text -->
<span class="text-sm text-gray-700 dark:text-gray-400">
Showing
<span class="font-semibold text-gray-900 dark:text-white">1</span> to
<span class="font-semibold text-gray-900 dark:text-white">10</span> of
<span class="font-semibold text-gray-900 dark:text-white">100</span>
Entries
</span>
<div class="inline-flex mt-2 xs:mt-0">
<!-- Buttons -->
<button
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-primary rounded-l hover:bg-red-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
clip-rule="evenodd"
></path>
</svg>
Prev
</button>
<button
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-primary border-0 border-l border-gray-700 rounded-r hover:bg-red-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
Next
<svg
aria-hidden="true"
class="w-5 h-5 ml-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</div>
</template>
<script>
import ButtonPrimary from "@/components/ButtonPrimary.vue";
export default {
mounted() {},
components: {
ButtonPrimary,
},
};
</script>
<style></style>
and of course on top of everything there's app.vue here's the code:
<template>
<div
id="app"
class="bg-red-secondary min-h-screen"
:style="{
'background-image': 'url(' + require(`@/assets/bibaliBg-black.png`) + ')',
}"
>
<router-view />
</div>
</template>
<style>
#app {
font-family: "Rubik", sans-serif;
}
</style>
these thing is really hard for me i've been trying to fixed it for like 5 hours and i can't. Please help me i will be really grateful for your help. sorry for the long code because i dont know where it went wrong. thanks
