feat(ui) : improve sidebar collapse button, logo and top nav

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>

frontend/components/ui/AppTopNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="border-b border-neutral-200 bg-primary-500 p-3 text-white sm:p-5">
+  <header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
     <div class="flex h-full items-center justify-between">
       <button
         class="rounded-md p-2 text-white hover:bg-primary-600 transition-colors lg:hidden"

frontend/components/ui/SidebarTimer.vue

@@ -1,11 +1,11 @@
 <template>
     <button
-        class="flex w-full items-center justify-center gap-2 rounded-md py-2 text-sm font-semibold text-white transition"
+        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 ? 'px-2' : 'px-4'
+            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()"

frontend/layouts/default.vue

@@ -17,7 +17,7 @@
                     ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
                 ]"
             >
-                <div class="flex items-center justify-between overflow-hidden" :class="sidebarIsCollapsed ? 'p-2 justify-center' : ''">
+                <div class="flex items-center overflow-hidden" :class="sidebarIsCollapsed ? 'justify-center p-3' : 'justify-between'">
                     <img
                         v-if="!sidebarIsCollapsed"
                         src="/malio.png"
@@ -26,9 +26,9 @@
                     />
                     <img
                         v-else
-                        src="/malio.png"
+                        src="/LOGO_CARRE.png"
                         alt="Logo"
-                        class="h-8 w-8 object-cover object-left"
+                        class="w-[46px] h-[55px]"
                     />
                     <button
                         class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
@@ -90,7 +90,7 @@
                     </template>
                     <SidebarLink
                         to="/time-tracking"
-                        icon="mdi:clock-outline"
+                        icon="mdi:calendar-edit-outline"
                         label="Suivi de temps"
                         :collapsed="sidebarIsCollapsed"
                         @click="ui.closeMobileSidebar()"
@@ -108,19 +108,21 @@
                     <SidebarTimer :collapsed="sidebarIsCollapsed" />
                 </div>
 
-                <div class="flex flex-col gap-2 items-center p-4">
+                <div class="flex items-center justify-center p-4">
                     <p v-if="!sidebarIsCollapsed" class="font-bold">v {{ version }}</p>
-                    <button
-                        class="hidden items-center justify-center rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:flex"
-                        :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
-                        @click="ui.toggleSidebar()"
-                    >
-                        <Icon
-                            :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
-                            size="20"
-                        />
-                    </button>
                 </div>
+
+                <!-- Collapse toggle button centered vertically on the sidebar edge -->
+                <button
+                    class="absolute top-1/2 -right-4 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-400 shadow-sm hover:text-neutral-700 transition-colors lg:flex"
+                    :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
+                    @click="ui.toggleSidebar()"
+                >
+                    <Icon
+                        :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
+                        size="18"
+                    />
+                </button>
             </aside>
 
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">