add hover color changes, remove bg from nav

This commit is contained in:
HorizonCode 2024-01-04 16:23:01 +01:00
parent 63ef04e68d
commit 8ad3844eae

View File

@ -1,24 +1,15 @@
<script>
import {
Navbar,
NavBrand,
NavLi,
NavUl,
NavHamburger,
Avatar,
Dropdown,
DropdownItem,
DropdownHeader,
DropdownDivider
DropdownDivider,
} from "flowbite-svelte";
import ezppLogo from '../public/favicon.png';
let count = 0;
import ezppLogo from "../public/favicon.png";
</script>
<div
class="p-2 bg-gray-950 flex flex-row justify-between items-center rounded-lg"
>
<div class="p-2 flex flex-row justify-between items-center">
<div class="flex flex-row items-center">
<img src={ezppLogo} class="w-12 h-12 mr-2" />
<span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
@ -37,25 +28,24 @@
>me@horizonco.de</span
>
</DropdownHeader>
<DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800"
<DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
>Profile</DropdownItem
>
<DropdownDivider />
<DropdownItem class="border-0 !bg-gray-700 active:!bg-gray-800"
<DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
>Sign out</DropdownItem
>
</Dropdown>
</div>
<main>
<!-- <button class="btn" on:click={() => (count += 1)}>Count: {count}</button> -->
</main>
<main class="border border-gray-700 rounded-lg"></main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
@ -73,10 +63,4 @@
border-bottom: 1px solid #353535;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>