onasty/web/src/Layouts/Header.elm(view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
module Layouts.Header exposing (Model, Msg, Props, layout)
import Auth.User
import Components.Form
import Effect exposing (Effect)
import Html as H exposing (Html)
import Html.Attributes as A
import Layout exposing (Layout)
import Route exposing (Route)
import Route.Path
import Shared
import View exposing (View)
type alias Props =
{}
layout : Props -> Shared.Model -> Route () -> Layout () Model Msg contentMsg
layout _ shared _ =
Layout.new
{ init = init
, update = update
, view = view shared
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{}
init : () -> ( Model, Effect Msg )
init _ =
( {}, Effect.none )
-- UPDATE
type Msg
= UserClickedLogout
update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
case msg of
UserClickedLogout ->
( model, Effect.logout )
subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
-- VIEW
view : Shared.Model -> { toContentMsg : Msg -> contentMsg, content : View contentMsg, model : Model } -> View contentMsg
view shared { toContentMsg, content } =
{ title = content.title
, body =
[ viewHeader shared.user |> H.map toContentMsg
, H.main_ [] content.body
]
}
viewHeader : Auth.User.SignInStatus -> Html Msg
viewHeader user =
H.header [ A.class "w-full border-b border-gray-200 bg-white" ]
[ H.div [ A.class "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" ]
[ H.div [ A.class "flex justify-between items-center h-16" ]
[ H.div [ A.class "flex items-center" ]
[ H.a
[ A.class "text-lg font-semibold text-black hover:text-gray-700 transition-colors"
, Route.Path.href Route.Path.Home_
]
[ H.text "Onasty" ]
]
, H.nav [ A.class "flex items-center space-x-6" ] (viewNav user)
]
]
]
viewNav : Auth.User.SignInStatus -> List (Html Msg)
viewNav user =
let
viewLink text path =
H.a [ A.class "text-gray-600 hover:text-black transition-colors", Route.Path.href path ]
[ H.text text ]
in
case user of
Auth.User.SignedIn _ ->
[ viewLink "Profile" Route.Path.Profile
, Components.Form.button
{ text = "Logout"
, onClick = UserClickedLogout
, style = Components.Form.SecondaryDanger
, disabled = False
}
]
_ ->
[ H.a
[ A.class "px-4 py-2 border border-gray-300 rounded-md text-black hover:bg-gray-50 transition-colors"
, Route.Path.href Route.Path.Auth
]
[ H.text "Sign In/Up" ]
]
|