marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

topbar button

Browse Source
This commit is contained in:
Marco Crapts
2023-04-29 11:35:16 +02:00
parent dc6f10afd8
commit b7055eb8d6
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/TopBar.vue
View File

@@ -11,15 +11,33 @@ const emit = defineEmits<{
</script> </script>
<template> <template>
<div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"> <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
<div class="mx-auto flex w-full max-w-app items-center gap-3 text-white"> <div
<div class="flex w-sidebar items-center pl-3"> class="w-in mx-auto flex w-full max-w-app items-center gap-3 text-white"
>
<div
class="flex w-sidebar items-center pl-3"
:class="sideBarCollapsed && 'w-fit'"
>
<Hamburger <Hamburger
:side-bar-collapsed="props.sideBarCollapsed" :side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')" @toggle-side-bar="emit('toggleSideBar')"
/> />
<Logo class="ml-auto text-2xl" /> <Logo class="ml-auto px-3 text-2xl" />
</div>
<div class="mr-3 flex h-full flex-1 items-center gap-3 py-2.5">
<input
type="text"
placeholder="Search for notes"
class="h-full flex-1 rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
/>
<button>+</button>
<button>Sign in</button>
</div> </div>
<div class="mr-3 flex-1 bg-gray-800">hey</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="postcss">
button {
@apply h-full flex items-center rounded-md border-[1px] border-solid border-white bg-primary px-3 py-1 text-sm font-medium text-white hover:bg-white hover:text-black;
}
</style>