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 shared
                    { 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



-- VIEW


view :
    Shared.Model
    ->
        { content : View contentMsg
        , model : Model
        , toContentMsg : Msg -> contentMsg
        , props : Props
        }
    -> View contentMsg
view shared { content, model, toContentMsg, props } =
    { title = "uRN :: " ++ content.title
    , attributes = [ F.family [ spartanFont ] ]
    , element = navbarContainer shared.device content.element
    }


navbarContainer : Device -> Element msg -> Element msg
navbarContainer device content =
    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
            , B.color colourTheme.backgroundDarkGrey
            ]
            (case ( device.class, device.orientation ) of
                ( Phone, Portrait ) ->
                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]

                ( Phone, Landscape ) ->
                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]

                ( Tablet, Portrait ) ->
                    [ mobileIconMaker, mobileNavbar, mobileFooterIcons ]

                _ ->
                    [ desktopIconMaker, desktopNavbar, desktopFooterIcons ]
            )
        , el
            [ E.width fill
            , height fill
            , paddingEach
                { top = 0
                , right = 0
                , bottom = 0
                , left =
                    case ( device.class, device.orientation ) of
                        ( Phone, _ ) ->
                            mobileBarWidth

                        ( Tablet, Portrait ) ->
                            mobileBarWidth

                        _ ->
                            desktopBarWidth
                }
            ]
            content
        ]


desktopBarWidth : Int
desktopBarWidth =
    200


mobileBarWidth : Int
mobileBarWidth =
    50


localhostUrl : String
localhostUrl =
    url


desktopNavbar : Element msg
desktopNavbar =
    column
        [ alignLeft
        , height fill
        , F.color colourTheme.textLightGrey
        , scrollbarY
        ]
        [ column
            [ padding 20, alignTop, alignLeft ]
            [ column
                [ F.bold
                , F.color colourTheme.textLightGrey
                , F.size 17
                , spacing 8
                ]
                (desktopHomeButtonMaker
                    :: List.map desktopPagesButtonMaker
                        [ pageNames.pageServices
                        , pageNames.pageHyperBlog
                        , pageNames.pageDebate
                        , pageNames.pageNutriDex
                        , pageNames.pageInterviews
                        , pageNames.pageDonate
                        , pageNames.pageContact
                        ]
                )
            ]
        ]


desktopIconMaker : Element msg
desktopIconMaker =
    column
        [ centerX
        , E.width <| px desktopBarWidth
        ]
        [ 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
        ]


mobileIconMaker : Element msg
mobileIconMaker =
    column
        [ centerX
        , E.width <| px mobileBarWidth
        ]
        [ row
            (nonHighlightedTitleFormat
                ++ [ centerX
                   ]
            )
            [ E.image
                [ spacing 2
                , E.width <| px 35
                , centerX
                , paddingEach
                    { top = 10
                    , right = 0
                    , bottom = 10
                    , left = 0
                    }
                ]
                { src = "assets/logo_lambda.png"
                , description = ""
                }
            ]
        , el
            [ E.width <| px 20
            , alignTop
            , centerX
            , D.widthEach
                { bottom = 1
                , top = 0
                , left = 0
                , right = 0
                }
            , D.color colourTheme.textDarkGrey
            ]
            none
        ]


mobileNavbar : Element msg
mobileNavbar =
    column
        [ height fill
        , E.width fill
        , F.color colourTheme.textLightGrey
        , scrollbarY
        ]
        [ column
            [ padding 5
            , centerY
            , centerX
            ]
            [ column
                [ spacing 8
                , centerX
                ]
                (mobileHomeButtonMaker
                    :: List.map mobilePagesButtonMaker
                        [ pageNames.pageServices
                        , pageNames.pageHyperBlog
                        , pageNames.pageDebate
                        , pageNames.pageNutriDex
                        , pageNames.pageInterviews
                        , pageNames.pageDonate
                        , pageNames.pageContact
                        ]
                )
            ]
        ]


desktopBackground : Element msg -> Element msg
desktopBackground =
    el
        [ E.width fill
        , height fill
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = desktopBarWidth
            }
        ]


mobileBackground : Element msg -> Element msg
mobileBackground =
    el
        [ E.width fill
        , height fill
        , paddingEach
            { top = 0
            , right = 0
            , bottom = 0
            , left = mobileBarWidth
            }
        ]


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


desktopHomeButtonMaker : Element msg
desktopHomeButtonMaker =
    desktopButtonMaker "home" localhostUrl


desktopPagesButtonMaker : String -> Element msg
desktopPagesButtonMaker name =
    desktopButtonMaker name (localhostUrl ++ String.toLower name)


mobileButtonMaker : String -> Element msg
mobileButtonMaker name =
    link
        []
        { url = localhostUrl ++ String.toLower name
        , label =
            row
                [ spacing 10 ]
                [ column [ E.width <| px 36 ]
                    [ E.image
                        [ E.width <| px 25
                        , centerX
                        ]
                        { src = "navbar/" ++ String.toLower name ++ ".png"
                        , description = name ++ " icon"
                        }
                    ]
                ]
        }


mobileHomeButtonMaker : Element msg
mobileHomeButtonMaker =
    mobileButtonMaker "home"


mobilePagesButtonMaker : String -> Element msg
mobilePagesButtonMaker name =
    mobileButtonMaker name


desktopFooterIcons : Element msg
desktopFooterIcons =
    column
        [ E.width <| px 140
        , alignTop
        , centerX
        , D.widthEach
            { bottom = 0
            , top = 1
            , left = 0
            , right = 0
            }
        , D.color colourTheme.textDarkGrey
        ]
        [ row
            [ alignBottom
            , E.width fill
            , centerX
            ]
            [ row
                [ centerX
                , centerY
                , E.width fill
                , E.height fill
                , spacing 20
                , paddingEach
                    { top = 25
                    , bottom = 10
                    , left = 0
                    , right = 0
                    }
                ]
                (List.map
                    footerImageMaker
                    [ gitlabDetails
                    , twitterDetails
                    , mastodonDetails
                    , discordDetails
                    ]
                )
            ]
        ]


mobileFooterIcons : Element msg
mobileFooterIcons =
    column
        [ E.width <| px 20
        , alignTop
        , centerX
        , D.widthEach
            { bottom = 0
            , top = 1
            , left = 0
            , right = 0
            }
        , D.color colourTheme.textDarkGrey
        ]
        [ column
            [ alignBottom
            , E.width fill
            ]
            [ column
                [ centerX
                , centerY
                , E.width fill
                , E.height fill
                , spacing 10
                , paddingEach
                    { top = 10
                    , bottom = 10
                    , left = 0
                    , right = 0
                    }
                ]
                (List.map
                    footerImageMaker
                    [ gitlabDetails
                    , twitterDetails
                    , mastodonDetails
                    , discordDetails
                    ]
                )
            ]
        ]


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


gitlabDetails : { name : String, url : String }
gitlabDetails =
    { name = "gitlab"
    , url = "https://gitlab.com/BRBWaffles/website"
    }


twitterDetails : { name : String, url : String }
twitterDetails =
    { name = "twitter"
    , url = "https://x.com/upRootNutrition"
    }


mastodonDetails : { name : String, url : String }
mastodonDetails =
    { name = "mastodon"
    , url = "https://social.uprootnutrition.com/@nick"
    }


discordDetails : { name : String, url : String }
discordDetails =
    { name = "discord"
    , url = "https://discord.com/invite/YrcEvgRTqy"
    }