Skip to content

Commit 654cd05

Browse files
author
Nur Alam
committed
navbar bug fixed
1 parent 2ae647d commit 654cd05

File tree

12 files changed

+613
-324
lines changed

12 files changed

+613
-324
lines changed

‎README.md‎

Lines changed: 253 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,69 @@
11
# Laravel Navbar
22

3-
This package generate navigation bar for laravel application. In two ways we can generate navbar. One is defining navigation during route definition, it means define the navigation in the controller. Other one is defining the navigation using `Navbar::class`
3+
This package generates navigation/navbar for laravel application. The package also provide a build in html navigation UI, it also allows you to build your own custom navigation UI.
44

55

6-
## Sample
7-
Define the navigation in the controller
6+
# Sample & Usages
87
```php
9-
use RadiateCode\LaravelNavbar\Traits\Navbar;
10-
use RadiateCode\LaravelNavbar\Contracts\WithNavbar;
11-
12-
class OfficeController extends Controller implements WithNavbar
13-
{
14-
use Navbar;
15-
16-
public function navigation()
17-
{
18-
$this->nav()
19-
->addNav('Offices','fa fa-landmark')
20-
->addNavLink('index') // route associate method
21-
->childOf('Meta','fa fa-wrench');
22-
}
23-
24-
25-
public function index(){
26-
// code
27-
}
28-
29-
}
30-
31-
.............
32-
33-
class ProjectController extends Controller implements WithNavbar
34-
{
35-
36-
public function navigation()
37-
{
38-
$this->nav()
39-
->addNav('Project','fa fa-project-diagram')
40-
->addNavLink('create','New','fa fa-plus-circle')
41-
->addNavLink('index','List','fa fa-list');
42-
}
43-
44-
public function index(){
45-
// code
46-
}
47-
48-
public function create(){
49-
// code
50-
}
51-
52-
}
53-
8+
$navitems = Nav::make()
9+
->header('Adminland', function (Nav $nav) {
10+
$nav
11+
->addIf(hasPermission('role-list'), 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
12+
->addIf(hasPermission('system-user-list'), 'Users', route('system-user-list'), ['icon' => 'fa fa-users']);
13+
})
14+
->header('Employee Management', function (Nav $nav) {
15+
$nav
16+
->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
17+
$children
18+
->add('List', route('employee-list'), ['icon' => 'fa fa-list'])
19+
->add('Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
20+
})
21+
->add('Transfer', '#', ['icon' => 'fa fa-money-check-alt'], function (Children $children) {
22+
$children
23+
->add('List', route('transfer-list'), ['icon' => 'fa fa-list'])
24+
->add('Create', route('create-transfer'), ['icon' => 'fa fa-plus-circle']);
25+
});
26+
})
27+
->render(); // array of nav items
28+
29+
$navbar = Navbar::navs($navitems)->render(); // navbar html
5430
```
55-
Generate navigation bar using view composer
31+
> **Note:** You can(should) generate the navbar in the [View Composer](https://laravel.com/docs/10.x/views#view-composers)
5632
33+
### Navbar In View Composer Example
5734
```php
58-
use RadiateCode\LaravelNavbar\NavService;
35+
use RadiateCode\LaravelNavbar\Nav;
36+
use RadiateCode\LaravelNavbar\Children;
37+
use RadiateCode\LaravelNavbar\Facades\Navbar;
5938

6039
class ViewServiceProvider extends ServiceProvider
6140
{
6241

6342
public function boot()
6443
{
6544
View::composer('layouts.partials._left_nav',function(View $view){
66-
$view->with('navbar', NavService::instance()->menus()->toHtml())
45+
$navitems = Nav::make()
46+
->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
47+
->add('Users', route('system-user-list'), ['icon' => 'fa fa-users'])
48+
->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
49+
$children
50+
->addif(condition: true, 'List', route('employee-list'), ['icon' => 'fa fa-list'])
51+
->addif(condition: false, 'Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
52+
})
53+
->render(); // array of nav items
54+
55+
// Navbar UI builder
56+
$navbar = Navbar::navs($navitems));
57+
58+
// Now attach the $navbar to your view.
59+
$view->with('navbar', $navbar->render();
6760
});
61+
62+
// Or you can use `class based view composer`. place the Navbar generator code inside the compose().
63+
View::composer('layouts.partials._left_nav', NavComposer::class);
6864
}
6965

7066
}
71-
7267
```
7368
In **_left_nav** partials
7469

@@ -91,8 +86,8 @@ In **_left_nav** partials
9186
# Requirements
9287
- [PHP >= 7.1](https://www.php.net/)
9388
- [Laravel 5.7|6.x|7.x|8.x|9.x](https://github.com/laravel/framework)
94-
- [JQuery](https://jquery.com/) [Optional]
95-
- [Bootstrap](https://getbootstrap.com/) [Optional when you use custom navbar styling]
89+
- [JQuery](https://jquery.com/) [Optional for custom navbar UI styling]
90+
- [Bootstrap](https://getbootstrap.com/) [Optional for custom navbar UI styling]
9691

9792
# Installation
9893
You can install the package via composer:
@@ -105,54 +100,221 @@ Publish config file (optional)
105100

106101
# Usage
107102

108-
## Controller Basis
103+
## Nav available methods
104+
### 1. Header : it is use to group certain nav items
109105

110-
To create navigation by route definiation implement the **WithNavbar** Interface and use the **Navbar** trait in controller. Define the menu in the `navigation()` by using `$this->nav()`. This will provide some methods to prepare the nav items.
106+
Syntax:
111107

108+
`header(string $name, Closure $closure, array $attributes = [])` : 1st arg is the name of the header, 2nd arg is a closure to add nav items under the header, 3rd is for any extra attributes (ex: icon, class etc.)
112109
```php
113-
use RadiateCode\LaravelNavbar\Contracts\WithNavbar;
114-
use RadiateCode\LaravelNavbar\Traits\Navbar;
115-
116-
class ExampleController extends Controller implements WithNavbar
117-
{
118-
use Navbar;
119-
120-
public function navigation(): void
121-
{
122-
$this->menu()
123-
->addNav('ManuName','fa fa-project-diagram')
124-
->addNavLink('create','New','fa fa-plus-circle')
125-
->addNavLink('index','List','fa fa-list');
126-
}
127-
128-
}
110+
// example
111+
Nav::make()
112+
->header('Adminland', function (Nav $nav) {
113+
// add nav items under the Adminland header
114+
})
129115
```
130-
### Methods
131-
132-
- `addHeader(string $name)` : Add header for navbar
133-
134-
- `addNav(string $name, string $icon = 'fa fa-home')` : Define the menu name
116+
### 2. Add: add nav items
117+
Syntax:
135118

136-
- `addNavLink(string $method_name,string $title = null,string $icon = null,array $css_classes = [])` : Define the method name which will work as a nav item link. Defined method must be a route associative method. `$title` param is optional if no title pass the package generate a title from the name of **route**.
119+
`add(string $title, string $url, ?array $attributes = null, ?callable $children = null)`: 1st arg name of the nav item, 2nd arg is the nav url, 3rd is for any extra attributes (ex: nav icon, classes), 4th arg is for if you want to add children nav.
137120

138-
- `addNavLinkIf($condition,string $method_name,string $title = null,string $icon = null,array $css_classes = [])` : Conditionally create a nav link. Under the hood the method implement the `addNavLink()` if certain condition is true.
139-
140-
- `childOf(string $name,string $icon = 'fa fa-circle')` : Define the parent menu. If the menu is a child of another menu then define that parent menu. We can pass controler name as a parent menu or we can pass just string name as a parent menu. See [example]()
141-
142-
- `createIf($condition)` : If certain condition is true then create the navigation with nav links.
143-
144-
## Render Menu
145-
146-
To rendered the menus you can use `MenuService` class.
121+
```php
122+
//Example 1
123+
$navitems = Nav::make()
124+
->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
125+
->add('Users', route('user-list'), ['icon' => 'fa fa-users'])
126+
->render();
127+
128+
// Example 2: with header
129+
$navitems = Nav::make()
130+
->header('Adminland', function (Nav $nav) {
131+
$nav
132+
->add('Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
133+
->add('Users', route('system-user-list'), ['icon' => 'fa fa-users'])
134+
->add('Settings', route('system-settings'), ['icon' => 'fa fa-wrench'])
135+
})
136+
->render();
137+
```
147138

148-
NavService::instance()->menus()->toHtml();
139+
### 3. Add If: Conditionally add nav
140+
Syntax:
141+
142+
`addIf($condition, string $title, string $url, array $attributes = [], ?callable $configure = null)`: 1st arg is the condition bool or closure return bool, 2nd name of the nav, 3rd nav url, 4th extra attributes, 5th a closure for adding children nav.
143+
```php
144+
//Example 1
145+
$navitems = Nav::make()
146+
->addIf(true, 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
147+
->addIf(false, 'Users', route('user-list'), ['icon' => 'fa fa-users'])
148+
->render();
149+
150+
//Example 2: with header
151+
$navitems = Nav::make()
152+
->header('Adminland', function (Nav $nav) {
153+
$nav
154+
->addIf(true, 'Roles', route('role-list'), ['icon' => 'fa fa-user-tag'])
155+
->addIf(false, 'Users', route('system-user-list'), ['icon' => 'fa fa-users'])
156+
->addIf(true, 'Settings', route('system-settings'), ['icon' => 'fa fa-wrench'])
157+
})
158+
->render();
159+
```
160+
### 4. Chidlren nav: you can add children navs
161+
You have already noticed how we added children nav. We can also conditionally add children nav
162+
```php
163+
// Example
164+
$navitems = Nav::make()
165+
->header('Employee Management', function (Nav $nav) {
166+
$nav
167+
->add('Employee', '#', ['icon' => 'fa fa-user'], function (Children $children) {
168+
$children
169+
->add('List', route('employee-list'), ['icon' => 'fa fa-list'])
170+
->add('Create', route('create-employee'), ['icon' => 'fa fa-plus-circle']);
171+
})
172+
->add('Transfer', '#', ['icon' => 'fa fa-money-check-alt'], function (Children $children) {
173+
// we can also conditionally add children nav
174+
$children
175+
->addIf(true, 'List', route('transfer-list'), ['icon' => 'fa fa-list'])
176+
->addIf(true, 'Create', route('create-transfer'), ['icon' => 'fa fa-plus-circle']);
177+
})
178+
})
179+
->render();
180+
```
181+
### 5. Render: and the render method to get the array of nav items
182+
```php
183+
// render() result sample
184+
[
185+
"adminland" => [ // header
186+
"title" => "Adminland",
187+
"attributes" => [],
188+
"type" => "header",
189+
"nav-items" => [ // nav items under the adminland header
190+
[
191+
"title" => "Roles",
192+
"url" => "http://hrp.test/role-list",
193+
"attributes" => [
194+
"icon" => 'fa fa-user-tag'
195+
],
196+
"is_active" => false,
197+
"type" => "menu",
198+
"children" => [] // no children
199+
],
200+
[
201+
"title" => "User",
202+
"url" => "http://hrp.test/system-user-list",
203+
"attributes" => [
204+
"icon" => 'fa fa-users'
205+
],
206+
"is_active" => false,
207+
"type" => "menu",
208+
"children" => [] // no children
209+
]
210+
]
211+
],
212+
"employee-management" => [ // header
213+
"title" => "Employee Management",
214+
"attributes" => [],
215+
"type" => "header",
216+
"nav-items" => [ // nav items under the employee managment
217+
[
218+
"title" => "Employee", // parent nav
219+
"url" => "#",
220+
"attributes" => [
221+
"icon" => 'fa fa-user'
222+
],
223+
"is_active" => false,
224+
"type" => "menu",
225+
"children" => [ // children nav items of employee nav
226+
"nav-items" => [
227+
[
228+
"title" => "List",
229+
"url" => "http://hrp.test/employee-list",
230+
"attributes" => [
231+
"icon" => 'fa fa-list'
232+
],
233+
"is_active" => false,
234+
"type" => "menu",
235+
"children" => []
236+
],
237+
[
238+
"title" => "Create",
239+
"url" => "http://hrp.test/create-employee",
240+
"attributes" => [
241+
"icon" => 'fa fa-plus-circle'
242+
],
243+
"is_active" => false,
244+
"type" => "menu",
245+
"children" => []
246+
]
247+
]
248+
]
249+
]
250+
]
251+
],
252+
"nav-items" => [] // nav items without header will be append here
253+
]
254+
```
255+
## Navbar UI Builder
256+
`Laravel-Navbar` provide a built in navbar UI builder so that you can easily integrate the UI with your app.
257+
> Note: You can built your own custom Navbar UI by defining custom [Navbar Presenter](#navbar-presenter). Or, you can comes up with your own approch to show navbar.
149258
150-
Or
259+
**Example:** see the view composer [example](#navbar-in-view-composer-example)
151260

152-
NavService::instance()->menus()->toArray();
261+
### Methods
262+
Available methods of the builder
263+
- `navs(array $navItems)` : generated nav items
264+
- `render()` : Render the html
265+
- `navActiveScript()` : Nav active script usefull if you want to active the current nav item in the front-end by Js(JQuery). It has another benefit, if you cache the generated navbar this script will help you to active your current nav because the back-end active function only active once before cache, after cached it always show that same active nav. So it is **recommended** if you want to cache your navbar you should disable back-end `nav-active` from the [Config](#Config) and use this script in the front-end.
266+
```php
267+
// Example of nav active script
268+
$navbar = Navbar::navs($navitems);
269+
270+
$view->with('navbar', $navbar->render())
271+
->with('navScript',$navbar->navActiveScript());
272+
```
273+
```html
274+
<!-- assume you have layouts.partials._left_nav.blade.php -->
153275

154-
> `toHtml()` return built-in html navbar, which is built top of the **bootstrap navbar**. But you can modify the style of the navbar by defining a custom **Nav Presenter** class.
276+
<div class="sidebar">
277+
<!-- Sidebar Menu -->
278+
{!! $navbar !!}
279+
<!-- /.sidebar-menu -->
280+
</div>
155281

282+
<!-- Note: We assume you have @stack('js') in your template layout-->
283+
@prepend('js')
284+
{!! $navScript !!}
285+
@endprepend
286+
<!-- ./ end Js-->
287+
```
288+
Or, you can add it to you script partials
289+
```html
290+
<!-- assume: you have layouts.partials._script.blade.php -->
291+
292+
{!! RadiateCode\LaravelNavbar\Facades\Navbar::navActiveScript(); !!}
293+
294+
<script>
295+
// other js code
296+
</script>
297+
```
298+
## Navbar Presenter
299+
Navbar presenter is nothing but a class which contain some functionality to generate navbar html. Under the hood the [Navbar builder](#navbar-ui-builder) use this presenter. You can use your own custom presenter. If you use custom presenter make sure you have add it in your [Navbar Config](#config)
300+
301+
## Config
302+
```php
303+
/**
304+
* Presenter for navbar style
305+
*
306+
* [HTML presenter]
307+
*/
308+
'nav-presenter' => NavbarPresenter::class,
309+
310+
/**
311+
* It will set active to requested/current nav
312+
*
313+
* [Note: if you want to set nav active by front-end (Js/Jquery)
314+
* Or, if you cached your rendered navbar, then you should disable it]
315+
*/
316+
'enable-nav-active' => true
317+
```
156318

157319
## Contributing
158320
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

0 commit comments

Comments
 (0)