b278b8a23a
Move sidebar collapse toggle to mid-height floating circle button, use LOGO_CARRE.png when collapsed, make timer button circular when collapsed, reduce app bar height to 60px max. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
953 B
Vue
30 lines
953 B
Vue
<template>
|
|
<button
|
|
class="flex items-center justify-center gap-2 text-sm font-semibold text-white transition"
|
|
:class="[
|
|
timerStore.isRunning
|
|
? 'bg-[#F18619] hover:bg-[#d97314]'
|
|
: 'bg-primary-500 hover:bg-primary-600',
|
|
collapsed ? 'mx-auto h-10 w-10 rounded-full' : 'w-full rounded-md px-4 py-2'
|
|
]"
|
|
:title="timerStore.isRunning ? 'Arrêter le timer' : 'Démarrer un timer'"
|
|
@click="timerStore.isRunning ? timerStore.stop() : timerStore.start()"
|
|
>
|
|
<Icon
|
|
:name="timerStore.isRunning ? 'mdi:stop' : 'mdi:play'"
|
|
:size="collapsed ? '20' : '16'"
|
|
/>
|
|
<span v-if="!collapsed" class="font-mono tracking-wide">
|
|
{{ timerStore.elapsedFormatted }}
|
|
</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
collapsed: boolean
|
|
}>()
|
|
|
|
const timerStore = useTimerStore()
|
|
</script>
|