add in a layout option

examples/basic/package/Application.elm

@@ -40,6 +40,9 @@ create :
         { fromUrl : Url -> route
         , toPath : route -> String
         }
+    , layout :
+        { view : { page : Html msg } -> Html msg
+        }
     , pages :
         { init : route -> ( model, Cmd msg )
         , update : msg -> model -> ( model, Cmd msg )
@@ -67,6 +70,7 @@ create config =
         , view =
             view
                 { view = config.pages.bundle >> .view
+                , layout = config.layout.view
                 }
         , onUrlChange = Url
         , onUrlRequest = Link
@@ -173,13 +177,18 @@ subscriptions config model =
 
 
 view :
-    { view : model -> Html msg }
+    { view : model -> Html msg
+    , layout : { page : Html msg } -> Html msg
+    }
     -> Model flags model
     -> Browser.Document (Msg msg)
 view config model =
     { title = "App title"
     , body =
-        [ Html.map Page (config.view model.page)
+        [ Html.map Page <|
+            config.layout
+                { page = config.view model.page
+                }
         ]
     }
 

examples/basic/src/Layout.elm

@@ -0,0 +1,32 @@
+module Layout exposing (view)
+
+import Generated.Route as Route exposing (Route)
+import Html exposing (..)
+import Html.Attributes as Attr
+
+
+view : { page : Html msg } -> Html msg
+view { page } =
+    div
+        [ Attr.style "margin" "2rem auto"
+        , Attr.style "max-width" "720px"
+        ]
+        [ header [ Attr.class "navbar" ]
+            (List.map viewLink
+                [ ( "Homepage", Route.Homepage )
+                , ( "Counter", Route.Counter )
+                , ( "Random", Route.Random )
+                ]
+            )
+        , page
+        ]
+
+
+viewLink : ( String, Route ) -> Html msg
+viewLink ( label, route ) =
+    a
+        [ Attr.href (Route.toPath route)
+        , Attr.style "margin-right" "1rem"
+        ]
+        [ text label
+        ]

examples/basic/src/Main.elm

@@ -3,6 +3,7 @@ module Main exposing (main)
 import Application exposing (Application)
 import Generated.Pages as Pages
 import Generated.Route as Route
+import Layout as Layout
 
 
 type alias Flags =
@@ -16,6 +17,9 @@ main =
             { fromUrl = Route.fromUrl
             , toPath = Route.toPath
             }
+        , layout =
+            { view = Layout.view
+            }
         , pages =
             { init = Pages.init
             , update = Pages.update

examples/basic/src/Pages/Homepage.elm

@@ -27,5 +27,5 @@ view : Html Msg
 view =
     div []
         [ h1 [] [ text "Homepage" ]
-        , p [] [ text "Very boring tho..." ]
+        , p [] [ text "How exciting!" ]
         ]