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 = view
        , 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 : { toContentMsg : Msg -> contentMsg, content : View contentMsg, model : Model } -> View contentMsg
view { toContentMsg, model, content } =
    { title = content.title
    , attributes = [ F.family [ spartanFont ] ]
    , element =
        row
            [ E.width fill
            , height fill
            , B.color colourTheme.cardBackground
            ]
            [ 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") -- Ensure navbar stays on top
                , htmlAttribute (H.style "transform-style" "preserve-3d")
                , D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
                , D.color colourTheme.highlightTextHover
                ]
                [ column
                    [ alignLeft
                    , height fill
                    , F.color colourTheme.nonHighlightedText
                    ]
                    [ column
                        [ centerX
                        , E.width <| px 200
                        ]
                        [ row
                            (nonHighlightedTitleFormat
                                ++ [ centerX
                                   , spacing 10
                                   , padding 20
                                   ]
                            )
                            [ E.image
                                [ spacing 2
                                , E.width <| px 80
                                , centerX
                                ]
                                { src = "navbar/nutrivorelogo.png"
                                , description = ""
                                }
                            , column []
                                [ link [ centerX ]
                                    { url = localhostUrl ++ pageNames.pageHome
                                    , label = text "upRoot"
                                    }
                                , link [ centerX ]
                                    { url = localhostUrl ++ pageNames.pageHome
                                    , label = text "Health"
                                    }
                                ]
                            ]
                        , el
                            [ E.width <| px 140
                            , alignTop
                            , centerX
                            , D.widthEach
                                { bottom = 1
                                , top = 0
                                , left = 0
                                , right = 0
                                }
                            , D.color colourTheme.nonHighlightedDarkText
                            ]
                            none
                        ]
                    , column
                        [ padding 20, alignTop, alignLeft ]
                        [ column
                            [ F.bold
                            , F.color colourTheme.nonHighlightedText
                            , F.size 17
                            , spacing 8
                            ]
                            [ homeButton
                            , servicesButton
                            , hyperbolgButton
                            , argumentsButton
                            , cucklistButton

                            -- , communityButton
                            , nutridexButton
                            , donateButton
                            , interviewButton
                            , contactButton
                            ]
                        ]
                    ]
                , row
                    [ alignBottom
                    , E.width fill
                    , E.height <| px 100
                    ]
                    [ row
                        [ centerX
                        , centerY
                        , E.width fill
                        , E.height fill
                        , spacing 10
                        , paddingEach { top = 40, bottom = 10, left = 20, right = 20 }
                        ]
                        [ E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/gitlab-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/twitter-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 30
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/mastodon-light.png"
                            , description = ""
                            }
                        , E.image
                            [ E.width <| px 33
                            , alignBottom
                            , centerX
                            ]
                            { src = "navbar/discord-light.png"
                            , description = ""
                            }
                        ]
                    ]
                ]
            , el
                [ E.width fill
                , height fill
                , paddingEach
                    { top = 0
                    , right = 0
                    , bottom = 0
                    , left = 200
                    }
                ]
                content.element
            ]
    }


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


linkFormat =
    el
        [ mouseOver [ F.color colourTheme.highlightText ]
        , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
        ]


iconDistance =
    E.width <| px 36


homeButton : Element msg
homeButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/home.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "home"
                , label = linkFormat <| text "HOME"
                }
            ]
        ]


servicesButton : Element msg
servicesButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/services.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "services"
                , label = linkFormat <| text "SERVICES"
                }
            ]
        ]


hyperbolgButton : Element msg
hyperbolgButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/hyperblog.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "hyperblog"
                , label = linkFormat <| text "HYPERBLOG"
                }
            ]
        ]


argumentsButton : Element msg
argumentsButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/arguments.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "arguments"
                , label = linkFormat <| text "ARGUMENTS"
                }
            ]
        ]


cucklistButton : Element msg
cucklistButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/cucklist.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "cucklist"
                , label = linkFormat <| text "CUCKLIST"
                }
            ]
        ]


communityButton : Element msg
communityButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/community.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "community"
                , label = linkFormat <| text "COMMUNITY"
                }
            ]
        ]


nutridexButton : Element msg
nutridexButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/nutridex.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "nutridex"
                , label = linkFormat <| text "NUTRIDEX"
                }
            ]
        ]


donateButton : Element msg
donateButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/donate.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "donate"
                , label = linkFormat <| text "DONATE"
                }
            ]
        ]


interviewButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/interviews.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "interviews"
                , label = linkFormat <| text "INTERVIEWS"
                }
            ]
        ]


contactButton : Element msg
contactButton =
    row
        []
        [ column [ iconDistance ]
            [ E.image
                [ alignLeft
                , alignBottom
                , E.width <| px 30
                ]
                { src = "navbar/contact.png"
                , description = ""
                }
            ]
        , column
            [ alignBottom ]
            [ link
                []
                { url = localhostUrl ++ "contact"
                , label = linkFormat <| text "CONTACT"
                }
            ]
        ]