Render page header aka nav bar with elm (prometheus#4)

This replaces the static nav bar specification in the index.html file.
mxinden · Mar 14, 2017 · 0790930 · 0790930
1 parent 5e56d34
commit 0790930
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -8,30 +8,14 @@
   </head>
 
   <body>
-    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
-      <nav class="w-80 center f6 fw6 ttu tracked">
-        <a class="link dim white dib mr3" href="#" title="Home">AlertManager</a>
-        <a class="link dim white dib mr3" href="#/alerts" title="Alerts">Alerts</a>
-        <a class="link dim white dib mr3" href="#/silences" title="Silences">Silences</a>
-        <a class="link dim white dib" href="#/status" title="Status">Status</a>
-      </nav>
-    </header>
-
-    <!-- Container -->
-    <div class="pt6 w-80 center pa3">
-      <div id="app">
-      </div>
-    </div>
-
   </body>
 
   <!-- Your source after making -->
   <script type="text/javascript" src="/script.js"></script>
 
   <!-- Removes splash and starts elm app. -->
   <script type="text/javascript">
-    var node = document.getElementById('app');
-    var app = Elm.Main.embed(node);
+    var app = Elm.Main.embed(document.body);
   </script>
 
 </html>
diff --git a/src/NavBar/Views.elm b/src/NavBar/Views.elm
@@ -0,0 +1,20 @@
+module NavBar.Views exposing (appHeader)
+
+import Html exposing (Html, header, text, a, nav)
+import Html.Attributes exposing (class, href, title)
+import Types exposing (Model, Msg)
+
+appHeader : Model -> Html Msg
+appHeader model =
+    header [ class "bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l" ]
+        [ nav [ class "w-80 center f6 fw6 ttu tracked" ]
+              [ a [ class "link dim white dib mr3", href "#", title "Home" ]
+                    [ text "AlertManager" ]
+              , a [ class "link dim white dib mr3", href "#/alerts", title "Alerts" ]
+                  [ text "Alerts" ]
+              , a [ class "link dim white dib mr3", href "#/silences", title "Silences" ]
+                  [ text "Silences" ]
+              , a [ class "link dim white dib", href "#/status", title "Status" ]
+            [ text "Status" ]
+        ]
+    ]
diff --git a/src/Views.elm b/src/Views.elm
@@ -7,10 +7,19 @@ import Utils.Views exposing (error, loading, notFoundView)
 import Translators exposing (alertTranslator, silenceTranslator)
 import Silences.Views
 import Alerts.Views
+import NavBar.Views exposing (appHeader)
 
 
 view : Model -> Html Msg
 view model =
+    div []
+        [ appHeader model
+        , div [ class "pt6 w-80 center pa3" ]
+            [ appBody model ]
+        ]
+
+appBody : Model -> Html Msg
+appBody model =
     case model.route of
         AlertsRoute route ->
             case model.alertGroups of