Highlight current page in header

2 files changed, 28 insertions, 8 deletions

diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index 7a6fefc..2edde27 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -5,6 +5,8 @@ module View.Header
 import Signal exposing (Address)
 import Dict
 
+import TransitRouter
+
 import Route exposing (..)
 
 import Html exposing (..)
@@ -21,18 +23,26 @@ import View.Click exposing (clickTo)
 
 renderHeader : Address Action -> Model -> Html
 renderHeader address model =
-  let item route name additionalClasses =
+  let item = specialItem True ""
+      specialItem showCurrent additionalClasses route name =
         a
-          ([ class ("item " ++ additionalClasses) ] ++ clickTo route)
-          [ text (getMessage name model.translations) ]
+          ( [ classList
+              [ ("item", True)
+              , (additionalClasses, True)
+              , ("current", showCurrent && TransitRouter.getRoute model == route)
+              ]
+            ] ++ clickTo route
+          )
+          [ text (getMessage name model.translations)
+          ]
   in
       header
         []
-        ( [item Home "SharedCost" "title"] ++
-          case model.view of
+        ( case model.view of
             LoggedInView { me, users } ->
-              [ item Income "Income" ""
-              , item Stat "Statistics" ""
+              [ specialItem True "title" Home "SharedCost"
+              , item Income "Income"
+              , item Stat "Statistics"
               , button
                   [ class "signOut item"
                   , onClick address SignOut
@@ -47,5 +57,5 @@ renderHeader address model =
                   ]
               ]
             _ ->
-              []
+              [specialItem False "title" Home "SharedCost"]
         )
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 3b4f35c..e361cb1 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -31,6 +31,16 @@ headerDesign =
       paddingRight headerPadding
       hover & backgroundColor darkenedRed
       focus & backgroundColor darkenedRed
+      position relative
+      ".current" & after & do
+          display block
+          content (stringContent "")
+          height (px 5)
+          width (pct 100)
+          position absolute
+          bottom (px 0)
+          left (px 0)
+          backgroundColor C.white
 
     ".title" ? do
       height (pct 100)