现在我们在页面上添加一个导航栏，在上面可以根据用户的登录状态显示不同的内容 .. 这个导航栏可以把它放在 main 这个布局里面 .. 这里可以包含进来一个 partial .. include ... 位置是 partials 里的 navbar ..

再去创建这个 partial .. 放在 resources .. views 下面 .. 新建一个 partials ，文件是 navbar.edge ..

先设计一个导航的基本的样式 .. 我用需要的导航栏的样式来自 Bootstrap 这套 css 样式框架 .. 先去复制一块导航栏的代码 .. 打开 bootstrap 框架的文档 .. 找到 Navbar 这个组件 ...

这里你会找到这个导航栏组件的演示代码 .. 我们可以直接复制一下这块带下拉菜单的导航栏的代码 .. 粘贴到项目的 navbar 这个 partial 里面 ..

这个 navbar-brand 里面的东西是我们网站的名字 .. 可以设置成 ninghao ... 文字的前面再添加一个 font awesome 小图标 .. 小 i 标签，加上 fas fa-align-right ..

然后可以再添加点自定义的样式 .. 打开 public .. main.css .. 设置一下 .navbar-brand 这个类的样式 ..

text-transform 设置成 uppercase，让文字变成大写的 .. letter-spacing ，设置一下字符间距 . 3px .. font-weight 设置成 bold，让文字加粗 ..

预览

到浏览器上再预览一下 .. 现在页面上会显示一个导航栏 .. 导航栏上有几个菜单项目 .. 里面还有一个下拉菜单 .. 改变一下窗口的尺寸 .. 到一定程度的时候，菜单栏上的东西会隐藏起来 .. 右边会显示一个菜单图标 .. 按一下它，会显示导航栏里的内容 ..