From ac9492b62e9e6773d2d2d69846a3a64bc671bf40 Mon Sep 17 00:00:00 2001 From: Philippe Pittoli Date: Sat, 8 Jul 2023 00:22:23 +0200 Subject: [PATCH] Decorative navbar. --- src/App/Container.purs | 6 ++- src/Bulma.purs | 93 ++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/App/Container.purs b/src/App/Container.purs index 7237d0b..59838c3 100644 --- a/src/App/Container.purs +++ b/src/App/Container.purs @@ -59,7 +59,8 @@ initialState _ = { token: Nothing render :: forall m. MonadAff m => State -> H.ComponentHTML Action ChildSlots m render state = HH.div_ $ - [ render_header + [ render_nav + , render_header , render_auth_form , render_newdomain_interface , Bulma.columns_ [ Bulma.column_ [ render_logs ], Bulma.column_ [ render_auth_WS, render_dnsmanager_WS ] ] @@ -67,6 +68,9 @@ render state ] where + render_nav :: forall monad. MonadAff monad => H.ComponentHTML Action ChildSlots monad + render_nav = Bulma.netlibre_navbar + render_header :: forall monad. MonadAff monad => H.ComponentHTML Action ChildSlots monad render_header = case state.token of Nothing -> Bulma.hero "net libre" "free domains" diff --git a/src/Bulma.purs b/src/Bulma.purs index db4fe8d..1641b6c 100644 --- a/src/Bulma.purs +++ b/src/Bulma.purs @@ -8,7 +8,10 @@ import DOM.HTML.Indexed as DHI import Halogen.HTML.Properties as HP import Halogen.HTML.Events as HE +import Halogen.HTML.Properties.ARIA as ARIA + -- HTML PropName used with HP.prop +import Halogen.HTML.Core (AttrName(..)) --import Halogen.HTML.Core (PropName(..)) -- import Web.Event.Event (type_, Event, EventType(..)) --import Web.UIEvent.MouseEvent (MouseEvent) @@ -33,8 +36,10 @@ class_control :: Array (HH.ClassName) class_control = [HH.ClassName "control" ] class_select :: Array (HH.ClassName) class_select = [HH.ClassName "select" ] -class_primary :: Array (HH.ClassName) -class_primary = [HH.ClassName "is-primary" ] +class_is_primary :: Array (HH.ClassName) +class_is_primary = [HH.ClassName "is-primary" ] +class_is_light :: Array (HH.ClassName) +class_is_light = [HH.ClassName "is-light" ] columns :: forall (w :: Type) (i :: Type). @@ -370,7 +375,7 @@ new_domain_field inputaction text selectaction accepted_domains , HP.placeholder "www" , HP.value text , HP.type_ HP.InputText - , HP.classes (class_primary <> class_input) + , HP.classes (class_is_primary <> class_input) ] ] , HH.p @@ -424,7 +429,7 @@ option value = HH.option_ [HH.text value] select :: forall w i. HH.Node DHI.HTMLselect w i select action options - = HH.div [ HP.classes (class_select <> class_primary) ] + = HH.div [ HP.classes (class_select <> class_is_primary) ] [ HH.select action options] class_hero :: Array (HH.ClassName) @@ -464,3 +469,83 @@ class_container = [HH.ClassName "container" ] container :: forall w i. Array (HH.HTML w i) -> HH.HTML w i container = HH.div [HP.classes (class_container <> class_is_info)] + +class_navbar :: Array (HH.ClassName) +class_navbar = [HH.ClassName "navbar"] +class_navbar_brand :: Array (HH.ClassName) +class_navbar_brand = [HH.ClassName "navbar-brand"] +class_navbar_burger :: Array (HH.ClassName) +class_navbar_burger = [HH.ClassName "navbar-burger"] +class_navbar_item :: Array (HH.ClassName) +class_navbar_item = [HH.ClassName "navbar-item"] +class_navbar_menu :: Array (HH.ClassName) +class_navbar_menu = [HH.ClassName "navbar-menu"] +class_navbar_start :: Array (HH.ClassName) +class_navbar_start = [HH.ClassName "navbar-start"] +class_navbar_end :: Array (HH.ClassName) +class_navbar_end = [HH.ClassName "navbar-end"] +class_navbar_link :: Array (HH.ClassName) +class_navbar_link = [HH.ClassName "navbar-link"] +class_navbar_dropdown :: Array (HH.ClassName) +class_navbar_dropdown = [HH.ClassName "navbar-dropdown"] +class_navbar_divider :: Array (HH.ClassName) +class_navbar_divider = [HH.ClassName "navbar-divider"] + +data_target :: forall r i. String -> HP.IProp r i +data_target = HP.attr (AttrName "data-target") + +class_has_dropdown :: Array (HH.ClassName) +class_has_dropdown = [HH.ClassName "has-dropdown"] + +class_is_hoverable :: Array (HH.ClassName) +class_is_hoverable = [HH.ClassName "is-hoverable"] + +class_buttons :: Array (HH.ClassName) +class_buttons = [HH.ClassName "buttons"] + +--netlibre_navbar :: +netlibre_navbar = + HH.nav [HP.classes class_navbar, ARIA.label "main navigation", ARIA.role "navigation" ] + [ HH.div [HP.classes class_navbar_brand] + [ HH.a [HP.classes class_navbar_item, HP.href "/"] + [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]] + , HH.a [HP.classes class_navbar_burger, ARIA.label "menu", ARIA.expanded "false", data_target "navbarBasicExample" ] + [ HH.span [ARIA.hidden "true"] [] + , HH.span [ARIA.hidden "true"] [] + , HH.span [ARIA.hidden "true"] [] + ] + ] + , HH.div [HP.id "navbarBasicExample", HP.classes class_navbar_menu] + [ HH.div [HP.classes class_navbar_start] + [ HH.a [HP.classes class_navbar_item] + [HH.text "Home"] + , HH.a [HP.classes class_navbar_item] + [HH.text "My Domains"] + , HH.div [HP.classes (class_navbar_item <> class_has_dropdown <> class_is_hoverable)] + [ HH.a [HP.classes class_navbar_link] + [HH.text "List of something"] + , HH.div [HP.classes class_navbar_dropdown] + [ HH.a [HP.classes class_navbar_item] + [HH.text "something 1"] + , HH.a [HP.classes class_navbar_item] + [HH.text "something 2"] + , HH.a [HP.classes class_navbar_item] + [HH.text "something 3"] + , HH.hr [HP.classes class_navbar_divider] + , HH.a [HP.classes class_navbar_item] + [HH.text "something 4"] + ] + ] + ] + , HH.div [HP.classes class_navbar_end] + [ HH.div [HP.classes class_navbar_item] + [ HH.div [HP.classes class_buttons] + [ HH.a [HP.classes (class_button <> class_is_primary)] + [HH.strong [] [HH.text "SIGN UP NOW"]] + , HH.a [HP.classes (class_button <> class_is_light)] + [HH.text "STUFF"] + ] + ] + ] + ] + ]