Skip to content

Commit

Permalink
bug #6671 Align icon and text in a menu item (kniziol)
Browse files Browse the repository at this point in the history
This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Align icon and text in a menu item

# Menu configuration

It's not necessary. It's just added to have more menu items than a single, default menu item.

```php
// src/Controller/Admin/DashboardController.php:47

public function configureMenuItems(): iterable
{
    yield MenuItem::linkToDashboard('dashboard', 'fa fa-home');
    yield MenuItem::subMenu('Test', 'fas fa-list')
        ->setSubItems([
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
        ])
    ;
    // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
}
```

# Before (the problem)

The icon in the menu item is currently aligned to the top. It would be so much more visually appealing if both the icon and text were centered together. Just take a look at the example below (in the `After` section).

![Icon and text alignment - before](https://github.com/user-attachments/assets/00472066-aff8-438f-9831-f0f9a8785874)

# After (the solution)

![Icon and text alignment - after](https://github.com/user-attachments/assets/8b1606e6-209f-430a-9ba7-65f2094fd4e8)

Commits
-------

3be8a66 Align icon and text in a menu item
  • Loading branch information
javiereguiluz committed Dec 31, 2024
2 parents c4d72d4 + 3be8a66 commit 4eb8174
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 1 deletion.
1 change: 1 addition & 0 deletions assets/css/easyadmin-theme/menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
text-align: center;
block-size: 16px;
inline-size: 1.25em;
margin-top: 3px;
}
#main-menu .menu .menu-icon svg {
color: var(--sidebar-menu-icon-color);
Expand Down
2 changes: 1 addition & 1 deletion public/app.9f3e666b.css

Large diffs are not rendered by default.

2 comments on commit 4eb8174

@pfpro
Copy link
Contributor

@pfpro pfpro commented on 4eb8174 Jan 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 1px is enough. Otherwise the FA icons are aligned too far down instead of too high. What do you think?

@hafkenscheid
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See also #6670

Please sign in to comment.