onasty: web/src/Layouts/Header.elm (33a27b8fc7fbe906fbdf7a446a8104fa705eb43f)

onasty/web/src/Layouts/Header.elm (view raw)

Olexandr Smirnov feat(web): add account settings (#190)..., 9 months ago

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" ]
            ]

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