fix(admin-ux): hide navigation submenus in details panel for easier scanning

app/Resources/icons/rocket-tilted.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g>
+      <path fill="none" d="M0 0h24v24H0z"/>
+      <path d="m4.66 14.3 4.95 4.95a6.52 6.52 0 0 1-4.95 0 6.52 6.52 0 0 1 0-4.96Zm10.39 3.04-.19 3.02-1.36 1.36L2.18 10.41l1.37-1.37 3.01-.19 4.1-4.1c2.47-2.46 6.34-2.79 9.59-1.1 1.7 3.26 1.37 7.12-1.1 9.58l-4.1 4.1ZM13.5 10.4a2 2 0 1 0 2.83-2.83 2 2 0 0 0-2.83 2.83Z"/>
+    </g>
+</svg>

app/Resources/icons/star-smile.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <g>
-        <path fill="none" d="M0 0h24v24H0z"/>
-        <path d="M12 .5l4.226 6.183 7.187 2.109-4.575 5.93.215 7.486L12 19.69l-7.053 2.518.215-7.486-4.575-5.93 7.187-2.109L12 .5zM10 12H8a4 4 0 0 0 7.995.2L16 12h-2a2 2 0 0 1-3.995.15L10 12z"/>
-    </g>
-</svg>

app/Resources/styles/colors.css

@@ -9,6 +9,7 @@
     --color-background-elevated: 0 0% 100%;
     --color-background-base: 173 44% 96%;
     --color-background-navigation: 172 100% 17%;
+    --color-background-navigation-active: 131 100% 12%;
     --color-background-header: 172 100% 17%;
     --color-background-highlight: 111 64% 94%;
     --color-background-backdrop: 0 0% 50%;

modules/Admin/Language/ar/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'الإعدادات',
     'settings-general' => 'العامة',
     'settings-theme' => 'الحلة',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'حسابي',
         'change-password' => 'تغيير الكلمة السرية',

modules/Admin/Language/br/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Arventennoù',
     'settings-general' => 'Hollek',
     'settings-theme' => 'Neuz',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'Ma c\'hont',
         'change-password' => 'Kemmañ ar ger-tremen',

modules/Admin/Language/ca/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Preferències',
     'settings-general' => 'General',
     'settings-theme' => 'Tema',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'El meu compte',
         'change-password' => 'Canviar la contrasenya',

modules/Admin/Language/da/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/de/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Einstellungen',
     'settings-general' => 'Allgemein',
     'settings-theme' => 'Erscheinungsbild',
-    'about' => 'Über',
+    'admin-about' => 'Über',
     'account' => [
         'my-account' => 'Mein Konto',
         'change-password' => 'Passwort ändern',

modules/Admin/Language/el/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Ρυθμίσεις',
     'settings-general' => 'Γενικά',
     'settings-theme' => 'Θέμα',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'Ο λογαριασμός μου',
         'change-password' => 'Αλλαγή κωδικού πρόσβασης',

modules/Admin/Language/en/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/es/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Configuración',
     'settings-general' => 'General',
     'settings-theme' => 'Tema',
-    'about' => 'Acerca de',
+    'admin-about' => 'Acerca de',
     'account' => [
         'my-account' => 'Mi cuenta',
         'change-password' => 'Cambiar contraseña',

modules/Admin/Language/fa/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/fr/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Paramètres',
     'settings-general' => 'Général',
     'settings-theme' => 'Thème',
-    'about' => 'À propos',
+    'admin-about' => 'À propos',
     'account' => [
         'my-account' => 'Mon compte',
         'change-password' => 'Modifier le mot de passe',

modules/Admin/Language/fr2/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/fr_CA/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/fr_trad/Navigation.php

@@ -33,7 +33,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/gd/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/gl/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Axustes',
     'settings-general' => 'Xeral',
     'settings-theme' => 'Decorado',
-    'about' => 'Acerca de',
+    'admin-about' => 'Acerca de',
     'account' => [
         'my-account' => 'A miña conta',
         'change-password' => 'Cambiar contrasinal',

modules/Admin/Language/id/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/it/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/ja/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/ko/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/nl/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/nn-NO/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Innstillingar',
     'settings-general' => 'Generelt',
     'settings-theme' => 'Bunad',
-    'about' => 'Om',
+    'admin-about' => 'Om',
     'account' => [
         'my-account' => 'Kontoen min',
         'change-password' => 'Endre passord',

modules/Admin/Language/oc/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/pl/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Ustawienia',
     'settings-general' => 'Ogólne',
     'settings-theme' => 'Motyw',
-    'about' => 'Informacje',
+    'admin-about' => 'Informacje',
     'account' => [
         'my-account' => 'Moje konto',
         'change-password' => 'Zmień hasło',

modules/Admin/Language/pt-BR/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Confirgurações',
     'settings-general' => 'Geral',
     'settings-theme' => 'Tema',
-    'about' => 'Sobre',
+    'admin-about' => 'Sobre',
     'account' => [
         'my-account' => 'Minha conta',
         'change-password' => 'Alterar senha',

modules/Admin/Language/pt/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/ro/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/ru/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/sk/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Nastavenia',
     'settings-general' => 'Všeobecné',
     'settings-theme' => 'Vzhľad',
-    'about' => 'O',
+    'admin-about' => 'O',
     'account' => [
         'my-account' => 'Môj účet',
         'change-password' => 'Zmeniť heslo',

modules/Admin/Language/sr_Latn/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Podešavanja',
     'settings-general' => 'Opšte',
     'settings-theme' => 'Tema',
-    'about' => 'Osnovni podaci',
+    'admin-about' => 'Osnovni podaci',
     'account' => [
         'my-account' => 'Moj nalog',
         'change-password' => 'Promenite lozinku',

modules/Admin/Language/sv/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Inställningar',
     'settings-general' => 'Allmänt',
     'settings-theme' => 'Tema',
-    'about' => 'Om',
+    'admin-about' => 'Om',
     'account' => [
         'my-account' => 'Mitt konto',
         'change-password' => 'Ändra lösenord',

modules/Admin/Language/uk/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => 'Settings',
     'settings-general' => 'General',
     'settings-theme' => 'Theme',
-    'about' => 'About',
+    'admin-about' => 'About',
     'account' => [
         'my-account' => 'My account',
         'change-password' => 'Change password',

modules/Admin/Language/zh-Hans/Navigation.php

@@ -34,7 +34,7 @@ return [
     'settings' => '设置',
     'settings-general' => '通用',
     'settings-theme' => '主题',
-    'about' => '关于',
+    'admin-about' => '关于',
     'account' => [
         'my-account' => '我的帐户',
         'change-password' => '修改密码',

tailwind.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable */
 const defaultTheme = require("tailwindcss/defaultTheme");
-const { nodeModuleNameResolver } = require("typescript");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,6 +12,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      content: {
+        chevronRightIcon:
+          "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M13.17 12 8.22 7.05l1.42-1.41L16 12l-6.36 6.36-1.42-1.41L13.17 12Z'/%3E%3C/svg%3E%0A\")",
+      },
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
         display: ["Kumbh Sans", ...defaultTheme.fontFamily.sans],
@@ -37,6 +40,8 @@ module.exports = {
         base: "hsl(var(--color-background-base) / <alpha-value>)",
         elevated: "hsl(var(--color-background-elevated) / <alpha-value>)",
         navigation: "hsl(var(--color-background-navigation) / <alpha-value>)",
+        "navigation-active":
+          "hsl(var(--color-background-navigation-active) / <alpha-value>)",
         backdrop: "hsl(var(--color-background-backdrop) / <alpha-value>)",
         header: "hsl(var(--color-background-header) / <alpha-value>)",
         accent: {

themes/cp_admin/_partials/_nav_aside.php

@@ -19,4 +19,4 @@ $isEpisodeArea = isset($podcast) && isset($episode);
                 CP_VERSION,
         ], null, false) ?>
     </footer>
-</aside>
+</aside>

themes/cp_admin/_partials/_nav_menu.php

@@ -0,0 +1,42 @@
+<nav class="flex flex-col flex-1 py-4 overflow-y-auto">
+    <?php foreach ($navigation as $section => $data):
+        $isSectionActive = false;
+        $activeItem = '';
+        foreach ($data['items'] as $item) {
+            if (url_is(route_to($item, $podcastId ?? null, $episodeId ?? null))) {
+                $activeItem = $item;
+                $isSectionActive = true;
+            }
+        }
+        ?>
+    <details <?= $isSectionActive ? 'open="open"' : '' ?> class="<?= $isSectionActive ? 'bg-navigation-active' : '' ?> [&[open]>summary::after]:rotate-90">
+        <summary class="inline-flex items-center w-full px-4 py-2 font-semibold focus:ring-accent focus:ring-inset after:w-5 after:h-5 after:transition-transform after:content-chevronRightIcon after:ml-2 after:opacity-60 after:text-white">
+            <div class="inline-flex items-center mr-auto">
+            <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') ?>
+            <?= lang($langKey . '.' . $section) ?>
+            <?php if (array_key_exists('count', $data)): ?>
+                <a href="<?= route_to($data['count-route'], $podcastId ?? null, $episodeId ?? null) ?>" class="px-2 ml-2 text-xs font-normal rounded-full focus:ring-accent <?= $isSectionActive ? 'bg-navigation' : 'bg-navigation-active' ?>"><?= $data['count'] ?></a>
+                <?php endif; ?>
+            </div>
+            <?php if(array_key_exists('add-cta', $data)): ?>
+                <a href="<?= route_to($data['add-cta'], $podcastId ?? null, $episodeId ?? null)  ?>" class="p-2 rounded-full shadow bg-accent-base focus:ring-accent" title="<?= lang($langKey . '.' . $data['add-cta']) ?>" data-tooltip="bottom">
+                    <?= icon('add') ?>
+                </a>
+            <?php endif; ?>
+        </summary>
+        <ul class="flex flex-col pb-4">
+            <?php foreach ($data['items'] as $item):
+                $isActive = $item === $activeItem;
+                ?>
+            <li class="inline-flex">
+                <a class="relative w-full py-3 pl-14 pr-2 text-sm hover:opacity-100 before:content-chevronRightIcon before:absolute before:-ml-5 before:opacity-0 before:w-5 before:h-5 hover:bg-navigation-active focus:ring-inset focus:ring-accent<?= $isActive
+                        ? ' before:opacity-100 font-semibold inline-flex items-center'
+                        : ' hover:before:opacity-60 focus:before:opacity-60' ?>" href="<?= route_to($item, $podcastId ?? null, $episodeId ?? null) ?>"><?= lang(
+                            $langKey . '.' . $item,
+                        ) ?></a>
+            </li>
+            <?php endforeach; ?>
+        </ul>
+    </details>
+    <?php endforeach; ?>
+</nav>

themes/cp_admin/_sidebar.php

@@ -1,60 +1,59 @@
 <?php declare(strict_types=1);
 
+use App\Models\PageModel;
+use App\Models\PersonModel;
+use App\Models\PodcastModel;
+use Modules\Auth\Models\UserModel;
+
 $navigation = [
     'dashboard' => [
         'icon'  => 'dashboard',
         'items' => ['admin'],
     ],
     'podcasts' => [
-        'icon'  => 'mic',
-        'items' => ['podcast-list', 'podcast-create', 'all-podcast-imports', 'podcast-imports-add'],
+        'icon'        => 'mic',
+        'items'       => ['podcast-list', 'podcast-create', 'all-podcast-imports', 'podcast-imports-add'],
+        'add-cta'     => 'podcast-create',
+        'count-route' => 'podcast-list',
     ],
     'persons' => [
-        'icon'  => 'folder-user',
-        'items' => ['person-list', 'person-create'],
+        'icon'        => 'folder-user',
+        'items'       => ['person-list', 'person-create'],
+        'add-cta'     => 'person-create',
+        'count'       => (new PersonModel())->countAllResults(),
+        'count-route' => 'person-list',
     ],
     'fediverse' => [
-        'icon'  => 'star-smile',
+        'icon'  => 'rocket-tilted',
         'items' => ['fediverse-blocked-actors', 'fediverse-blocked-domains'],
     ],
     'users' => [
-        'icon'  => 'group',
-        'items' => ['user-list', 'user-create'],
+        'icon'        => 'group',
+        'items'       => ['user-list', 'user-create'],
+        'add-cta'     => 'user-create',
+        'count'       => (new UserModel())->countAllResults(),
+        'count-route' => 'user-list',
     ],
     'pages' => [
-        'icon'  => 'pages',
-        'items' => ['page-list', 'page-create'],
-
+        'icon'        => 'pages',
+        'items'       => ['page-list', 'page-create'],
+        'add-cta'     => 'page-create',
+        'count'       => (new PageModel())->countAllResults(),
+        'count-route' => 'page-list',
     ],
     'settings' => [
         'icon'  => 'settings',
-        'items' => ['settings-general', 'settings-theme'],
+        'items' => ['settings-general', 'settings-theme', 'admin-about'],
     ],
-]; ?>
+];
 
-<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
-    <?php foreach ($navigation as $section => $data): ?>
-    <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-accent" type="button">
-            <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') ?>
-            <?= lang('Navigation.' . $section) ?>
-        </button>
-        <ul class="flex flex-col">
-            <?php foreach ($data['items'] as $item): ?>
-                <?php $isActive = url_is(route_to($item)); ?>
-            <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-accent<?= $isActive
-                    ? ' font-semibold opacity-100 inline-flex items-center'
-                    : ' opacity-75' ?>" href="<?= route_to($item) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') . lang(
-                        'Navigation.' . $item,
-                    ) ?></a>
-            </li>
-            <?php endforeach; ?>
-        </ul>
-    </div>
-    <?php endforeach; ?>
-    <a class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-accent" href="<?= route_to('admin-about') ?>">
-        <?= icon('information', 'opacity-60 text-2xl mr-4') ?>
-        <?= lang('Navigation.about') ?>
-    </a>
-</nav>
+if (auth()->user()->can('podcasts.view')) {
+    $navigation['podcasts']['count'] = (new PodcastModel())->countAllResults();
+} else {
+    $navigation['podcasts']['count'] = count(get_user_podcasts(auth()->user()));
+} ?>
+
+<?= view('_partials/_nav_menu', [
+    'navigation' => $navigation,
+    'langKey'    => 'Navigation',
+]) ?>

themes/cp_admin/episode/_sidebar.php

@@ -1,13 +1,14 @@
 <?php declare(strict_types=1);
 
-$podcastNavigation = [
+$episodeNavigation = [
     'dashboard' => [
         'icon'  => 'dashboard',
         'items' => ['episode-view', 'episode-edit', 'episode-persons-manage', 'embed-add'],
     ],
     'clips' => [
-        'icon'  => 'clapperboard',
-        'items' => ['video-clips-list', 'video-clips-create', 'soundbites-list', 'soundbites-create'],
+        'icon'    => 'clapperboard',
+        'items'   => ['video-clips-list', 'video-clips-create', 'soundbites-list', 'soundbites-create'],
+        'add-cta' => 'video-clips-create',
     ],
 ]; ?>
 
@@ -44,20 +45,10 @@ $podcastNavigation = [
         </a>
     </div>
 </div>
-<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
-    <?php foreach ($podcastNavigation as $section => $data): ?>
-    <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-accent" type="button">
-            <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') . lang('EpisodeNavigation.' . $section) ?>
-        </button>
-        <ul class="flex flex-col">
-            <?php foreach ($data['items'] as $item): ?>
-                <?php $isActive = url_is(route_to($item, $podcast->id, $episode->id)); ?>
-            <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-accent <?= $isActive ? 'font-semibold opacity-100 inline-flex items-center' : 'opacity-75' ?>" href="<?= route_to($item, $podcast->id, $episode->id) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') . lang('EpisodeNavigation.' . $item) ?></a>
-            </li>
-            <?php endforeach; ?>
-        </ul>
-    </div>
-    <?php endforeach; ?>
-</nav>
+
+<?= view('_partials/_nav_menu', [
+            'navigation' => $episodeNavigation,
+            'langKey'    => 'EpisodeNavigation',
+            'podcastId'  => $podcast->id,
+            'episodeId'  => $episode->id,
+        ]) ?>

themes/cp_admin/podcast/_sidebar.php

@@ -6,12 +6,16 @@ $podcastNavigation = [
         'items' => ['podcast-view', 'podcast-edit', 'podcast-persons-manage', 'podcast-imports'],
     ],
     'episodes' => [
-        'icon'  => 'play-circle',
-        'items' => ['episode-list', 'episode-create'],
+        'icon'        => 'play-circle',
+        'items'       => ['episode-list', 'episode-create'],
+        'add-cta'     => 'episode-create',
+        'count'       => $podcast->getEpisodesCount(),
+        'count-route' => 'episode-list',
     ],
     'premium' => [
-        'icon'  => 'exchange-dollar',
-        'items' => ['subscription-list', 'subscription-add'],
+        'icon'    => 'exchange-dollar',
+        'add-cta' => 'subscription-create',
+        'items'   => ['subscription-list', 'subscription-create'],
     ],
     'analytics' => [
         'icon'  => 'line-chart',
@@ -26,8 +30,11 @@ $podcastNavigation = [
         ],
     ],
     'contributors' => [
-        'icon'  => 'group',
-        'items' => ['contributor-list', 'contributor-add'],
+        'icon'        => 'group',
+        'items'       => ['contributor-list', 'contributor-add'],
+        'add-cta'     => 'contributor-add',
+        'count'       => count($podcast->contributors),
+        'count-route' => 'contributor-list',
     ],
     'platforms' => [
         'icon'  => 'link',
@@ -39,10 +46,6 @@ $podcastNavigation = [
     ],
 ];
 
-$counts = [
-    'episode-list' => $podcast->getEpisodesCount(),
-];
-
 ?>
 
 <div class="relative flex items-center px-4 py-2 border-b border-navigation">
@@ -68,30 +71,9 @@ $counts = [
         </a>
     </div>
 </div>
-<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
-    <?php foreach ($podcastNavigation as $section => $data): ?>
-    <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-accent" type="button">
-            <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') . lang('PodcastNavigation.' . $section) ?>
-        </button>
-        <ul class="flex flex-col">
-            <?php foreach ($data['items'] as $item): ?>
-                <?php $isActive = url_is(route_to($item, $podcast->id));
-                $itemLabel = lang('PodcastNavigation.' . $item);
-                if (array_key_exists($item, $counts)) {
-                    $itemLabel .= ' (' . $counts[$item] . ')';
-                }
-                ?>
-            <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-accent <?= $isActive
-                    ? 'font-semibold opacity-100 inline-flex items-center'
-                    : 'opacity-75' ?>" href="<?= route_to(
-                        $item,
-                        $podcast->id,
-                    ) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') . $itemLabel ?></a>
-            </li>
-            <?php endforeach; ?>
-        </ul>
-    </div>
-    <?php endforeach; ?>
-</nav>
+
+<?= view('_partials/_nav_menu', [
+            'navigation' => $podcastNavigation,
+            'langKey'    => 'PodcastNavigation',
+            'podcastId'  => $podcast->id,
+        ]) ?>