GithubHelp home page GithubHelp logo

winex01 / ekko Goto Github PK

View Code? Open in Web Editor NEW

This project forked from laravelista/ekko

0.0 1.0 0.0 208 KB

Ekko is a Laravel helper package. It helps you mark currently active menu item in your navbar.

License: MIT License

PHP 100.00%

ekko's Introduction

Ekko

Ekko is a Laravel helper package. It helps you mark currently active menu item in your navbar.

Become a Patron

Installation

From the command line:

composer require laravelista/ekko

Laravel 5.5+ will use the auto-discovery function.

If using 5.4 (or if you are not using auto-discovery) you will need to include the service providers / facade in config/app.php:

'providers' => [
    ...,
    Laravelista\Ekko\EkkoServiceProvider::class
];

And add a facade alias to the same file at the bottom:

'aliases' => [
    ...,
    'Ekko' => Laravelista\Ekko\Facades\Ekko::class
];

Overview

To mark a menu item active in Bootstrap, you need to add a active CSS class to the <li> tag:

<ul class="nav navbar-nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

You could do it manually with Laravel, but you will end up with a sausage:

<ul class="nav navbar-nav">
    <li class="@if(URL::current() == URL::to('/')) active @endif"><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

With Ekko your code will look like this:

<ul class="nav navbar-nav">
    <li class="{{ isActiveURL('/') }}"><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

What if you are not using Bootstrap, but some other framework or a custom design? Instead of returning active CSS class, you can make Ekko return anything you want including boolean true or false:

<ul class="nav navbar-nav">
    <li class="{{ isActiveURL('/', 'highlight') }}"><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

Using boolean true or false is convenient if you need to display some content depending on which page you are in your layout view:

@if(isActiveRoute('home', true))
    <p>Something that is only visible on the `home` route.</p>
@endif

API

There are two ways of using Ekko in your application, by using a facade Ekko::isActiveURL('/about') or by using a helper function isActiveURL('/about') or is_active_route('/about').

isActiveRoute, is_active_route

Compares given route name with current route name.

isActiveRoute($routeName, $output = "active")
is_active_route($routeName, $output = "active")

Examples:

If the current route is home, function isActiveRoute('home') would return string active.

The * wildcard can be used for resource routes.

Function isActiveRoute('user.*') would return string active for any current route which begins with user.

isActiveURL, is_active_url

Compares given URL path with current URL path.

isActiveURL($url, $output = "active")
is_active_url($url, $output = "active")

Examples:

If the current URL path is /about, function isActiveURL('/about') would return string active.

isActiveMatch, is_active_match

Detects if the given string is found in the current URL.

isActiveMatch($string, $output = "active")
is_active_match($string, $output = "active")

Examples:

If the current URL path is /about or /insideout, function isActiveMatch('out') would return string active.

areActiveRoutes, are_active_routes

Compares given array of route names with current route name.

areActiveRoutes(array $routeNames, $output = "active")
are_active_routes(array $routeNames, $output = "active")

Examples:

If the current route is product.index or product.show, function areActiveRoutes(['product.index', 'product.show']) would return string active.

The * wildcard can be used for resource routes, including nested routes.

Function areActiveRoutes(['user.*', 'product.*']) would return string active for any current route which begins with user or product.

areActiveURLs, are_active_urls

Compares given array of URL paths with current URL path.

areActiveURLs(array $urls, $output = "active")
are_active_urls(array $urls, $output = "active")

Examples:

If the current URL path is /product or /product/create, function areActiveURLs(['/product', '/product/create']) would return string active.

Credits

Many thanks to:

  • @Jono20201 for implementing helper functions
  • @judgej for implementing route wildcards

ekko's People

Contributors

drmarkes avatar foo99 avatar it-can avatar jono20201 avatar judgej avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.