[#SIRH-25] Version mobile (#16)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #16
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/components/AppTopNav.vue

@@ -1,7 +1,14 @@
 <template>
-    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
-        <div class="flex h-full items-center justify-end">
-            <div class="flex gap-6 text-xl text-white">
+    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 px-4 py-3 text-white lg:p-5">
+        <div class="flex h-full items-center justify-between lg:justify-end">
+            <button
+                type="button"
+                class="rounded-md p-1 text-white hover:text-neutral-200 lg:hidden"
+                @click="$emit('toggleSidebar')"
+            >
+                <Icon name="mdi:menu" size="28"/>
+            </button>
+            <div class="flex gap-4 text-xl text-white lg:gap-6">
                 <div v-if="isAdmin" ref="bellRoot" class="relative">
                     <button type="button" class="relative self-center cursor-pointer flex items-center" @click="toggleNotifications">
                         <Icon name="mdi:bell-plus" size="36"/>
@@ -15,8 +22,8 @@
 
                     <div
                         v-if="isNotificationsOpen"
-                        class="fixed right-[20px] z-30 w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg"
-                        :style="{ top: `${navbarBottom + 20}px` }"
+                        class="fixed right-2 z-30 w-[calc(100vw-1rem)] max-w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg lg:right-[20px]"
+                        :style="{ top: `${navbarBottom + 10}px` }"
                     >
                         <div class="px-3 pt-3 pb-6 text-xl font-semibold">
                             Notifications
@@ -66,7 +73,7 @@
                 <div ref="userMenuRoot" class="relative flex gap-4">
                     <button type="button" class="flex items-center gap-4 cursor-pointer" @click="toggleUserMenu">
                         <Icon name="mdi:account-circle-outline" class="self-center" size="36"/>
-                        <p class="self-center">{{ user?.username }}</p>
+                        <p class="hidden self-center sm:block">{{ user?.username }}</p>
                     </button>
                     <div
                         v-if="isUserMenuOpen"
@@ -103,6 +110,10 @@ defineProps<{
     user?: User
 }>()
 
+defineEmits<{
+    (event: 'toggleSidebar'): void
+}>()
+
 const formatTimeAgo = (dateString: string): string => {
     const date = new Date(dateString)
     const now = new Date()