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

update hamburger

Browse Source
This commit is contained in:
Marco Crapts
2023-05-12 19:28:37 +02:00
parent 831aec6d2e
commit 5de21dd553
2 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Hamburger.vue
View File

@@ -8,18 +8,40 @@ const emit = defineEmits<{
}>() }>()
</script> </script>
<template> <template>
<button <label class="swap-rotate swap btn-ghost btn-sm btn-circle btn">
class="hamburger hamburger--spin-r" <input
:class="{ 'is-active': !props.sideBarCollapsed }" type="checkbox"
type="button" @click="emit('toggleSideBar')"
@click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed"
> />
<span class="hamburger-box"> <svg
<span class="hamburger-inner"></span> class="swap-off fill-current"
</span> xmlns="http://www.w3.org/2000/svg"
</button> width="24"
height="24"
viewBox="0 0 512 512"
>
<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
</svg>
<svg
class="swap-on fill-current"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 512 512"
>
<polygon
points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
/>
</svg>
</label>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.swap > * {
transition-duration: 0.2s;
}
</style>
<!--
$hamburger-layer-color: white; $hamburger-layer-color: white;
$hamburger-layer-width: 25px; $hamburger-layer-width: 25px;
$hamburger-layer-height: 3px; $hamburger-layer-height: 3px;
@@ -95,4 +117,4 @@ button.hamburger {
.hamburger-box { .hamburger-box {
display: block; display: block;
} }
</style> </style> -->

4
src/components/TopBar.vue
View File

@@ -10,11 +10,11 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
toggleSideBar: [] toggleSideBar: []
}>() }>()
</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="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"> <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
<div class="flex pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"> <div class="flex pl-3 items-center" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
<Hamburger <Hamburger
:side-bar-collapsed="props.sideBarCollapsed" :side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')" @toggle-side-bar="emit('toggleSideBar')"