自定义头部导航条
<h1>自定义头部导航条</h1>
<p>如果要在顶部导航条上添加html元素, 打开<code>app/Admin/bootstrap.php</code>:</p>
<pre><code class="language-php">use Dcat\Admin\Layout\Navbar;
use Dcat\Admin\Admin;
Admin::navbar(function (Navbar $navbar) {
$navbar-&gt;left('html...');
$navbar-&gt;right('html...');
});</code></pre>
<p><code>left</code>和<code>right</code>方法分别用来在头部的左右两边添加内容,方法参数可以是任何可以渲染的对象(实现了<code>Htmlable</code>、<code>Renderable</code>接口或者包含<code>__toString()</code>方法的对象)或字符串</p>
<h2>添加下拉面板</h2>
<p>在模板文件中加上</p>
<pre><code class="language-html">&lt;ul class=&quot;nav navbar-nav&quot;&gt;
&lt;li class=&quot;dropdown dropdown-notification nav-item&quot;&gt;
&lt;a class=&quot;nav-link nav-link-label&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;true&quot;&gt;&lt;i class=&quot;ficon feather icon-bell&quot;&gt;&lt;/i&gt;&lt;span class=&quot;badge badge-pill badge-primary badge-up&quot;&gt;5&lt;/span&gt;&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu dropdown-menu-media dropdown-menu-right &quot;&gt;
&lt;li class=&quot;dropdown-menu-header&quot;&gt;
&lt;div class=&quot;dropdown-header m-0 p-2&quot;&gt;
&lt;h3 class=&quot;white&quot;&gt;5 New&lt;/h3&gt;&lt;span class=&quot;grey darken-2&quot;&gt;App Notifications&lt;/span&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;scrollable-container media-list ps ps--active-y&quot;&gt;
&lt;a class=&quot;d-flex justify-content-between&quot; href=&quot;javascript:void(0)&quot;&gt;
&lt;div class=&quot;media d-flex align-items-start&quot;&gt;
&lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;feather icon-plus-square font-medium-5 primary&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class=&quot;media-body&quot;&gt;
&lt;h6 class=&quot;primary media-heading&quot;&gt;You have new order!&lt;/h6&gt;&lt;small class=&quot;notification-text&quot;&gt; Are
your going to meet me
tonight?&lt;/small&gt;
&lt;/div&gt;&lt;small&gt;
&lt;time class=&quot;media-meta&quot; datetime=&quot;2015-06-11T18:29:20+08:00&quot;&gt;9 hours
ago&lt;/time&gt;&lt;/small&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;a class=&quot;d-flex justify-content-between&quot; href=&quot;javascript:void(0)&quot;&gt;
&lt;div class=&quot;media d-flex align-items-start&quot;&gt;
&lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;feather icon-download-cloud font-medium-5 success&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class=&quot;media-body&quot;&gt;
&lt;h6 class=&quot;success media-heading red darken-1&quot;&gt;99% Server load&lt;/h6&gt;
&lt;small class=&quot;notification-text&quot;&gt;You got new order of goods.&lt;/small&gt;
&lt;/div&gt;&lt;small&gt;
&lt;time class=&quot;media-meta&quot; datetime=&quot;2015-06-11T18:29:20+08:00&quot;&gt;5 hour
ago&lt;/time&gt;&lt;/small&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;a class=&quot;d-flex justify-content-between&quot; href=&quot;javascript:void(0)&quot;&gt;
&lt;div class=&quot;media d-flex align-items-start&quot;&gt;
&lt;div class=&quot;media-left&quot;&gt;&lt;i class=&quot;feather icon-alert-triangle font-medium-5 danger&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class=&quot;media-body&quot;&gt;
&lt;h6 class=&quot;danger media-heading yellow darken-3&quot;&gt;Warning notifixation
&lt;/h6&gt;&lt;small class=&quot;notification-text&quot;&gt;Server have 99% CPU usage.&lt;/small&gt;
&lt;/div&gt;&lt;small&gt;
&lt;time class=&quot;media-meta&quot; datetime=&quot;2015-06-11T18:29:20+08:00&quot;&gt;Today&lt;/time&gt;&lt;/small&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;div class=&quot;ps__rail-x&quot; style=&quot;left: 0px; bottom: 0px;&quot;&gt;&lt;div class=&quot;ps__thumb-x&quot; tabindex=&quot;0&quot; style=&quot;left: 0px; width: 0px;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ps__rail-y&quot; style=&quot;top: 0px; right: 0px; height: 254px;&quot;&gt;&lt;div class=&quot;ps__thumb-y&quot; tabindex=&quot;0&quot; style=&quot;top: 0px; height: 184px;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
&lt;li class=&quot;dropdown-menu-footer&quot;&gt;&lt;a class=&quot;dropdown-item p-1 text-center&quot; href=&quot;javascript:void(0)&quot;&gt;Read
all notifications&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
<p>使用</p>
<pre><code class="language-php">$navbar-&gt;right(view('...'));</code></pre>
<h2>添加下拉菜单</h2>
<pre><code class="language-html">&lt;ul class=&quot;nav navbar-nav&quot;&gt;
&lt;li class=&quot;dropdown dropdown-language nav-item&quot;&gt;
&lt;a class=&quot;dropdown-toggle nav-link&quot; href=&quot;#&quot; id=&quot;dropdown-flag&quot; data-toggle=&quot;dropdown&quot;&gt;
&lt;i class=&quot;flag-icon flag-icon-us&quot;&gt;&lt;/i&gt;
&lt;span class=&quot;selected-language&quot;&gt;English&lt;/span&gt;
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdown-flag&quot;&gt;
&lt;li class=&quot;dropdown-item&quot; href=&quot;#&quot; data-language=&quot;en&quot;&gt;
&lt;a&gt;&lt;i class=&quot;flag-icon flag-icon-us&quot;&gt;&lt;/i&gt; English&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;dropdown-item&quot; href=&quot;#&quot; data-language=&quot;fr&quot;&gt;
&lt;a&gt;&lt;i class=&quot;flag-icon flag-icon-fr&quot;&gt;&lt;/i&gt; French&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;dropdown-item&quot; href=&quot;#&quot; data-language=&quot;de&quot;&gt;
&lt;a&gt;&lt;i class=&quot;flag-icon flag-icon-de&quot;&gt;&lt;/i&gt; German&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
<p>使用</p>
<pre><code class="language-php">$navbar-&gt;right(view('...'));</code></pre>
<p>更多的组件可以参考<a href="https://github.com/ColorlibHQ/AdminLTE">AdminLTE3</a>。</p>
<h2>修改默认用户面板</h2>
<p>打开<code>app/Admin/bootstrap.php</code>,写入</p>
<pre><code class="language-php">admin_inject_section(Admin::SECTION['NAVBAR_USER_PANEL'], function () {
return view('admin.partials.navbar-user-panel', ['user' =&gt; Admin::user()]);
});</code></pre>
<p><code>navbar-user-panel.blade.php</code>视图内容</p>
<pre><code class="language-php">@if($user)
&lt;li class=&quot;dropdown dropdown-user nav-item&quot;&gt;
&lt;a class=&quot;dropdown-toggle nav-link dropdown-user-link&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
&lt;div class=&quot;user-nav d-sm-flex d-none&quot;&gt;
&lt;span class=&quot;user-name text-bold-600&quot;&gt;{{ $user-&gt;name }}&lt;/span&gt;
&lt;span class=&quot;user-status&quot;&gt;&lt;i class=&quot;fa fa-circle text-success&quot;&gt;&lt;/i&gt; {{ trans('admin.online') }}&lt;/span&gt;
&lt;/div&gt;
&lt;span&gt;
&lt;img class=&quot;round&quot; src=&quot;{{ $user-&gt;getAvatar() }}&quot; alt=&quot;avatar&quot; height=&quot;40&quot; width=&quot;40&quot; /&gt;
&lt;/span&gt;
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
&lt;a href=&quot;{{ admin_url('auth/setting') }}&quot; class=&quot;dropdown-item&quot;&gt;
&lt;i class=&quot;feather icon-user&quot;&gt;&lt;/i&gt; {{ trans('admin.setting') }}
&lt;/a&gt;
&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;{{ admin_url('auth/logout') }}&quot;&gt;
&lt;i class=&quot;feather icon-power&quot;&gt;&lt;/i&gt; {{ trans('admin.logout') }}
&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
@endif</code></pre>