improving main menu for mobile devices

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/Menu.svelte

@@ -10,6 +10,7 @@ import TimeRecorder from './TimeRecorder.svelte';
 let key = $state(null);
 const router  = useTinyRouter();
 const modules = $state([]);
+let expand = $state(false);
 
 async function fetchModules(){
     const url  = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/user/modules`;
@@ -27,6 +28,7 @@ async function fetchModules(){
 
 function onclick(e){
     e.preventDefault();
+    expand = false;
     let href = e.target.getAttribute('href');
     if (href) router.navigate(href);
     return false;
@@ -47,11 +49,12 @@ onMount(fetchModules);
     }
 </style>
 
-<nav>
+<nav class={expand?"":"collapsed"}>
     <form onsubmit={search}>
         <input type="text" bind:value={key} />
         <button type="submit">{t('search')}</button>
     </form>
+	<button class="symbol" onclick={e => expand = !expand}></button>
     <a href="/user"     {onclick} class="user">{t('users')}</a>
     <a href="/company"  {onclick} class="company">{t('companies')}</a>
     <a href="/project"  {onclick} class="project">{t('projects')}</a>
@@ -72,7 +75,7 @@ onMount(fetchModules);
     {#if module.name.trim()}<a href={module.url}>{module.name}</a>{/if}
     {/each}
     {#if user.name }
-    <a onclick={logout}>{t('logout_user',{user:user.name})}</a>
+    <a class="logout" onclick={logout}>{t('logout_user',{user:user.name})}</a>
     {/if}
     <TimeRecorder />
 </nav>