Translation string into CoreUi-V4 sidebar + activate vertical scroll + modify first nav title

[Astriel]

Dear Laravel-BackPack community,

I'm working on a project using :

• Laravel: 10.16.1.0
• backpack/basset: 1.0.2
• backpack/crud: 6.0.7
• backpack/devtools: 2.0.3
• backpack/generators: v4.0.2
• backpack/permissionmanager: 7.0.0
• backpack/pro: 2.0.9
• backpack/theme-coreuiv4: 1.0.5

I'm customizing the left sidebar with the file : resources\views\vendor\backpack\ui\inc\menu_items.blade.php

I'm facing several issues.

1 - Using translation files into blade / view component
<x-backpack::menu-dropdown :title="trans('backpack.diffusion')" icon="la la-paper-plane"> <x-backpack::menu-dropdown-item :title="trans('backpack.advertizer')" icon="la la-user-circle" :link="backpack_url('advertizer')" /> </x-backpack::menu-dropdown>

The problem is whatever I try with title, :title, {{ }}, or __ blade method, the translation string is not fetch from the en.php lang file. Also the local is indeed in English. Any idea on how can I create an item menu using a translation string to make the whole back-office multilingual ?

2 - Deleting the administration first title

On the menu file, the first nav-title is not available. I found the translation string, but not the place to modify it directly into the code.
Here is the HTML element I want to delete : <li class="nav-title">ADMINISTRATION</li>

** 3 - Adding a vertical scrollbar**
I've got a lot of different Crud entities to administrate. The problem is that on the left menu sidebar, when the list is to long I have to scroll to go to the bottom, but the scrollbar is hidden which is going to be complicated for future users using the back-office. Any idea how to add it ?

Thanks a lot ! It would help me a lot.

[christmex]

Hi @Astriel

(1)I have a question for your first issue, did you try to use this way?

<x-backpack::menu-dropdown title="{{trans('backpack::backpack.diffusion')}}" icon="la la-paper-plane">

and make sure you already have that file, in this path

resources/lang/vendor/backpack/en/backpack.php

and inside that file, it should be like this

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Backpack Crud Language Lines
    |--------------------------------------------------------------------------
    |
    | The following language lines are used by the CRUD interface.
    | You are free to change them to anything
    | you want to customize your views to better match your application.
    |
    */

    // Forms
    'diffusion'         => 'diffusion transaltion',//set your language here orwhatever :)

];

(2)The second problem is you can "hack it" 😉 , create this file or if it's already there just add this code

<?php
//resources\lang\vendor\backpack\en\base.php
return [
    // if your base.php already exist just add this line above
    'administration'         => '', //make it empty or write something you want
];

Or overwrite the sidebar.blade.php, but I think it's not the good way cause you won't get any update if backpack updates the sidebar, if you want the update you need to do it manually copy and pasting

//resources\views\vendor\backpack\theme-coreuiv4\inc\sidebar.blade.php
@if (backpack_auth()->check())
<div class="sidebar sidebar-dark sidebar-fixed bg-dark-gradient" id="sidebar">
    <div class="sidebar-brand d-none d-md-flex">
        <a class="navbar-brand fs-6 text-decoration-none text-uppercase" href="{{ url(backpack_theme_config('home_link')) }}" title="{{ backpack_theme_config('project_name') }}">
            {!! backpack_theme_config('project_logo') !!}
        </a>
    </div>
    <ul class="sidebar-nav" data-coreui="navigation" data-simplebar="init">
        <div class="simplebar-mask">
            <div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content">
                <div class="simplebar-content">
                    @include(backpack_view('inc.sidebar_content'))
                </div>
            </div>
        </div>
    </ul>
</div>
@endif

@push('before_scripts')
  <script type="text/javascript">
    // Save default sidebar class
    let sidebar = document.querySelector('.sidebar');

    // Recover sidebar state
    sidebar.classList.toggle('hide', sessionStorage.getItem('sidebar-collapsed') === '1');
  </script>
@endpush

@push('after_scripts')
  <script>
      // Store sidebar state
      document.querySelector('.header-toggler').addEventListener('click', function() {
        sessionStorage.setItem('sidebar-collapsed', Number(sidebar.classList.contains('hide')));
        crud?.table?.fixedHeader.adjust();
      });
  </script>
@endpush

what happens? you just remove this line actually

<li class="nav-title">{{ trans('backpack::base.administration') }}</li>

(3)And then the last issue, you can create your custom CSS to manage how the scroll bar looks, after that include it inside ui.php in config/backpack/ui.php and find the styles key, I hope you get the idea.

Let me know how it is 😉

Cheers.

[tabacitu]

Actually I don't think that "ADMINISTRATION" hardcoded title makes sense. Let's remove it entirely - I've opened Laravel-Backpack/theme-coreuiv4#43 so we remember to do that.

[christmex]

Thanks @tabacitu 🙏