DEV Community: Monaye Win

Laravel Nova Customize Navigation

Monaye Win — Wed, 31 Mar 2021 00:49:31 +0000

Laravel Nova is a great tool! There are many packages that will do similar to the customization I will introduce here.

As a dev, less package is always better if the required customization is simple.

So, This is what we will customize

Add an icon to each navigation
Add method to define return the sort value so we can sort
Both navigation and group use the defined sort value for sorting

If you open a default navigation.blade.php it looks something like this

@if (count(\Laravel\Nova\Nova::resourcesForNavigation(request())))
    <h3 class="flex items-center font-normal text-white mb-6 text-base no-underline">
        <svg class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path fill="var(--sidebar-icon)" d="M3 1h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3h-4zM3 11h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4h-4z"
            />
        </svg>
        <span class="sidebar-label">{{ __('Resources') }}</span>
    </h3>

    @foreach($navigation as $group => $resources)
        @if (count($groups) > 1)
            <h4 class="ml-8 mb-4 text-xs text-white-50% uppercase tracking-wide">{{ $group }}</h4>
        @endif

        <ul class="list-reset mb-8">
            @foreach($resources as $resource)
                <li class="leading-tight mb-4 ml-8 text-sm">
                    <router-link :to="{
                        name: 'index',
                        params: {
                            resourceName: '{{ $resource::uriKey() }}'
                        }
                    }" class="text-white text-justify no-underline dim" dusk="{{ $resource::uriKey() }}-resource-link">
                        {{ $resource::label() }}
                    </router-link>
                </li>
            @endforeach
        </ul>
    @endforeach
@endif

Add an icon to each navigation

Let's look at the part where each link is render

@foreach($resources as $resource)
                <li class="leading-tight mb-4 ml-8 text-sm">
                    <router-link :to="{
                        name: 'index',
                        params: {
                            resourceName: '{{ $resource::uriKey() }}'
                        }
                    }" class="text-white text-justify no-underline dim" dusk="{{ $resource::uriKey() }}-resource-link">
                        {{ $resource::label() }}
                    </router-link>
                </li>
            @endforeach

If you dd($resource) it's a fully FQN of your resources. And this on each, it's calling static method to resource class to get the label

{{ $resource::label() }}

We are going to add a new icon() method to the resource.

    /**
     * The icon of the resource.
     *
     * @return string
     */
    public static function icon()
    {
        return view('nova::icons.icon-customer')->render();
    }

in the icon-customer.blade.php file we only have an SVG.

<svg width="20" height="20" class="sidebar-icon" fill="var(--sidebar-icon)" viewBox="0 0 25 26"  xmlns="http://www.w3.org/2000/svg"><path d="M18.501 15.62a7.161 7.161 0 003.409-6.095c0-3.949-3.202-7.161-7.137-7.161-3.935 0-7.137 3.212-7.137 7.161a7.161 7.161 0 003.408 6.095c-4.406.992-7.499 3.702-7.499 6.98 0 2.684 7.058 3.4 11.228 3.4S26 25.284 26 22.6c0-3.278-3.092-5.988-7.499-6.98zM9.106 9.525c0-3.134 2.542-5.684 5.667-5.684 3.124 0 5.666 2.55 5.666 5.684 0 3.135-2.542 5.684-5.666 5.684-3.125 0-5.667-2.55-5.667-5.684zm5.667 14.998c-5.994 0-9.582-1.27-9.757-1.927.005-3.259 4.38-5.91 9.757-5.91 5.376 0 9.75 2.65 9.756 5.909-.17.656-3.758 1.928-9.756 1.928z" /><path d="M18.501 15.62a7.161 7.161 0 003.409-6.095c0-3.949-3.202-7.161-7.137-7.161-3.935 0-7.137 3.212-7.137 7.161a7.161 7.161 0 003.408 6.095c-4.406.992-7.499 3.702-7.499 6.98 0 2.684 7.058 3.4 11.228 3.4S26 25.284 26 22.6c0-3.278-3.092-5.988-7.499-6.98zM9.106 9.525c0-3.134 2.542-5.684 5.667-5.684 3.124 0 5.666 2.55 5.666 5.684 0 3.135-2.542 5.684-5.666 5.684-3.125 0-5.667-2.55-5.667-5.684zm5.667 14.998c-5.994 0-9.582-1.27-9.757-1.927.005-3.259 4.38-5.91 9.757-5.91 5.376 0 9.75 2.65 9.756 5.909-.17.656-3.758 1.928-9.756 1.928z" /><path d="M8.169 12.236c-3.92.379-6.927 2.459-6.93 4.961.1.383 1.552 1.01 4.08 1.368a6.948 6.948 0 00-.903 1.134C2.029 19.296 0 18.534 0 17.2c0-2.787 2.604-5.09 6.315-5.933a6.1 6.1 0 01-2.87-5.18C3.444 2.73 6.14 0 9.454 0c1.94 0 3.667.936 4.767 2.385-.49.037-.967.125-1.425.258a4.727 4.727 0 00-3.342-1.387c-2.632 0-4.772 2.167-4.772 4.832a4.839 4.839 0 003.031 4.498 7.09 7.09 0 00.455 1.65zM18.595 15.56l-.094.06.128.03a4.757 4.757 0 00-.034-.09z" /></svg>

Now, update the navigation to render the icon if the method exists or just show the default icon.

  @if(method_exists($resource, 'icon'))
      {!! $resource::icon() !!}
   @else
     <svg class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path fill="var(--sidebar-icon)" d="M3 1h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3h-4zM3 11h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4h-4z"/>
      </svg>
  @endif
  <span class="sidebar-label">{{ $resource::label() }}</span>

Add method to define return the sort value To sort the navigation, it can be done at the navigation.blade.php but let's dive a little bit deeper into how Nova got those resources lists from. if you open vendor/laravel/nova/src/Tools/ResourceManager.php, you will find this:

    /**
     * Build the view that renders the navigation links for the tool.
     *
     * @return \Illuminate\View\View
     */
    public function renderNavigation()
    {
        $request = request();
        $groups = Nova::groups($request);
        $navigation = Nova::groupedResourcesForNavigation($request);

        return view('nova::resources.navigation', [
            'navigation' => $navigation,
            'groups' => $groups,
        ]);
    }

if you start tracing you ended up on the

    /**
     * Get the sorting strategy to use for Nova resources.
     *
     * @return array
     */
    public static function sortResourcesWith()
    {
        return static::$sortCallback ?? function ($resource) {
            return $resource::label();
        };
    }

If you notice, there is a $sortCallback function which you can register when Nova boots. So let's do that.

so in my NovaServiceProvider.php in the boot() func, we gonna add:

Nova::sortResourcesBy(function ($resource) {
    return method_exists($resource, 'sortOrder') ? 
         $resource::sortOrder() : $resource::label();
});

So, we will look for the sortOrder method in our resource, if it doesn't it will fall back to the original label based sort.

That's all!!

Both navigation and group use the defined sort value

For the group to order, I just utilize the sortorder of resource.

@php
        // dump($navigation);
        $orderNav = $navigation->sortBy(function($resources){
            // dump($resources->first());
            return $resources->first()::sortOrder();
        });
    @endphp
    @foreach($orderNav as $group => $resources)
       ... 
    @endforeach

I ended up only showing the icon for the group and here is my navigation.blade.php. just FYI: not cleaned up/optimized

@if (count(Nova::availableResources(request())))
<ul class="sidemenu">
    @php
        $orderNav = $navigation->sortBy(function($resources){
            return $resources->first()::sortOrder();
        });
    @endphp
    @foreach($orderNav as $group => $resources)
      @if (count($groups) > 1)
      <li class="sidebar-dropdown mb-2">
        <input id="{{$group}}" class="toogle-group" type="checkbox" />
        <label for="{{$group}}" data-toggle="dropdown" class="flex items-center font-normal text-white mb-4 text-base no-underline dim">
            @if(method_exists($resources->first(), 'icon'))
                {!! $resources->first()::icon() !!}
            @endif
            {{ $group }}
            <svg class="text-gray-300 ml-auto h-5 w-5 transform group-hover:text-gray-400 transition-transform ease-in-out duration-150 focus:ring-indigo-500" viewBox="0 0 20 20" aria-hidden="true">
                <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
              </svg>
        </label>

        <ul class="dropdown-menu">
          @foreach($resources as $resource)
          <li>
            <router-link :to="{
                name: 'index',
                params: {
                    resourceName: '{{ $resource::uriKey() }}'
                }
            }" class="flex items-center font-normal text-white mb-4 text-base no-underline dim">

                <span class="sidebar-label">{{ $resource::label() }}</span>
            </router-link>
          </li>
          @endforeach
        </ul>
      </li>

      @else
        @foreach($resources as $resource)
        <li class="sidebar-dropdown">
            <router-link :to="{
                name: 'index',
                params: {
                    resourceName: '{{ $resource::uriKey() }}'
                }
            }" class="flex items-center font-normal text-white mb-6 text-base no-underline dim">
                @if(property_exists($resource, 'icon'))
                    {!! $resource::$icon !!}
                @elseif(method_exists($resource, 'icon'))
                    {!! $resource::icon() !!}
                @else
                <svg class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path fill="var(--sidebar-icon)" d="M3 1h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2V3c0-1.1045695.8954305-2 2-2zm0 2v4h4V3h-4zM3 11h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2H3c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4H3zm10-2h4c1.1045695 0 2 .8954305 2 2v4c0 1.1045695-.8954305 2-2 2h-4c-1.1045695 0-2-.8954305-2-2v-4c0-1.1045695.8954305-2 2-2zm0 2v4h4v-4h-4z"
                    />
                </svg>
                @endif
                <span class="sidebar-label">{{ $resource::label() }}</span>
            </router-link>
        </li>
        @endforeach
      @endif
    @endforeach
</ul>
@endif

Refactor davidwalsh's debounce function using ES6 arrow and more

Monaye Win — Fri, 13 Mar 2020 05:58:47 +0000

We all know Davidwalsh's debounce function. The post is from 2014 but even now many developers use this and most of the Youtube tutorials are based on this.
If you are not familiar with Davidwalsh debounce function take a look at it here:
https://davidwalsh.name/javascript-debounce-function

When I looked at this, it didn't strike me. I have to bang my head many times to understand why he ended up writing the way it is.

So I ended up refactoring the code using a new ES6 arrow function.

Our brains are not made the same way, so some people may get my function better and others don't. Important thing is, you understand what you are writing and your team agrees.

That being said. here we go

const debounce = (func, delay) => {
  let timerId; 
  return () => {
    clearTimeout(timerId);
    timerId = setTimeout(func, delay); // start the timer
  };
};

That's it??!! Yes! this is the bare minimum version of the debounce. It utilize the closures to store the timerId in the parent scope.
You can try it on the sandbox here: https://codesandbox.io/s/es6-debounce-example-llgu7?file=/src/index.js

Davidwalsh's debounce function has more features built in.
Now, instead of adding all features to make the function complex, let's isolate the features, so we can better understand how each feature effects the function. At the end we combine both features into single function.

pass arguments to the function
execute function immediately then delay

Argument Version

const debounce = (func, delay) => {
  let timerId; // keep track of current timer

  // return the function
  return (...args) => {
    const boundFunc = func.bind(this, ...args);
    clearTimeout(timerId);
    timerId = setTimeout(boundFunc, delay); // start the timer
  };
};

This was easy to add. We just needed to bind the arguments to the function.
https://codesandbox.io/s/es6-debounce-arguments-example-2p4bp?file=/src/index.js

Immediate Version

const debounce = (func, delay) => {
  let timerId;
  return () => {
    if (!timerId) {
      func();
    }
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      timerId = null; 
    }, delay);
  };
};

As you can see, on the initial call, we execute the function immediately then set the timerId with the callback function that will null the timerId after the delay.
Here is the immediate version of the sandbox:
https://codesandbox.io/s/es6-debounce-immediate-example-737vm?file=/src/index.js

Combined all

const debounce = (func, delay, immediate) => {
  let timerId;
  return (...args) => {
    const boundFunc = func.bind(this, ...args);
    clearTimeout(timerId);
    if (immediate && !timerId) {
      boundFunc();
    }
    const calleeFunc = immediate ? () => { timerId = null } : boundFunc;
    timerId = setTimeout(calleeFunc, delay);
  }
}

for the bonus, we can change this to throttle as well. Only differences is, timing of resetting the timerId. For throttle, we don't clearTimeout, we just null the timerId after the execution of the function.

const throttle = (func, delay, immediate) => {
  let timerId;
  return (...args) => {
    const boundFunc = func.bind(this, ...args);
    if (timerId) {
      return;
    }
    if (immediate && !timerId) {
      boundFunc();
    }
    timerId = setTimeout(() => {
      if(!immediate) {
        boundFunc(); 
      }
      timerId = null; // reset the timer so next call will be excuted
    }, delay);
  }
}

https://codesandbox.io/s/es6-throttle-example-2702s?file=/src/index.js