Customer account's side menu now being generated dynamically

packages/Webkul/Customer/src/Http/Controllers/CustomerController.php

@@ -42,7 +42,7 @@ class CustomerController extends Controller
         return $customer;
     }
 
-    public function dashboard()
+    public function profile()
     {
         $id = auth()->guard('customer')->user()->id;
         $customer = $this->getCustomer($id);

packages/Webkul/Customer/src/Http/routes.php

@@ -9,7 +9,7 @@ Route::group(['middleware' => ['web']], function () {
         ])->name('customer.session.index');
 
         Route::post('login', 'Webkul\Customer\Http\Controllers\SessionController@create')->defaults('_config', [
-            'redirect' => 'customer.dashboard.index'
+            'redirect' => 'customer.account.profile'
         ])->name('customer.session.create');
 
 
@@ -19,7 +19,7 @@ Route::group(['middleware' => ['web']], function () {
         ])->name('customer.register.index');
 
         Route::post('register', 'Webkul\Customer\Http\Controllers\RegistrationController@create')->defaults('_config', [
-            'redirect' => 'customer.dashboard.index',
+            'redirect' => 'customer.account.profile',
         ])->name('customer.register.create');
 
         // Auth Routes
@@ -30,15 +30,17 @@ Route::group(['middleware' => ['web']], function () {
                 'redirect' => 'customer.session.index'
             ])->name('customer.session.destroy');
 
-            //customer dashboard
-            Route::get('dashboard', 'Webkul\Customer\Http\Controllers\CustomerController@dashboard')->defaults('_config', [
-                'view' => 'shop::customers.dashboard.index'
-            ])->name('customer.dashboard.index');
+            //customer account
+            Route::prefix('account')->group(function () {
+                Route::get('profile', 'Webkul\Customer\Http\Controllers\CustomerController@profile')->defaults('_config', [
+                'view' => 'shop::customers.profile.home.index'
+                ])->name('customer.account.profile');
 
                 //profile edit
                 Route::get('profile/edit', 'Webkul\Customer\Http\Controllers\CustomerController@editProfile')->defaults('_config', [
-                'view' => 'shop::customers.profile.edit'
+                    'view' => 'shop::customers.profile.edit.index'
                 ])->name('customer.profile.edit');
             });
         });
+    });
 });

packages/Webkul/Customer/src/Menu.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Webkul\Customer;
+
+use Illuminate\Support\Facades\HTML;
+use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\URL;
+
+class Menu
+{
+    public $items = array();
+
+    public static function create($callback)
+    {
+        $menu = new Menu();
+        $callback($menu);
+        return $menu;
+    }
+
+    public function add($route, $name)
+    {
+        $url = route($route);
+        $item = [
+            'name' => $name,
+            'url' => $url,
+        ];
+        array_push($this->items, $item);
+    }
+}

packages/Webkul/Customer/src/Providers/CustomerServiceProvider.php

@@ -7,9 +7,7 @@ use Illuminate\Support\Facades\Event;
 use Illuminate\Routing\Router;
 use Illuminate\Support\Facades\Blade;
 use Webkul\Customer\Http\Middleware\RedirectIfNotCustomer;
-use Webkul\Admin\Providers\EventServiceProvider;
-
-// use Webkul\Admin\Providers\ComposerServiceProvider;
+use Webkul\Customer\Providers\EventServiceProvider;
 
 class CustomerServiceProvider extends ServiceProvider
 {
@@ -26,6 +24,14 @@ class CustomerServiceProvider extends ServiceProvider
         $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
 
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'customer');
+
+        $this->composeView();
+
+        Blade::directive('continue', function () {
+            return "<?php continue; ?>";
+        });
+
+        $this->app->register(EventServiceProvider::class);
     }
 
     /**
@@ -37,4 +43,13 @@ class CustomerServiceProvider extends ServiceProvider
     {
         // $this->app->bind('datagrid', 'Webkul\Ui\DataGrid\DataGrid');
     }
+
+    protected function composeView()
+    {
+        view()->composer(['shop::customers.profile.partials.sidemenu'], function ($view) {
+            $menu = current(Event::fire('customer.menu.create'));
+
+            $view->with('menu', $menu);
+        });
+    }
 }

packages/Webkul/Customer/src/Providers/EventServiceProvider.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Webkul\Customer\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\View;
+use Webkul\Customer\Menu;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->createCustomerAccountSideMenu();
+    }
+
+    /**
+     * This method fires an event for menu creation, any package can add their menu item by listening to the customer.menu.build event
+     *
+     * @return void
+     */
+
+    public function createCustomerAccountSideMenu()
+    {
+        Event::listen('customer.menu.create', function () {
+            return Menu::create(function ($menu) {
+                Event::fire('customer.menu.build', $menu);
+            });
+        });
+
+        Event::listen('customer.menu.build', function ($menu) {
+            $menu->add('customer.account.profile', 'Profile');
+            $menu->add('customer.account.profile', 'Wishlist');
+        });
+    }
+}

packages/Webkul/Shop/src/Resources/assets/sass/app.scss

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
+
 @import "mixins";
 @import "variables";
 
@@ -473,15 +474,15 @@ body {
 }
 
 //customer pages styles goes here
-//dashboard
-.dashboard-content {
+//account layout
+.account-content {
     width: 100%;
     display: flex;
     flex-direction: row;
     margin-top: 5.5%;
     margin-bottom: 5.5%;
 
-    .dashboard-side-menu {
+    .account-side-menu {
         display: flex;
         flex-direction: column;
         align-content: center;
@@ -512,6 +513,9 @@ body {
         li:last-child {
             border-bottom: none;
         }
+        li.active {
+            color: #0031f0;
+        }
     }
 
     .profile {
@@ -563,45 +567,43 @@ body {
             }
         }
     }
-}
-//dashboard ends here
-
-//edit form
-.edit-form-content {
-    margin-top: 5%;
-    margin-bottom: 5%;
+    //edit form
+    .edit-form-content {
+        margin-left: 5.5%;
+        margin-top: 1%;
+        width: 100%;
 
         .edit-text {
             margin-bottom: 2%;
             margin-left: auto;
             margin-right: auto;
-        text-align: center;
             font-size: 24px;
-        text-align: center;
         }
 
         .edit-form {
-        margin-left: auto;
-        margin-right: auto;
+            // margin-left: auto;
+            // margin-right: auto;
             display: flex;
             background: $background-color;
             border: 1px solid $border-color;
             flex-direction: column;
-        max-width: 530px;
-        min-width: 380px;
+            // max-width: 530px;
+            // min-width: 380px;
             min-height: 345px;
             padding: 25px;
 
             .control-group {
                 input,
                 select {
-                font-family: "monserrat", sans-serif;
+                    font-family: "Montserrat", sans-serif;
                     width: 100%;
                 }
             }
         }
+    }
+    //edit form ends
 }
-//edit form ends
+//account ends here
 
 //customers page css ends here
 

packages/Webkul/Shop/src/Resources/views/customers/profile/edit.blade.php

@@ -1,53 +0,0 @@
-@extends('shop::layouts.master')
-@section('content-wrapper')
-    <div class="edit-form-content">
-        <div class="edit-text">Edit Profile</div>
-        <form method="post" action="{{ route('customer.register.create') }}">
-            <div class="edit-form">
-                {{ csrf_field() }}
-                <div class="control-group">
-                    <label for="first_name">First Name</label>
-                    <input type="text" class="control" name="first_name" value="{{ $customer['first_name'] }}" v-validate="'required'">
-                    {{-- <span>@{{ errors.first('first_name') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="last_name">Last Name</label>
-                    <input type="text" class="control" name="last_name" value="{{ $customer['last_name'] }}" v-validate="'required'">
-                    {{-- <span>@{{ errors.first('last_name') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="email">Email</label>
-                    <input type="email" class="control" name="email" value="{{ $customer['email'] }}" v-validate="'required'">
-                    {{-- <span>@{{ errors.first('email') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="email">Gender</label>
-                    <select name="gender" class="control" value="{{ $customer['gender'] }}" v-validate="'required'">
-                        <option value="Male">Male</option>
-                        <option value="Female">Female</option>
-                    </select>
-                    {{-- <span>@{{ errors.first('gender') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="dob">Date of Birth</label>
-                    <input type="date" class="control" name="dob" value="{{ $customer['date_of_birth'] }}" v-validate="'required'">
-                    {{-- <span>@{{ errors.first('first_name') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="phone">Phone</label>
-                    <input type="text" class="control" name="phone" value="{{ $customer['phone'] }}" v-validate="'required'">
-                    {{-- <span>@{{ errors.first('phone') }}</span> --}}
-                </div>
-                <div class="control-group">
-                    <label for="password">Password</label>
-                    <input type="password" class="control" name="password">
-                </div>
-                <div class="control-group">
-                    <label for="password">Confirm Password</label>
-                    <input type="password" class="control" name="password">
-                </div>
-                <input class="btn btn-primary btn-lg" type="submit" value="Update Profile">
-            </div>
-        </form>
-    </div>
-@endsection

packages/Webkul/Shop/src/Resources/views/customers/profile/edit/index.blade.php

@@ -0,0 +1,50 @@
+@extends('shop::layouts.master')
+@section('content-wrapper')
+    <div class="account-content">
+        @include('shop::customers.profile.partials.sidemenu')
+        <div class="edit-form-content">
+            <div class="edit-text">Edit Profile</div>
+            <form method="post" action="{{ route('customer.register.create') }}">
+                <div class="edit-form">
+                    {{ csrf_field() }}
+                    <div class="control-group">
+                        <label for="first_name">First Name</label>
+                        <input type="text" class="control" name="first_name" value="{{ $customer['first_name'] }}" v-validate="'required'">                {{-- <span>@{{ errors.first('first_name') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="last_name">Last Name</label>
+                        <input type="text" class="control" name="last_name" value="{{ $customer['last_name'] }}" v-validate="'required'">                {{-- <span>@{{ errors.first('last_name') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="email">Email</label>
+                        <input type="email" class="control" name="email" value="{{ $customer['email'] }}" v-validate="'required'">                {{-- <span>@{{ errors.first('email') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="email">Gender</label>
+                        <select name="gender" class="control" value="{{ $customer['gender'] }}" v-validate="'required'">
+                                <option value="Male">Male</option>
+                                <option value="Female">Female</option>
+                            </select> {{-- <span>@{{ errors.first('gender') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="dob">Date of Birth</label>
+                        <input type="date" class="control" name="dob" value="{{ $customer['date_of_birth'] }}" v-validate="'required'">                {{-- <span>@{{ errors.first('first_name') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="phone">Phone</label>
+                        <input type="text" class="control" name="phone" value="{{ $customer['phone'] }}" v-validate="'required'">                {{-- <span>@{{ errors.first('phone') }}</span> --}}
+                    </div>
+                    <div class="control-group">
+                        <label for="password">Password</label>
+                        <input type="password" class="control" name="password">
+                    </div>
+                    <div class="control-group">
+                        <label for="password">Confirm Password</label>
+                        <input type="password" class="control" name="password">
+                    </div>
+                    <input class="btn btn-primary btn-lg" type="submit" value="Update Profile">
+                </div>
+            </form>
+        </div>
+    </div>
+@endsection

packages/Webkul/Shop/src/Resources/views/customers/profile/home/index.blade.php

@@ -1,17 +1,11 @@
 @extends('shop::layouts.master')
 @section('content-wrapper')
-<div class="dashboard-content">
-    <ul class="dashboard-side-menu">
-        <li>Profile</li>
-        <li>Orders</li>
-        <li>Address</li>
-        <li>Reviews</li>
-        <li>Wishlist</li>
-    </ul>
+<div class="account-content">
+    @include('shop::customers.profile.partials.sidemenu')
     <div class="profile">
         <div class="section-head">
             <span class="profile-heading">Profile</span>
-            <span class="profile-edit">Edit</span>
+            <span class="profile-edit"><a href="{{ route('customer.profile.edit') }}">Edit</a></span>
             <div class="horizontal-rule"></div>
         </div>
         <div class="profile-content">

packages/Webkul/Shop/src/Resources/views/customers/profile/partials/sidemenu.blade.php

@@ -0,0 +1,5 @@
+<ul class="account-side-menu">
+    @foreach($menu->items as $key=>$value)
+        <li class="{{ request()->is('*/account/profile') ? 'active' : '' }}"><a href="{{ $value['url'] }}">{{ $value['name'] }}</a></li>
+    @endforeach
+</ul>

public/vendor/webkul/shop/assets/css/shop.css

@@ -562,7 +562,7 @@
   margin-bottom: 4%;
 }
 
-.dashboard-content {
+.account-content {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -575,7 +575,7 @@
   margin-bottom: 5.5%;
 }
 
-.dashboard-content .dashboard-side-menu {
+.account-content .account-side-menu {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -597,7 +597,7 @@
   color: #5e5e5e;
 }
 
-.dashboard-content .dashboard-side-menu li {
+.account-content .account-side-menu li {
   font-size: 16px;
   width: 95%;
   height: 50px;
@@ -619,28 +619,32 @@
   text-align: center;
 }
 
-.dashboard-content .dashboard-side-menu li:first-child {
+.account-content .account-side-menu li:first-child {
   border-top: none;
 }
 
-.dashboard-content .dashboard-side-menu li:last-child {
+.account-content .account-side-menu li:last-child {
   border-bottom: none;
 }
 
-.dashboard-content .profile {
+.account-content .account-side-menu li.active {
+  color: #0031f0;
+}
+
+.account-content .profile {
   margin-left: 5.5%;
   margin-top: 1%;
   width: 100%;
 }
 
-.dashboard-content .profile .section-head .profile-heading {
+.account-content .profile .section-head .profile-heading {
   font-size: 28px;
   color: #242424;
   text-transform: capitalize;
   text-align: left;
 }
 
-.dashboard-content .profile .section-head .profile-edit {
+.account-content .profile .section-head .profile-edit {
   font-size: 17px;
   margin-top: 1%;
   color: #0031f0;
@@ -648,7 +652,7 @@
   float: right;
 }
 
-.dashboard-content .profile .section-head .horizontal-rule {
+.account-content .profile .section-head .horizontal-rule {
   margin-top: 1.1%;
   width: 100%;
   height: 1px;
@@ -656,38 +660,35 @@
   background: #e8e8e8;
 }
 
-.dashboard-content .profile-content {
+.account-content .profile-content {
   font-size: 16px;
   color: #5e5e5e;
   margin-top: 1.4%;
 }
 
-.dashboard-content .profile-content table tbody tr {
+.account-content .profile-content table tbody tr {
   height: 45px;
 }
 
-.dashboard-content .profile-content table tbody tr td {
+.account-content .profile-content table tbody tr td {
   width: 250px;
   text-transform: capitalize;
 }
 
-.edit-form-content {
-  margin-top: 5%;
-  margin-bottom: 5%;
+.account-content .edit-form-content {
+  margin-left: 5.5%;
+  margin-top: 1%;
+  width: 100%;
 }
 
-.edit-form-content .edit-text {
+.account-content .edit-form-content .edit-text {
   margin-bottom: 2%;
   margin-left: auto;
   margin-right: auto;
-  text-align: center;
   font-size: 24px;
-  text-align: center;
 }
 
-.edit-form-content .edit-form {
-  margin-left: auto;
-  margin-right: auto;
+.account-content .edit-form-content .edit-form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -697,15 +698,13 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  max-width: 530px;
-  min-width: 380px;
   min-height: 345px;
   padding: 25px;
 }
 
-.edit-form-content .edit-form .control-group input,
-.edit-form-content .edit-form .control-group select {
-  font-family: "monserrat", sans-serif;
+.account-content .edit-form-content .edit-form .control-group input,
+.account-content .edit-form-content .edit-form .control-group select {
+  font-family: "Montserrat", sans-serif;
   width: 100%;
 }