improving menu CSS

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

frontend/src/Components/Menu.svelte

@@ -52,19 +52,19 @@ onMount(fetchModules);
         <input type="text" bind:value={key} />
         <button type="submit">{t('search')}</button>
     </form>
-    <a href="/user"     {onclick}>{t('users')}</a>
-    <a href="/company"  {onclick}>{t('companies')}</a>
-    <a href="/project"  {onclick}>{t('projects')}</a>
-    <a href="/task"     {onclick}>{t('tasks')}</a>
-    <a href="/tags"     {onclick}>{t('tags')}</a>
-    <a href="/document" {onclick}>{t('documents')}</a>
-    <a href="/bookmark" {onclick}>{t('bookmarks')}</a>
-    <a href="/notes"    {onclick}>{t('notes')}</a>
-    <a href="/files"    {onclick}>{t('files')}</a>
-    <a href="/time"     {onclick}>{t('timetracking')}</a>
-    <a href="/wiki"     {onclick}>{t('wiki')}</a>
-    <a href="/contact"  {onclick}>{t('contacts')}</a>
-    <a href="/stock"    {onclick}>{t('stock')}</a>
+    <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>
+    <a href="/task"     {onclick} class="task">{t('tasks')}</a>
+    <a href="/tags"     {onclick} class="tags">{t('tags')}</a>
+    <a href="/document" {onclick} class="doc">{t('documents')}</a>
+    <a href="/bookmark" {onclick} class="mark">{t('bookmarks')}</a>
+    <a href="/notes"    {onclick} class="note">{t('notes')}</a>
+    <a href="/files"    {onclick} class="file">{t('files')}</a>
+    <a href="/time"     {onclick} class="time">{t('timetracking')}</a>
+    <a href="/wiki"     {onclick} class="wiki">{t('wiki')}</a>
+    <a href="/contact"  {onclick} class="contact">{t('contacts')}</a>
+    <a href="/stock"    {onclick} class="stock">{t('stock')}</a>
     {#if user.id == 2}
     <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('tutorial')}</a>
     {/if}

web/src/main/resources/web/css/default.css

@@ -54,12 +54,90 @@ footer {
 }
 
 nav {
-  position: sticky;
-  z-index: 100;
-  top: 0;
-  padding: 5px;
-  margin: 0 0 10px 0;
-  border-bottom: 1px solid;
+    position: sticky;
+    z-index: 100;
+    top: 0;
+    padding: 5px;
+    margin: 0 0 10px 0;
+    border-bottom: 1px solid;
+}
+
+nav a::before{
+    font-family: awesome;
+    font-size: 20px;
+    font-weight: normal;
+}
+
+nav a.user::before {
+    content: " ";
+}
+
+nav a.company::before {
+    content: " ";
+}
+
+nav a.contact::before{
+    content: " ";
+}
+
+nav a.doc::before {
+    content: " "
+}
+
+nav a.file::before{
+    content: " ";
+}
+
+nav a.mark::before {
+    content: " ";
+}
+
+nav a.note::before {
+    content: " ";
+}
+
+nav a.project::before {
+    content: " ";
+}
+
+nav a.stock::before{
+    content: " "
+}
+
+nav a.tags::before {
+    content: " "
+}
+
+nav a.task::before {
+    content: " ";
+}
+
+nav a.time::before{
+    content: " ";
+}
+
+nav a.wiki::before{
+    content: " ";
+}
+
+nav a.company,
+nav a.contact,
+nav a.doc,
+nav a.file,
+nav a.mark,
+nav a.note,
+nav a.project,
+nav a.stock,
+nav a.tags,
+nav a.task,
+nav a.time,
+nav a.user,
+nav a.wiki{
+    font-size: 0;
+}
+
+nav a:hover{
+    font-size: inherit;
 }
 
 td, tr{