FEATURE #1365: add some basic layout to admin interface

Admin interface now has some sidebar and content area. Sidebar was supposed to be "dropdown-on-click", however I have not acomplished it yet.

app/MenuPresenters/FoundationMenuPresenter.php

@@ -0,0 +1,63 @@
+<?php
+namespace App\MenuPresenters;
+
+use Pingpong\Menus\Presenters\Presenter;
+
+class FoundationMenuPresenter extends Presenter
+{
+    /**
+     * {@inheritdoc }
+     */
+    public function getOpenTagWrapper()
+    {
+        return  PHP_EOL . '<ul class="vertical menu-bar icon-left">' . PHP_EOL;
+    }
+
+    /**
+     * {@inheritdoc }
+     */
+    public function getCloseTagWrapper()
+    {
+        return  PHP_EOL . '</ul>' . PHP_EOL;
+    }
+
+    /**
+     * {@inheritdoc }
+     */
+    public function getMenuWithoutDropdownWrapper($item)
+    {
+        return '<li'.$this->getActiveState($item).'><a href="'. $item->getUrl() .'">'.$item->getIcon().' '.$item->title.'</a></li>';
+    }
+
+    /**
+     * {@inheritdoc }
+     */
+    public function getActiveState($item)
+    {
+        return \Request::is($item->getRequest()) ? ' class="active"' : null;
+    }
+
+    /**
+     * {@inheritdoc }
+     */
+    public function getDividerWrapper()
+    {
+        return '<li class="divider"></li>';
+    }
+
+    /**
+     * {@inheritdoc }
+     */
+    public function getMenuWithDropDownWrapper($item)
+    {
+        return '<li class="has-dropdown">
+                <a href="#">
+                 '.$item->getIcon().' '.$item->title.'
+                </a>
+                <ul class="dropdown">
+                  '.$this->getChildMenuItems($item).'
+                </ul>
+              </li>' . PHP_EOL;
+        ;
+    }
+}

app/Providers/AdminProvider.php

@@ -25,7 +25,12 @@ class AdminProvider extends ServiceProvider
              * WARNING: MenuBuilder::route() does not seem to work,
              * nor route() helper function. We need to use action() helper instaed.
             */
-            $menu->url(action('Admin\\Dashboard@getIndex'), trans('admin/mainMenu.dashboard'));
+            $menu->url(action('Admin\Dashboard@getIndex'), trans('admin/mainMenu.dashboard'), 1, ['icon' => 'fa fa-dashboard']);
+            $menu->dropdown(trans('admin/mainMenu.userManagement'), function($sub) {
+                $sub->url(action('Admin\UserManagement@getNewUser'), trans('admin/mainMenu.newUser'), 1, ['icon' => 'fa fa-user-plus']);
+                $sub->url(action('Admin\UsersManagement@getOverview', ['state' => 'all']), trans('admin/mainMenu.usersOverview'), 2, ['icon' => 'fa fa-users']);
+
+            }, ['icon' => 'fa fa-users']);
         });
 
         // create menu with user profile

config/menus.php

@@ -9,6 +9,7 @@ return [
         'nav-tab'      => 'Pingpong\Menus\Presenters\Bootstrap\NavTabPresenter',
         'sidebar'      => 'Pingpong\Menus\Presenters\Bootstrap\SidebarMenuPresenter',
         'navmenu'      => 'Pingpong\Menus\Presenters\Bootstrap\NavMenuPresenter',
+        'foundation'  =>  'App\MenuPresenters\FoundationMenuPresenter',
     ],
 
     'ordering' => false,

resources/assets/css/admin.css

@@ -1,7 +1,17 @@
 
+.row {
+	width: 100%;
+	max-width: 100%;
+}
 
+header {
+	background: #ddd;
+}
 
+.sidebar {
+	background: #eee;
 
+}
 
 
 .login-form {

resources/lang/en/admin/mainMenu.php

@@ -1,5 +1,8 @@
 <?php
 
 return [
-    'dashboard' => 'Dashboard'
+    'dashboard' => 'Dashboard',
+    'userManagement' => 'User Management',
+    'newUser' => 'New User',
+    'usersOverview' => 'Overview'
 ];

resources/views/admin/dashboard.blade.php

@@ -1,9 +1,7 @@
 @extends('admin.layout')
 
 @section('content')
+    <h1>Dashboard</h1>
 
-    <div class="row">
+    some fancy content
-        <h1>Dashboard</h1>
-    </div>
-
 @stop

resources/views/admin/layout.blade.php

@@ -6,18 +6,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     @yield('head_meta')
     <title>@yield('pageName') {{$vendorName}}</title>
-    <link rel="stylesheet" href="{{asset('../resources/assets/css/foundation.css')}}" />
+    <link rel="stylesheet" href="{{asset('../resources/assets/css/foundation.min.css')}}" />
+    <link rel="stylesheet" href="{{asset('../resources/assets/css/font-awesome.min.css')}}" />
     <link rel="stylesheet" href="{{asset('../resources/assets/css/admin.css')}}" />
     @yield('head_stylesheets')
 </head>
-<body>
+<body class="admin">
 
-<div class="row">
+<div id="container">
-    {!! Menu::render('mainMenu') !!}
+
+    <header class="row">
+        <section class="logo columns large-2">
+            ...
+        </section>
+
+        <section class="heading columns large-8">
+            <h1>{{$vendorName}}</h1>
+        </section>
+
+        <section class="profile columns large-2">
+            {!! Menu::render('profileMenu') !!}
+        </section>
+    </header>
+
+    <div class="row">
+        <section class="sidebar large-2 columns">
+            {!! Menu::render('mainMenu', 'foundation') !!}
+        </section>
+
+        <section class="content large-10 columns">
+            @yield('content')
+        </section>
+    </div>
+
+    <footer>
+        &copy; {{$vendorName}} {{date('Y')}}
+    </footer>
 </div>
-
-@yield('content')
-
 <script src="{{asset('../resources/assets/js/vendor/jquery.min.js')}}"></script>
 <script src="{{asset('../resources/assets/js/vendor/what-input.min.js')}}"></script>
 <script src="{{asset('../resources/assets/js/foundation.min.js')}}"></script>