moves headerbar out of chest page

src/Main.elm

@@ -36,11 +36,36 @@ main =
 -- Model
 
 
-type Model
+type alias Model =
+    { navbar : Navbar
+    , page : Page
+    }
+
+
+type alias Navbar =
+    { menuOpen : Bool
+    , navKey : Nav.Key
+    }
+
+
+initNavbar key =
+    Navbar False key
+
+
+type Page
     = Chest Chest.Model
       --    | Admin Admin.Model
     | About
-    | Loading Nav.Key
+    | Loading
+
+
+type alias HasPage r =
+    { r | page : Page }
+
+
+setPage : Page -> HasPage r -> HasPage r
+setPage page model =
+    { model | page = page }
 
 
 
@@ -59,35 +84,34 @@ type Model
 
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
 init _ _ key =
-    ( Loading key, Session.init SessionLoaded key )
+    ( { navbar = initNavbar key
+      , page = Loading
+      }
+    , Session.init SessionLoaded key
+    )
 
 
 
-{-
-   case flags of
-       Just id ->
-           let
-               session =
-                   Session.playerSession key id
-
-               ( chest, cmd ) =
-                   Chest.init session
-           in
-           ( Chest chest, Cmd.map GotChestMsg cmd )
-
-       Nothing ->
-           ( About, Cmd.none )
--}
----
--- VIEWS
----
+-- VIEW
 
 
 view : Model -> Browser.Document Msg
 view model =
+    let
+        ( title, header, content ) =
+            viewPage model.page
+    in
+    { title = title
+    , body =
+        viewHeaderBar header.title header.links model.navbar
+            :: content
+    }
+
+
+viewPage page =
     let
         ( title, content ) =
-            case model of
+            case page of
                 Chest chest ->
                     ( "Loot-a-lot", List.map (Html.map GotChestMsg) (Chest.view chest) )
 
@@ -96,38 +120,106 @@ view model =
                 About ->
                     ( "A propos", [ p [] [ text "A propos" ] ] )
 
-                Loading _ ->
-                    ( "Chargement...", [ p [] [ text "Chargement" ] ] )
+                Loading ->
+                    ( "Veuillez patienter...", [ p [] [ text "Chargement" ] ] )
+
+        navbarTitle =
+            case page of
+                Chest chest ->
+                    chest.state.player.name
+
+                About ->
+                    "Loot-a-lot"
+
+                Loading ->
+                    "Loot-a-(...)"
+
+        navbarLinks =
+            case page of
+                Chest chest ->
+                    let
+                        linkWithGem =
+                            navLink "fas fa-gem"
+                    in
+                    [ navLink "fas fa-store-alt" "Marchand" "/marchand"
+                    , if chest.state.player.id == 0 then
+                        linkWithGem "Nouveau loot" "/nouveau-tresor"
+
+                      else
+                        linkWithGem "Coffre de groupe" "/coffre"
+                    ]
+
+                _ ->
+                    []
     in
-    { title = title
-    , body = content
-    }
+    ( title, { title = navbarTitle, links = navbarLinks }, content )
+
+
+
+-- HEADER SECTION
+
+
+navLink icon linkText url =
+    a [ class "navbar-item", href url ]
+        [ renderIcon { icon = icon, ratio = "1x", size = "medium" }
+        , span [] [ text linkText ]
+        ]
+
+
+viewHeaderBar : String -> List (Html Msg) -> Navbar -> Html Msg
+viewHeaderBar navbarTitle navbarLinks navbar =
+    nav [ class "navbar", class "is-transparent" ]
+        [ div [ class "navbar-brand" ]
+            [ a [ class "navbar-item", href "/" ]
+                [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
+                , span [ class "title is-4", style "padding-left" "0.4em" ] [ text navbarTitle ]
+                ]
+            , a
+                [ class "navbar-burger"
+                , classList [ ( "is-active", navbar.menuOpen ) ]
+                , onClick SwitchMenuOpen
+                ]
+                [ span [ attribute "aria-hidden" "true" ] []
+                , span [ attribute "aria-hidden" "true" ] []
+                , span [ attribute "aria-hidden" "true" ] []
+                ]
+            ]
+        , div [ class "navbar-menu", classList [ ( "is-active", navbar.menuOpen ) ] ]
+            [ div [ class "navbar-end" ] navbarLinks
+            ]
+        ]
+
+
+
+-- UPDATE
 
 
 type Msg
     = UrlChanged Url.Url
     | LinkClicked Browser.UrlRequest
     | SessionLoaded (Maybe Session)
+    | SwitchMenuOpen
     | GotChestMsg Chest.Msg
 
 
 
---    | GotAdminMsg Admin.Msg
+--  | GotAdminMsg Admin.Msg
 
 
+update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     let
         updateChest chestMsg =
-            case model of
+            case model.page of
                 Chest chest ->
                     let
                         ( newChest, cmd ) =
                             Chest.update chestMsg chest
                     in
-                    ( Chest newChest, Cmd.map GotChestMsg cmd )
+                    ( setPage (Chest newChest) model, Cmd.map GotChestMsg cmd )
 
                 _ ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
     in
     case msg of
         SessionLoaded session ->
@@ -137,17 +229,17 @@ update msg model =
                         ( chest, cmd ) =
                             Chest.init logged
                     in
-                    ( Chest chest, Cmd.map GotChestMsg cmd )
+                    ( model |> setPage (Chest chest), Cmd.map GotChestMsg cmd )
 
                 Nothing ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
 
         LinkClicked urlRequest ->
-            case model of
+            case model.page of
                 Chest chestModel ->
                     case urlRequest of
                         Browser.Internal url ->
-                            ( model, Nav.pushUrl chestModel.navKey (Url.toString url) )
+                            ( model, Nav.pushUrl model.navbar.navKey (Url.toString url) )
 
                         Browser.External href ->
                             ( model, Cmd.none )
@@ -165,14 +257,16 @@ update msg model =
                     updateChest (Chest.SetContent content)
 
                 _ ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
 
         GotChestMsg chestMsg ->
             updateChest chestMsg
 
+        SwitchMenuOpen ->
+            ( { model | navbar = Navbar (not model.navbar.menuOpen) model.navbar.navKey }, Cmd.none )
+
 
 
--- STATE Utils
 -- SUBSCRIPTIONS
 --