diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index e84f05a..a8db98a 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,8 +1,9 @@
 const Edit=Vue.extend({
   template: `
- <v-container fluid="">
+<v-container fluid="">
+ <v-layout row="" wrap="">
+<v-flex xs12="">
 <v-toolbar class="green">
-  <v-toolbar-side-icon></v-toolbar-side-icon>
   <v-toolbar-title>
     <v-btn @click.native="showfiles()" small="" icon=""><v-icon>folder</v-icon></v-btn>
 <span>{{ name }}</span> <v-chip small="" class="primary white--text">{{ mode }}</v-chip>
@@ -84,9 +85,13 @@ const Edit=Vue.extend({
     </v-card-row>
   </v-card>
 </v-dialog>
-    <div v-if="!busy" style="height:70vh">
+</v-flex>
+<v-flex xs12="" style="height:70vh" v-if="!busy" fill-height="">
+  
     <vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
-  </div>
+  
+  </v-flex>
+</v-layout>
 
  </v-container>
 `,
@@ -287,16 +292,16 @@ const Files=Vue.extend({
 );
 const Home=Vue.extend({
   template: `
-<v-row class="ma-5">
-<v-col xs4="">
+<v-layout class="ma-5">
+<v-flex xs4="">
 <v-card hover="" raised="">
   <v-card-row height="200px" class="pa-5 green lighten-1">
     <div class="display-1 white--text text-xs-center">VUE-POC</div>
     v0.0.1
   </v-card-row>
 </v-card>
-</v-col>
-<v-col xs4="">
+</v-flex>
+<v-flex xs4="">
   <p>This is a experiment in using <code>vue.js</code>.</p>
   <ul>
   <li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
@@ -305,19 +310,19 @@ const Home=Vue.extend({
 <li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li>
 
   </ul>
-</v-col>
+</v-flex>
 <v-btn floating="floating">
   <v-icon>add</v-icon>
 </v-btn>
  <my-component>REPLACED</my-component>
-</v-row>
+</v-layout>
 `}
 
 );
 const Options=Vue.extend({  
   template: `
-<v-row>
-<v-col xs2="">
+<v-layout>
+<v-flex xs2="">
 <v-card class="blue darken-4 white--text">
   <v-card-row height="200px">
     <v-card-title>
@@ -334,24 +339,24 @@ const Options=Vue.extend({
     </v-btn>
   </v-card-row>
 </v-card>
-</v-col>
+</v-flex>
 
-<v-col xs6="">
+<v-flex xs6="">
        <v-text-field name="url" label="Image location" :required="true" :full-width="false"></v-text-field>
-</v-col>
+</v-flex>
 
-<v-col xs4="">
+<v-flex xs4="">
    <v-card-row img="music.jpg" height="300px"></v-card-row>
   <v-btn block="" primary="" @click.native="snackbar = true" dark="">Show Snackbar</v-btn>
  <v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
-</v-col>
+</v-flex>
 <v-snackbar v-model="snackbar">
     Hello, I'm a snackbar
     <v-btn flat="" class="pink--text" @click.native="snackbar = false">
          <v-icon>highlight_off</v-icon>
     </v-btn>
   </v-snackbar>
-  </v-row>
+  </v-layout>
 `,
   data: function(){
     return {
@@ -364,19 +369,19 @@ const Options=Vue.extend({
 const People=Vue.extend({
   template: `
  <v-container fluid="">
-  <v-row>Look at all the people who work here!
+  <v-layout>Look at all the people who work here!
   <v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
   <p>{{ message }}</p>
  
-  </v-row>
-  <v-row>
-  <v-col xs5="">
+  </v-layout>
+  <v-layout>
+  <v-flex xs5="">
    <v-card-row img="music.jpg" height="300px"></v-card-row>
-  </v-col>
-  <v-col xs5="">
+  </v-flex>
+  <v-flex xs5="">
   <v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row>
-  </v-col>
-  </v-row>
+  </v-flex>
+  </v-layout>
  </v-container>
 `,
   data:  function(){
@@ -567,7 +572,8 @@ const app = new Vue({
   router,
   data:function(){return {
     q:"",
-    sidebar:false,
+    drawer:true,
+    mini: false,
     items: [{
       href: '/',
       router: true,
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 136f3f1..4dcc1ee 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -9,7 +9,7 @@
 <title>Vue Router Test</title>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-<link href="https://unpkg.com/vuetify@0.11.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.css" rel="stylesheet" type="text/css">
 <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css"  rel="stylesheet" type="text/css">
 
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@@ -19,7 +19,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@0.11.1/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.js"></script>
 <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
@@ -32,38 +32,54 @@
 <script src="/vue-poc/ui/vue-ace.js"></script>
 </head>
 <body>
-<v-app id="app" top-toolbar left-fixed-sidebar sidebar-under-toolbar>
+<v-app id="app" >
+ <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer">
+  <v-list class="pa-0">
+        <v-list-item>
+          <v-list-tile avatar tag="div">
+            <v-list-tile-avatar>
+              <img src="https://randomuser.me/api/portraits/men/85.jpg" />
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Random name</v-list-tile-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+              <v-btn icon @click.native.stop="mini = !mini">
+                <v-icon>chevron_left</v-icon>
+              </v-btn>
+            </v-list-tile-action>
+          </v-list-tile>
+        </v-list-item>
+      </v-list>
+      <v-list class="pt-0" dense>
+        <v-divider></v-divider>
+        <v-list-item v-for="item in items" :key="item">
+        
+          <v-list-tile >
+          
+            <v-list-tile-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title ><router-link :to="item.href">{{ item.title }}</router-link></v-list-tile-title>
+            </v-list-tile-content>
+           
+          </v-list-tile>
+          
+        </v-list-item>
+      </v-list>
+ </v-navigation-drawer>
  <v-toolbar class="blue" >
-  <v-toolbar-side-icon @click.native.stop="openSidebar()"  ></v-toolbar-side-icon>  
+  <v-toolbar-side-icon @click.native.stop="drawer = !drawer"  ></v-toolbar-side-icon>  
   <v-toolbar-title class="hidden-sm-and-down">Vue PoC</v-toolbar-title>
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q"
    hide-details single-line dark @keyup.native.enter="search"></v-text-field>
 </v-toolbar>
- <main>
-  <v-sidebar fixed class="white--text" v-model="sidebar">
-                <div class="px-3">
-                    <h3 class="white--text mt-3">Sidebar</h3>
-                    <p>This is just an example sidebar.</p>
-                </div>
-                <v-list>
-                    <v-list-tile v-for="(item, i) in items" :href="item.href" :router="item.router" avatar key="i">
-                        <v-list-tile-avatar>
-                            <v-icon>{{item.icon}}</v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            {{ item.title }}
-                        </v-list-tile-content>
-                    </v-list-tile>
-                </v-list>
-</v-sidebar>
-    <v-content class="pt-0">
-      <v-container fluid>
+ <main>    
       <transition name="fade" mode="out-in">
         <router-view class="view ma-3"></router-view>
         </transition>
-     </v-container>
-     </v-content>
      </main>
 </v-app>
 
diff --git a/src/vue-poc/static/core.js b/src/vue-poc/static/core.js
index eb43f65..330bdbd 100644
--- a/src/vue-poc/static/core.js
+++ b/src/vue-poc/static/core.js
@@ -54,7 +54,8 @@ const app = new Vue({
   router,
   data:function(){return {
     q:"",
-    sidebar:false,
+    drawer:true,
+    mini: false,
     items: [{
       href: '/',
       router: true,
diff --git a/src/vue-poc/templates/edit.vue b/src/vue-poc/templates/edit.vue
index c6e433e..2518b53 100644
--- a/src/vue-poc/templates/edit.vue
+++ b/src/vue-poc/templates/edit.vue
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <template id="edit">
- <v-container fluid>
+<v-container fluid>
+ <v-layout row wrap>
+<v-flex xs12>
 <v-toolbar class="green">
-  <v-toolbar-side-icon></v-toolbar-side-icon>
   <v-toolbar-title>
     <v-btn @click.native="showfiles()" small icon><v-icon>folder</v-icon></v-btn>
 <span >{{ name }}</span> <v-chip small class="primary white--text">{{ mode }}</v-chip>
@@ -84,11 +85,15 @@
     </v-card-row>
   </v-card>
 </v-dialog>
-    <div v-if="!busy" style="height:70vh">
+</v-flex>
+<v-flex xs12 style="height:70vh" v-if="!busy" fill-height>
+  
     <vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap"
 v-on:change-content="changeContentA" 
 v-on:annotation="annotation"></vue-ace>
-  </div>
+  
+  </v-flex>
+</v-layout>
 
  </v-container>
 </template>
diff --git a/src/vue-poc/templates/home.vue b/src/vue-poc/templates/home.vue
index 2c8002b..45d26b9 100644
--- a/src/vue-poc/templates/home.vue
+++ b/src/vue-poc/templates/home.vue
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <template id="home">
-<v-row class="ma-5">
-<v-col xs4>
+<v-layout class="ma-5">
+<v-flex xs4>
 <v-card hover raised>
   <v-card-row height="200px" class="pa-5 green lighten-1">
     <div class="display-1 white--text text-xs-center">VUE-POC</div>
     v0.0.1
   </v-card-row>
 </v-card>
-</v-col>
-<v-col xs4>
+</v-flex>
+<v-flex xs4>
   <p>This is a experiment in using <code>vue.js</code>.</p>
   <ul>
   <li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
@@ -18,12 +18,12 @@
 <li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li>
 
   </ul>
-</v-col>
+</v-flex>
 <v-btn floating="floating">
   <v-icon>add</v-icon>
 </v-btn>
  <my-component>REPLACED</my-component>
-</v-row>
+</v-layout>
 </template>
 <script>{
   template: '#home'}
diff --git a/src/vue-poc/templates/options.vue b/src/vue-poc/templates/options.vue
index cfdcb82..984ead9 100644
--- a/src/vue-poc/templates/options.vue
+++ b/src/vue-poc/templates/options.vue
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="options">
-<v-row >
-<v-col xs2>
+<v-layout >
+<v-flex xs2>
 <v-card class="blue darken-4 white--text">
   <v-card-row height="200px">
     <v-card-title>
@@ -18,27 +18,27 @@
     </v-btn>
   </v-card-row>
 </v-card>
-</v-col>
+</v-flex>
 
-<v-col xs6>
+<v-flex xs6>
        <v-text-field
             name="url"
             label="Image location" :required=true :full-width=false
        ></v-text-field>
-</v-col>
+</v-flex>
 
-<v-col xs4>
+<v-flex xs4>
    <v-card-row img="music.jpg" height="300px"></v-card-row>
   <v-btn block primary @click.native="snackbar = true" dark>Show Snackbar</v-btn>
  <v-btn class="white--text"  @click.native="snackbar = true">Snackbar?</v-btn>
-</v-col>
+</v-flex>
 <v-snackbar   v-model="snackbar">
     Hello, I'm a snackbar
     <v-btn flat class="pink--text" @click.native="snackbar = false">
          <v-icon>highlight_off</v-icon>
     </v-btn>
   </v-snackbar>
-  </v-row>
+  </v-layout>
 </template>
 
 <script>{  
diff --git a/src/vue-poc/templates/people.vue b/src/vue-poc/templates/people.vue
index dc04ae4..e8720e6 100644
--- a/src/vue-poc/templates/people.vue
+++ b/src/vue-poc/templates/people.vue
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <template id="people">
  <v-container fluid>
-  <v-row >Look at all the people who work here!
+  <v-layout >Look at all the people who work here!
   <v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn>
   <p>{{ message }}</p>
  
-  </v-row>
-  <v-row>
-  <v-col xs5>
+  </v-layout>
+  <v-layout>
+  <v-flex xs5>
    <v-card-row img="music.jpg" height="300px"></v-card-row>
-  </v-col>
-  <v-col xs5>
+  </v-flex>
+  <v-flex xs5>
   <v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row>
-  </v-col>
-  </v-row>
+  </v-flex>
+  </v-layout>
  </v-container>
 </template>
 
diff --git a/tools/compile.xq b/tools/compile.xq
index 535cb54..1fb38ab 100644
--- a/tools/compile.xq
+++ b/tools/compile.xq
@@ -20,7 +20,7 @@ declare function local:process($doc)
 {
 let $tempNode:= Document:getElementsByTagName($doc,"template")=>list:get(xs:int(0))
 let $template:= Node:getInnerHTML($tempNode)
-let $id:= Element:getAttribute($tempNode,"id")
+let $id  := Element:getAttribute($tempNode,"id")
 let $name:=functx:capitalize-first($id)=>trace("ID")
 
 let $script:= Document:getElementsByTagName($doc,"script")=>list:get(xs:int(0))
@@ -30,7 +30,7 @@ let $s:= Node:getInnerHTML($script)=>replace('[''"]#' || $id || '[''"]','`' ||$t
 let $js:= ``[const `{$name}`=Vue.extend(`{$s}`
 );
 ]``
-return if($id="") then () else $js
+return if(empty($id)) then () else $js
 };
 
 declare function functx:capitalize-first