stay in application layout. include submenu in all pages

app/views/merged/cards/index.haml

@@ -1,16 +1,14 @@
-- template = find_template(@section)
-= render( template , section: @section)
-
-.flex.flex-col.bg-white
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
+  .text-xl.text-gray-900
       Cards for
       = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline"
 
+= render "layouts/merged_header"
+
+- template = find_template(@section)
+= render( template , section: @section)
 
 .grid.grid-cols-4.gap-2.m-8
   - @section.cards.each_with_index do |card , index|

app/views/merged/cards/select_image.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image or select (click)

app/views/merged/changes/index.haml

@@ -1,11 +1,11 @@
-.flex.flex-col.bg-white
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
-        Changes
-      %p.mt-4.text-gray-500
-        Branch
-        = @git.current_branch
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Changes
+  .text-xl.text-gray-900
+    Branch
+    = @git.current_branch
+
+= render "layouts/merged_header"
 
 .grid.grid-cols-4.gap-2.m-8
   .relative.block.border.border-gray-100

app/views/merged/images/index.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-4.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image

app/views/merged/pages/index.haml

@@ -1,3 +1,4 @@
+= render "layouts/merged_header"
 .overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.m-20
   %table.min-w-full.divide-y.divide-gray-200.text-sm
     %thead.bg-gray-100

app/views/merged/sections/index.html.haml

@@ -1,16 +1,15 @@
-.flex.flex-col.bg-white
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
-        Page
-        = @page.name
-  .flex.items-center.justify-center.flex-1
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
-      =link_to "View live" , "/#{@page.name}" , target: @page.name
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Page
+    = @page.name
+  .text-xl.text-gray-900
+    =link_to "View live" , "/#{@page.name}" , target: @page.name
+
+= render "layouts/merged_header"
 
 -@page.sections.each do |section |
-  .grid.grid-cols-5.gap-2.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
-    .relative.block.border.border-gray-100.p-4
+  .flex.gap-10.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
+    .basis-52
       %h3.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
       = blue_button( "Up" , section_move_url(section.id , dir: :up) )
       = blue_button( "Down" , section_move_url(section.id , dir: :down) )
@@ -18,21 +17,21 @@
       = green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
       = form_tag( section_url(section.id) , {method: :delete  } ) do
         =submit_button( "Delete" , true)
-    .relative.block.border.border-gray-100.p-4
+    .basis-52.grow-0
       %h3.mt-4.text-lg.font-bold Template
       = link_to(section_select_template_url(section.id)) do
         %p= section.template
-        = section_preview(section , class: "w-full object-contain")
-    .relative.block.border.border-gray-100.p-4
+        = section_preview(section , class: "object-contain")
+    .basis-52
       %h3.mt-4.text-lg.font-bold Header
       %p= section.header
       %h3.mt-4.text-lg.font-bold Text
       %p= section.text[0..100] + " ..." if section.text
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       - if section.has_cards?
         %h3.mt-4.text-lg.font-bold #{section.cards.length} Cards
         =link_to section_cards_url(section.id) do
-          =card_preview(section , class: "w-full object-contain")
+          =card_preview(section , class: "object-contain")
       - else
         = link_to(section_select_image_url(section.id)) do
           %h3.mt-4.text-lg.font-bold Image
@@ -40,7 +39,7 @@
             = image_tag( "cms/" + section.image , class: "h-40")
           -else
             %p No image
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       %h3.mt-4.text-lg.font-bold Options
       - section.options.each do|name , value|
         %p

app/views/merged/sections/new.html.haml

@@ -1,3 +1,12 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Changes
+  .text-xl.text-gray-900
+    Branch
+    = @git.current_branch
+
+= render "layouts/merged_header"
+
 %h1 New merged_section
 
 = render 'form'

app/views/merged/sections/select_card_template.haml

@@ -1,3 +1,8 @@
+- content_for( :merged_menu ) do
+  .text-xl.text-gray-900
+    Select Card Template for Section #{section.index}
+
+= render "layouts/merged_header"
 .grid.grid-cols-4.gap-2.m-8
   - @cards.each do |style|
     .relative.block.border.border-gray-100

app/views/merged/sections/select_image.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image or select (click)

app/views/merged/sections/select_template.haml

@@ -1,12 +1,10 @@
-.flex.flex-col.bg-white
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Select Template for Section #{@section.index}
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
+  .text-xl.text-gray-900
+    Select Template for Section #{@section.index}
+
+= render "layouts/merged_header"
 
 .grid.grid-cols-4.gap-2.m-8
   - @sections.each do |style|

app/views/merged/sections/show.html.haml

@@ -1,18 +1,18 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
+  .text-xl.text-gray-900
+    Section #{@section.index} / #{@section.page.sections.length}
+    - if @section.previous_section
+      =link_to "(prev)" , section_url(@section.previous_section.id)
+    - if @section.next_section
+      =link_to "(next)" , section_url(@section.next_section.id)
+
+= render "layouts/merged_header"
+
 - template = find_template(@section)
 = render( template , section: @section)
 
-.flex.flex-col.bg-white
-  .flex.items-center.justify-center.flex-1
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
-      Section #{@section.index} / #{@section.page.sections.length}
-      - if @section.previous_section
-        =link_to "(prev)" , section_url(@section.previous_section.id)
-      - if @section.next_section
-        =link_to "(next)" , section_url(@section.next_section.id)
 .grid.grid-cols-3.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}

app/views/merged/styles/index.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .px-4.py-8.mx-auto.text-center
   %h1.text-4xl.font-bold
     Section styles