Add icons to panel navigation

formwork/src/Panel/Navigation/NavigationItem.php

@@ -56,4 +56,12 @@ public function badge(): ?string
     {
         return $this->data['badge'] ?? null;
     }
+
+    /**
+     * Get navigation item icon
+     */
+    public function icon(): ?string
+    {
+        return $this->data['icon'] ?? null;
+    }
 }

panel/config/navigation.php

@@ -9,42 +9,49 @@
         'uri'         => '/dashboard/',
         'permissions' => 'panel.dashboard',
         'badge'       => null,
+        'icon'        => 'home',
     ],
     'pages' => [
         'label'       => $translation->translate('panel.pages.pages'),
         'uri'         => '/pages/',
         'permissions' => 'panel.pages',
         'badge'       => $site->descendants()->count(),
+        'icon'        => 'pages',
     ],
     'files' => [
         'label'       => $translation->translate('panel.files.files'),
         'uri'         => '/files/',
         'permissions' => 'panel.files',
         'badge'       => null,
+        'icon'        => 'files',
     ],
     'statistics' => [
         'label'       => $translation->translate('panel.statistics.statistics'),
         'uri'         => '/statistics/',
         'permissions' => 'panel.statistics',
         'badge'       => null,
+        'icon'        => 'chart-line',
     ],
     'users' => [
         'label'       => $translation->translate('panel.users.users'),
         'uri'         => '/users/',
         'permissions' => 'panel.users',
         'badge'       => $site->users()->count(),
+        'icon'        => 'users',
     ],
     'options' => [
         'label'       => $translation->translate('panel.options.options'),
         'uri'         => '/options/',
         'permissions' => 'panel.options',
         'badge'       => null,
+        'icon'        => 'gear',
     ],
     'tools' => [
         'label'       => $translation->translate('panel.tools.tools'),
         'uri'         => '/tools/',
         'permissions' => 'panel.tools',
         'badge'       => null,
+        'icon'        => 'toolbox',
     ],
     'logout' => [
         'label'       => $translation->translate('panel.login.logout'),

panel/src/scss/components/_sidebar.scss

@@ -52,7 +52,7 @@
 .sidebar-navigation > li {
     position: relative;
     padding: 0.25rem 0;
-    padding-left: 1rem;
+    padding-left: 0.75rem;
     margin: 0;
     margin-bottom: 0.5rem;
 }
@@ -61,6 +61,10 @@
     color: var(--color-base-100);
 }
 
+.sidebar-navigation > li .icon {
+    margin-right: 0.375rem;
+}
+
 .sidebar-navigation > .active {
     font-weight: 600;
 }

panel/views/dashboard/index.php

@@ -2,6 +2,7 @@
 
 <div data-view="dashboard">
     <div class="header">
+        <div class="header-icon"><?= $this->icon('home') ?></div>
         <div class="header-title"><?= $this->translate('panel.dashboard.dashboard') ?></div>
     </div>
 
@@ -62,4 +63,4 @@
         </div>
         <?= $lastModifiedPages ?>
     </section>
-</div>
+</div>

panel/views/files/index.php

@@ -3,6 +3,7 @@
 
 <div data-view="files">
     <div class="header">
+        <div class="header-icon"><?= $this->icon('files') ?></div>
         <div class="header-title"><?= $this->translate('panel.files.files') ?></div>
         <div>
             <?php if ($panel->user()->permissions()->has('panel.files.upload')) : ?>

panel/views/options/site.php

@@ -4,6 +4,7 @@
 
 <form method="post" enctype="multipart/form-data" class="options-form" data-form="site-options-form">
     <div class="header">
+        <div class="header-icon"><?= $this->icon('gear') ?></div>
         <div class="header-title"><?= $this->translate('panel.options.options') ?></div>
         <div>
             <button type="submit" class="button button-accent button-right" data-command="save"><?= $this->icon('check-circle') ?> <?= $this->translate('panel.modal.action.save') ?></button>

panel/views/options/system.php

@@ -4,6 +4,7 @@
 
 <form method="post" enctype="multipart/form-data" class="options-form" data-form="system-options-form">
     <div class="header">
+        <div class="header-icon"><?= $this->icon('gear') ?></div>
         <div class="header-title"><?= $this->translate('panel.options.options') ?></div>
         <div>
             <button type="submit" class="button button-accent button-right" data-command="save"><?= $this->icon('check-circle') ?> <?= $this->translate('panel.modal.action.save') ?></button>

panel/views/pages/index.php

@@ -3,6 +3,7 @@
 <div class="header">
     <div class="flex mr-auto overflow-hidden">
         <div class="min-w-0 flex">
+            <div class="header-icon"><?= $this->icon('pages') ?></div>
             <div class="header-title mr-4"><?= $this->translate('panel.pages.pages') ?></div>
             <?php foreach ($parent->ancestors()->reverse()->with($parent) as $page) : ?>
                 <div class="text-color-gray-medium mr-4">/</div>
@@ -38,4 +39,4 @@
         </div>
     </div>
     <?= $pagesTree ?>
-</section>
+</section>

panel/views/partials/sidebar.php

@@ -18,6 +18,9 @@
             <?php foreach ($panel->navigation() as $item) : ?>
                 <?php if ($item->permissions() === null || $panel->user()->permissions()->has($item->permissions())) : ?>
                     <li class="<?= $this->classes(['active' => $location === $item->id()]) ?>">
+                        <?php if ($item->icon()) : ?>
+                            <?= $this->icon($item->icon()) ?>
+                        <?php endif ?>
                         <a href="<?= $panel->uri($item->uri()) ?>"><?= $this->escape($item->label()) ?></a>
                         <?php if ($item->badge()) : ?>
                             <span class="badge"><?= $item->badge() ?></span>

panel/views/statistics/index.php

@@ -1,6 +1,7 @@
 <?php $this->layout('panel') ?>
 
 <div class="header">
+    <div class="header-icon"><?= $this->icon('chart-line') ?></div>
     <div class="header-title"><?= $this->translate('panel.statistics.statistics') ?></div>
 </div>
 
@@ -116,4 +117,4 @@
             </table>
         </section>
     </div>
-</div>
+</div>

panel/views/tools/backups.php

@@ -3,6 +3,7 @@
 <?php $this->modals()->add('deleteFile') ?>
 
 <div class="header">
+    <div class="header-icon"><?= $this->icon('toolbox') ?></div>
     <div class="header-title"><?= $this->translate('panel.tools.tools') ?></div>
 </div>
 
@@ -50,4 +51,4 @@
             <button type="button" class="button button-link backup-delete" data-modal="deleteFileModal" data-modal-action="" title="<?= $this->translate('panel.tools.backup.delete') ?>" aria-label="<?= $this->translate('panel.tools.backup.delete') ?>"><?= $this->icon('trash') ?></button>
         </td>
     </tr>
-</template>
+</template>

panel/views/tools/info.php

@@ -1,6 +1,7 @@
 <?php $this->layout('panel') ?>
 
 <div class="header">
+    <div class="header-icon"><?= $this->icon('toolbox') ?></div>
     <div class="header-title"><?= $this->translate('panel.tools.tools') ?></div>
 </div>
 
@@ -43,4 +44,4 @@
             </div>
         </section>
     <?php endforeach ?>
-</div>
+</div>

panel/views/tools/updates.php

@@ -1,6 +1,7 @@
 <?php $this->layout('panel') ?>
 
 <div class="header">
+    <div class="header-icon"><?= $this->icon('toolbox') ?></div>
     <div class="header-title"><?= $this->translate('panel.tools.tools') ?></div>
 </div>
 
@@ -24,4 +25,4 @@
             <p><strong class="current-version-name">Formwork <?= $currentVersion ?></strong> <?= $this->translate('panel.updates.latestVersionAvailable') ?></p>
         </div>
     </div>
-</section>
+</section>

panel/views/users/index.php

@@ -3,6 +3,7 @@
 <?php $this->modals()->addMultiple(['newUser', 'deleteUser']) ?>
 
 <div class="header">
+    <div class="header-icon"><?= $this->icon('users') ?></div>
     <div class="header-title"><?= $this->translate('panel.users.users') ?> <span class="badge"><?= $users->count() ?></span></div>
     <div>
         <button type="button" class="button button-accent" data-modal="newUserModal" <?php if (!$panel->user()->permissions()->has('panel.users.create')) : ?> disabled<?php endif ?>><?= $this->icon('plus-circle') ?> <?= $this->translate('panel.users.newUser') ?></button>
@@ -33,4 +34,4 @@
             </div>
         <?php endforeach ?>
     </div>
-</section>
+</section>

panel/views/users/profile.php

@@ -4,6 +4,7 @@
 
 <form method="post" enctype="multipart/form-data" data-form="user-profile-form">
     <div class="header">
+        <div class="header-icon"><?= $this->icon('user') ?></div>
         <div class="header-title"><?= $this->translate('user.user') ?></div>
         <?php if ($panel->user()->canChangeOptionsOf($user)) : ?>
             <div>
@@ -38,4 +39,4 @@
         <?php $this->insert('fields', ['fields' => $fields]) ?>
         <input type="hidden" name="csrf-token" value="<?= $csrfToken ?>">
     <?php endif ?>
-</form>
+</form>