website/frontend/src/Layouts/Navbar.elm

module Layouts.Navbar exposing (Model, Msg, Props, layout)

import Config.Colour as T exposing (..)
import Config.Format as O exposing (..)
import Config.Identity as I exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Font as F
import Element.Region exposing (description)
import Html exposing (Html)
import Html.Attributes as H exposing (class, style)
import Layout exposing (Layout)
import Route exposing (Route)
import Shared
import View exposing (View)


type alias Props =
    {}


layout : Props -> Shared.Model -> Route () -> Layout () Model Msg contentMsg
layout props shared route =
    Layout.new
        { init = init
        , update = update
        , view =
            \layoutArgs ->
                view
                    { props = props
                    , content = layoutArgs.content
                    , model = layoutArgs.model
                    , toContentMsg = layoutArgs.toContentMsg
                    }
        , subscriptions = subscriptions
        }



-- MODEL


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init _ =
    ( {}
    , Effect.none
    )



-- UPDATE


type Msg
    = ReplaceMe


update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        ReplaceMe ->
            ( model
            , Effect.none
            )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- image [spacing 30, width <| px 150] {src = "navbar/nutrivorelogo.png", description = ""}
-- VIEW


view :
    { content : View contentMsg
    , model : Model
    , toContentMsg : Msg -> contentMsg
    , props : Props
    }
    -> View contentMsg
view { content, model, toContentMsg, props } =
    { title = content.title
    , attributes = [ F.family [ spartanFont ] ]
    , element =
        row
            [ E.width fill
            , height fill
            , B.color colourTheme.backgroundDarkGrey
            , E.height E.fill
            ]
            [ column
                [ htmlAttribute (H.style "position" "fixed")
                , htmlAttribute (H.style "left" "0")
                , htmlAttribute (H.style "top" "0")
                , htmlAttribute (H.style "height" "100vh")
                , htmlAttribute (H.style "z-index" "10")
                , htmlAttribute (H.style "transform-style" "preserve-3d")
                , D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
                , D.color colourTheme.textDarkOrange
                ]
                [ column
                    [ alignLeft
                    , height fill
                    , F.color colourTheme.textLightGrey
                    ]
                    [ column
                        [ centerX
                        , E.width <| px 200
                        ]
                        [ row
                            (nonHighlightedTitleFormat
                                ++ [ centerX
                                   ]
                            )
                            [ E.image
                                [ spacing 2
                                , E.width <| px 140
                                , centerX
                                , paddingEach
                                    { top = 20
                                    , right = 0
                                    , bottom = 20
                                    , left = 0
                                    }
                                ]
                                { src = "assets/logo.png"
                                , description = ""
                                }
                            ]
                        , el
                            [ E.width <| px 140
                            , alignTop
                            , centerX
                            , D.widthEach
                                { bottom = 1
                                , top = 0
                                , left = 0
                                , right = 0
                                }
                            , D.color colourTheme.textDarkGrey
                            ]
                            none
                        ]
                    , column
                        [ padding 20, alignTop, alignLeft ]
                        [ column
                            [ F.bold
                            , F.color colourTheme.textLightGrey
                            , F.size 17
                            , spacing 8
                            ]
                            (buttonMaker pageNames.pageRoot
                                :: List.map buttonMaker
                                    [ pageNames.pageServices
                                    , pageNames.pageHyperBlog
                                    , pageNames.pageDebate
                                    , pageNames.pageGibberish
                                    , pageNames.pageDodgers
                                    , pageNames.pageNutriDex
                                    , pageNames.pageInterviews
                                    , pageNames.pageDonate
                                    , pageNames.pageContact
                                    ]
                            )
                        ]
                    ]
                , footerIcons
                ]
            , el
                [ E.width fill
                , height fill
                , paddingEach
                    { top = 0
                    , right = 0
                    , bottom = 0
                    , left = 200
                    }
                ]
                content.element
            ]
    }


localhostUrl =
    "http://localhost:1234/"


footerIcons : Element msg
footerIcons =
    row
        [ alignBottom
        , E.width fill
        , E.height <| px 100
        ]
        [ row
            [ centerX
            , centerY
            , E.width fill
            , E.height fill
            , spacing 20
            , paddingEach
                { top = 40
                , bottom = 20
                , left = 20
                , right = 20
                }
            ]
          <|
            List.map
                footerImageMaker
                iconList
        ]


footerImageMaker : String -> Element msg
footerImageMaker name =
    E.image
        [ E.width <| px 20
        , alignBottom
        , centerX
        ]
        { src = "navbar/" ++ name ++ "-light.png"
        , description = ""
        }


iconList : List String
iconList =
    [ "gitlab"
    , "twitter"
    , "mastodon"
    , "discord"
    ]


buttonMaker : String -> Element msg
buttonMaker name =
    row
        []
        [ column [ E.width <| px 36 ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/" ++ String.toLower name ++ ".png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ String.toLower name
                , label =
                    el
                        [ mouseOver [ F.color colourTheme.textLightOrange ]
                        , F.color colourTheme.textLightGrey
                        , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
                        ]
                    <|
                        text (String.toUpper name)
                }
            ]
        ]