card view, minor css bugfixes

vue/src/components/AppNav.vue

@@ -4,7 +4,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useFeeds } from '@/composables/useFeeds'
 
 const router = useRouter()
-const { sync, showModal, viewMode, toggleViewMode, markAllRead } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead } = useFeeds()
 
 const menuOpen = ref(false)
 
@@ -42,6 +42,11 @@ function handleToggleViewMode() {
   toggleViewMode()
   closeMenu()
 }
+
+function handleToggleLayout() {
+  toggleLayout()
+  closeMenu()
+}
 </script>
 
 <template>
@@ -74,6 +79,9 @@ function handleToggleViewMode() {
           <button class="app-nav__menu-item" type="button" @click="handleToggleViewMode">
             {{ viewMode === 'list' ? 'Article view' : 'List view' }}
           </button>
+          <button v-if="viewMode === 'list'" class="app-nav__menu-item" type="button" @click="handleToggleLayout">
+            {{ layout === 'list' ? 'Card layout' : 'List layout' }}
+          </button>
           <button class="app-nav__menu-item" type="button" @click="handleSync">Sync</button>
           <button class="app-nav__menu-item" type="button" @click="handleMarkAllRead">Mark all as read</button>
           <button class="app-nav__menu-item" type="button" @click="openAddModal">Add RSS</button>