Got the tree view working

resources/assets/sass/_text.scss

@@ -199,4 +199,8 @@ ul {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
+}
+
+.list > * {
+  display: block;
 }

resources/assets/sass/styles.scss

@@ -72,6 +72,9 @@ header .menu {
   &.left {
     float: left;
   }
+  h1 {
+    margin-top: 0.2em;
+  }
 }
 
 .page-list {
@@ -204,4 +207,65 @@ h1, h2, h3, h4, h5, h6 {
   &:hover a.link-hook {
     opacity: 1;
   }
+}
+
+.breadcrumbs {
+  margin-top: $-s;
+  a, span {
+    color: #666;
+    font-size: 0.9em;
+  }
+  i {
+    padding-right: 4px;
+  }
+  span.sep {
+    color: #888;
+    padding: 0 $-xs;
+  }
+}
+
+
+.nested-page-list {
+  list-style: none;
+  margin-left: 0;
+  li {
+    border-top: 3px dotted #BBB;
+    padding: $-s 0;
+    user-select: none;
+  }
+  li:last-child {
+    border-bottom: 3px dotted #BBB;
+  }
+  .nested-page-list {
+    margin-top: $-xs;
+    display: none;
+    margin: $-xs 0 $-xs 9px;
+    font-size: $fs-m * 0.9;
+    border-left: 2px solid #EEE;
+  }
+  .nested-page-list li {
+    border: none;
+    padding-right: $-m;
+    padding-left: $-m;
+    &.expanded.has-children {
+      padding-bottom: 0;
+    }
+  }
+  i.arrow {
+    font-size: 0.8em;
+    padding: $-xs;
+    margin-top: -$-xs;
+    margin-bottom: -$-xs;
+    transform-origin: 50% 50%;
+    transition: transform ease-in-out 180ms;
+    cursor: pointer;
+  }
+  li.expanded {
+    > i.arrow {
+      transform: rotate(90deg);
+    }
+    >.nested-page-list {
+      display: block;
+    }
+  }
 }

resources/views/books/show.blade.php

@@ -20,24 +20,24 @@
                 <h4 class="float">Pages</h4>
                 <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
             </div>
-            <div class="page-list">
-                @if(count($book->pages) > 0)
-                    @foreach($book->pages as $page)
-                        <a href="{{$page->getUrl()}}">{{$page->name}}</a>
-                    @endforeach
-                @else
-                    <p class="text-muted">This book has no pages</p>
-                @endif
-            </div>
-
-            <p>
-
-            </p>
 
+            @include('pages/page-tree-list', ['pageTree' => $pageTree])
 
         </div>
 
 
     </div>
 
+    <script>
+        $(function() {
+
+            $('.nested-page-list i.arrow').click(function() {
+                var list = $(this).closest('.nested-page-list');
+                var listItem = $(this).closest('li');
+                listItem.toggleClass('expanded');
+            });
+
+        });
+    </script>
+
 @stop

resources/views/pages/create.blade.php

@@ -9,6 +9,9 @@
 @section('content')
     <form action="{{$book->getUrl() . '/page'}}" method="POST">
         @include('pages/form')
+        @if($parentPage)
+            <input type="hidden" name="parent" value="{{$parentPage->id}}">
+        @endif
     </form>
 @stop
 

resources/views/pages/form.blade.php

@@ -8,7 +8,7 @@
 
     {{ csrf_field() }}
     <div class="title-input page-title">
-            @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
+        @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
     </div>
     <div class="edit-area">
         @include('form/textarea', ['name' => 'html'])

resources/views/pages/page-tree-list.blade.php

@@ -0,0 +1,15 @@
+
+
+<ul class="nested-page-list">
+    @foreach($pageTree as $subPage)
+        <li @if($subPage['hasChildren'])class="has-children"@endif>
+            @if($subPage['hasChildren'])
+                <i class="fa fa-chevron-right arrow"></i>
+            @endif
+            <a href="{{$subPage['url']}}">{{$subPage['name']}}</a>
+            @if($subPage['hasChildren'])
+                @include('pages/page-tree-list', ['pageTree' => $subPage['pages']])
+            @endif
+        </li>
+    @endforeach
+</ul>

resources/views/pages/show.blade.php

@@ -10,12 +10,32 @@
             </div>
             <div class="page-actions">
                 <h4>Actions</h4>
-                <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
+                <div class="list">
+                    <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
+                    <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
+                </div>
             </div>
         </div>
 
         <div class="page-content right col-md-9">
+            <div class="breadcrumbs">
+                <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
+                @if($breadCrumbs)
+                    @foreach($breadCrumbs as $parentPage)
+                        <span class="sep">&gt;</span>
+                        <a href="{{$parentPage->getUrl()}}">{{ $parentPage->name }}</a>
+                    @endforeach
+                @endif
+            </div>
             <h1>{{$page->name}}</h1>
+            @if(count($page->pages) > 0)
+                <h4 class="text-muted">Sub-pages</h4>
+                <div class="page-list">
+                    @foreach($page->pages as $childPage)
+                        <a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
+                    @endforeach
+                </div>
+            @endif
             {!! $page->html !!}
         </div>
     </div>
@@ -37,7 +57,6 @@
             var pageNav = $('.page-nav-list');
             var pageContent = $('.page-content');
             var headers = pageContent.find('h1, h2, h3, h4, h5, h6');
-            var sortedHeaders = [];
             headers.each(function() {
                 var header = $(this);
                 var tag = header.prop('tagName');