feat(ui): add icons to main menu

internal/template/templates/common/layout.html

@@ -85,20 +85,20 @@
                         aria-label="{{ t "menu.unread" }}, {{ plural "page.unread_entry_count" .countUnread .countUnread }}"
                         {{ end }}
                     >
-                        {{ t "menu.unread" }}
+                        {{ icon "entries" }}{{ t "menu.unread" }}
                         {{ if gt .countUnread 0 }}
                         <span class="unread-counter-wrapper" aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
                         {{ end }}
                     </a>
                 </li>
                 <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
-                    <a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
+                    <a href="{{ route "starred" }}" data-page="starred">{{ icon "star" }}{{ t "menu.starred" }}</a>
                 </li>
                 <li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
-                    <a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
+                    <a href="{{ route "history" }}" data-page="history">{{ icon "history" }}{{ t "menu.history" }}</a>
                 </li>
                 <li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
-                    <a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
+                    <a href="{{ route "feeds" }}" data-page="feeds">{{ icon "feeds" }}{{ t "menu.feeds" }}
                       {{ if gt .countErrorFeeds 0 }}
                           <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
                       {{ end }}
@@ -108,17 +108,17 @@
                     </a>
                 </li>
                 <li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
-                    <a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
+                    <a href="{{ route "categories" }}" data-page="categories">{{ icon "categories" }}{{ t "menu.categories" }}</a>
                 </li>
                 <li {{ if eq .menu "search" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "/" }}">
-                    <a href="{{ route "search" }}" data-page="search">{{ t "menu.search" }}</a>
+                    <a href="{{ route "search" }}" data-page="search">{{ icon "search" }}{{ t "menu.search" }}</a>
                 </li>
                 <li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
-                    <a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
+                    <a href="{{ route "settings" }}" data-page="settings">{{ icon "settings" }}{{ t "menu.settings" }}</a>
                 </li>
                 {{ if not hasAuthProxy }}
                     <li>
-                        <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
+                        <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ icon "logout" }}{{ t "menu.logout" }}</a>
                     </li>
                 {{ end }}
             </ul>

internal/ui/static/bin/sprite.svg

@@ -200,4 +200,19 @@ Source: https://github.com/tabler/tabler-icons
         <circle cx="18.5" cy="18.5" r="1.5"></circle>
         <circle cx="8.5" cy="15.5" r="4.5"></circle>
     </symbol>
+    <symbol id="icon-history" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M12 8l0 4l2 2" />
+        <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
+    </symbol>
+    <symbol id="icon-logout" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
+        <path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" />
+    </symbol>
+    <symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+        <path d="M21 21l-6 -6" />
+    </symbol>
 </svg>

internal/ui/static/css/common.css

@@ -175,8 +175,9 @@ a:hover {
     white-space: nowrap;
 }
 
+#header-menu .icon,
 .page-header ul a .icon {
-    padding-bottom: 2px;
+    margin-bottom: 2px;
 }
 
 .page-header-action-form {
@@ -239,7 +240,7 @@ a:hover {
 
 #btn-add-to-home-screen {
     text-decoration: none;
-    line-height: 30px;
+    height: 30px;
     color: #fff;
     background-color: transparent;
     border: 0;
@@ -282,13 +283,13 @@ a:hover {
 }
 
 /* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
-@media (min-width: 620px) and (max-width: 830px) {
+@media (min-width: 620px) and (max-width: 850px) {
     .logo {
         display: none;
     }
 }
 
-@media (min-width: 830px) {
+@media (min-width: 850px) {
     .logo {
         padding-right: 8px;
     }
@@ -297,7 +298,7 @@ a:hover {
 @media (min-width: 620px) {
     body {
         margin: auto;
-        max-width: 820px;
+        max-width: 900px; /* Wide enough to display the logo and the menu one a single row for any languages */
     }
 
     .header {
@@ -306,14 +307,13 @@ a:hover {
 
     .header li {
         display: inline-block;
-        padding: 0 12px 0 0;
+        padding: 0 5px 0 0;
         line-height: normal;
         border: none;
         font-size: 1.0em;
     }
 
     .header nav {
-        align-items: end;
         flex-direction: row;
     }
 
@@ -931,9 +931,9 @@ article.category-has-unread {
 /* Icons */
 .icon,
 .icon-label {
-    vertical-align: middle;
+    vertical-align: text-bottom;
     display: inline-block;
-    padding-right: 2px;
+    margin-right: 2px;
 }
 
 .icon {