HTML5 history API integration for back-forward

app/Http/Controllers/AppSessionController.php

@@ -34,7 +34,7 @@ class AppSessionController extends Controller
 
         $cookie = cookie()->forever('sessionKey', $sessionKey, '/');
 
-        return redirect("/mc?page=/dashboard")->withCookie($cookie);
+        return redirect("/mc/dashboard")->withCookie($cookie);
     }
 
     public function processProLogOut(Request $request){

app/Http/Controllers/MeetingCenterController.php

@@ -10,10 +10,10 @@ use App\Models\Pro;
 class MeetingCenterController extends Controller
 {
 
-    public function mc(Request $request) {
+    public function mc(Request $request, $fragment) {
         $page = "/my_teams";
-        if($request->input('page')) {
-            $page = $request->input('page');
+        if($fragment) {
+            $page = '/' . $fragment;
         }
         return view('mc', compact('page'));
     }

app/Http/Middleware/EnsureNoValidSession.php

@@ -33,7 +33,7 @@ class EnsureNoValidSession
             return $next($request);
         }
 
-        return redirect("/mc?page=/dashboard");
+        return redirect("/mc/dashboard");
 
     }
 }

resources/views/layouts/pro-logged-in.blade.php

@@ -115,23 +115,36 @@
 
 <script>
     if(window === window.top) {
-        window.location.href = '/mc?page=' + window.location.pathname;
+        window.location.href = '/mc' + window.location.pathname;
     }
 </script>
 
 <script>
     // Prevent variables from being global
     $(document).ready(function () {
-        $(document).on('click', 'a:not([href="#"])', function() {
-            $.get(this.href, function(_data) {
+        function gotoTarget(target, pushState) {
+            $.get('/' + target, function(_data) {
                 var received = $(_data);
                 // $('#main-sidenav').replaceWith($(_data).find('#main-sidenav'));
                 var activeHref = $(_data).find('#main-sidenav').find('.nav-link.active').attr('href');
                 $('#main-sidenav a.nav-link.active').removeClass('active');
-                $('#main-sidenav a[href="' + activeHref + '"]').addClass('active');
+                $('#main-sidenav a[href="' + activeHref + '"]').addClass('active').focus();
                 $('#main-content').replaceWith($(_data).find('#main-content'));
                 $(window).scrollTop(0);
+                if(pushState) {
+                    window.top.history.pushState(target, null, '/mc/' + target);
+                }
             });
+        }
+        $(document).on('click', 'a:not([href="#"])', function() {
+            var target = this.href;
+            if(target.indexOf('//') !== -1) {
+                target = target.split('//')[1];
+                if(target.indexOf('/') !== -1) {
+                    target = target.substr(target.indexOf('/') + 1);
+                }
+            }
+            gotoTarget(target, true);
             return false;
         });
         $(document).on('submit', 'form[action="/post-to-api"]', function() {
@@ -141,6 +154,11 @@
             });
             return false;
         });
+        window.top.addEventListener('popstate', function(event) {
+            if(!!event.state) {
+                gotoTarget(event.state, false);
+            }
+        });
     });
 </script>
 

routes/web.php

@@ -48,10 +48,12 @@ Route::middleware('ensureValidSession')->group(function(){
 
     Route::get('/pro/logout', 'AppSessionController@processProLogOut')->name('pro-logout');
 
-    Route::get('/mc', 'MeetingCenterController@mc')->name('mc');
-
     @include 'generated.php';
 
+    Route::get('/mc/{fragment}', 'MeetingCenterController@mc')
+        ->where('fragment', '.+')
+        ->name('mc');
+
 });
 
 Route::post('/post-to-api', 'AppSessionController@postToAPI')->name('post-to-api');