bitinflow/ui
1
0
Fork 0
mirror of https://github.com/bitinflow/ui.git synced 2026-03-13 13:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply to all bitinflow logos

Browse Source
This commit is contained in:
René Preuß
2023-02-19 12:17:51 +01:00
parent fb166d4d7e
commit f3711e2c83
1 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/runtime/components/BitinflowFirstLevelMenu.vue
View File

@@ -9,7 +9,10 @@
<!-- Header --> <!-- Header -->
<header class="bg-white text-black shadow dark:bg-base-800 dark:text-white relative shadow sm:hidden z-10"> <header class="bg-white text-black shadow dark:bg-base-800 dark:text-white relative shadow sm:hidden z-10">
<div class="container flex justify-between items-center p-4"> <div class="container flex justify-between items-center p-4">
<button @click="toggleDarkMode" ref="button"> <button
class="bitinflow-logo"
@click="toggleDarkMode"
>
<img <img
src="https://cdn.bitinflow.com/ui/images/brand/icon-light.svg" src="https://cdn.bitinflow.com/ui/images/brand/icon-light.svg"
class="h-8 hidden dark:block" class="h-8 hidden dark:block"
@@ -78,7 +81,10 @@
> >
<!-- logo --> <!-- logo -->
<div class="flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center"> <div class="flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center">
<button @click="toggleDarkMode"> <button
class="bitinflow-logo"
@click="toggleDarkMode"
>
<img <img
src="https://cdn.bitinflow.com/ui/images/brand/icon-light.svg" src="https://cdn.bitinflow.com/ui/images/brand/icon-light.svg"
class="h-8 w-auto" class="h-8 w-auto"
@@ -146,16 +152,19 @@ export default {
this.count++; this.count++;
if (this.count % 4 === 0) { if (this.count % 4 === 0) {
console.log('rotate'); console.log('rotate');
this.$refs.button.classList.add('rotate-360'); const buttons = document.querySelectorAll('.bitinflow-logo');
this.$refs.button.classList.add('transition-transform'); buttons.forEach((button) => {
this.$refs.button.classList.add('duration-500'); button.classList.add('rotate-360');
button.classList.add('transition-transform');
button.classList.add('duration-500');
setTimeout(() => { setTimeout(() => {
// remove all classes // remove all classes
this.$refs.button.classList.remove('rotate-360'); button.classList.remove('rotate-360');
this.$refs.button.classList.remove('transition-transform'); button.classList.remove('transition-transform');
this.$refs.button.classList.remove('duration-500'); button.classList.remove('duration-500');
}, 500); }, 500);
});
} }
document.body.classList.toggle('dark') document.body.classList.toggle('dark')
} }