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 ) -> [ mobileNavbar, mobileFooterIcons ] ( Phone, Landscape ) -> [ mobileNavbar, mobileFooterIcons ] ( Tablet, Portrait ) -> [ mobileNavbar, mobileFooterIcons ] _ -> [ 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 ] [ 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 ] , 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 ] ) ] ] mobileNavbar : Element msg mobileNavbar = column [ height fill , E.width fill , F.color colourTheme.textLightGrey , scrollbarY ] [ 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 ] , 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 = row [ alignBottom , E.width fill ] [ row [ centerX , centerY , E.width fill , E.height fill , spacing 20 , paddingEach { top = 10 , bottom = 10 , left = 0 , right = 0 } ] -- Use the list of social media details here (List.map footerImageMaker [ gitlabDetails , twitterDetails , mastodonDetails , discordDetails ] ) ] mobileFooterIcons : Element msg mobileFooterIcons = 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" }