Fix the navbar.
This commit is contained in:
parent
b3b84959e6
commit
3098372879
@ -123,11 +123,11 @@ render { addUserForm, searchUserForm, matching_users, page, wsUp }
|
||||
, case page of
|
||||
Home -> Bulma.section_small [Bulma.h3 "Select an action"]
|
||||
Search -> Bulma.columns_
|
||||
[ Bulma.column (C.is_size 3) [Bulma.article (Bulma.p "Search users") render_searchuser_form]
|
||||
[ Bulma.column (C.is 3) [Bulma.article (Bulma.p "Search users") render_searchuser_form]
|
||||
, Bulma.column_ [ Bulma.h3 "Result", show_found_users ]
|
||||
]
|
||||
Add -> Bulma.columns_
|
||||
[ Bulma.column (C.is_size 5) [Bulma.article (Bulma.p "Add a new user") render_adduser_form] ]
|
||||
[ Bulma.column (C.is 5) [Bulma.article (Bulma.p "Add a new user") render_adduser_form] ]
|
||||
]
|
||||
where
|
||||
show_found_users = Bulma.box [ HH.ul_ $ map user_card matching_users ]
|
||||
|
||||
@ -88,38 +88,43 @@ handleQuery = case _ of
|
||||
-- | The component changes when the user is authenticated.
|
||||
-- | A button has to appear for administrators.
|
||||
-- |
|
||||
-- | **TODO**: on mobile (a device with low resolution), a `burger icon` appears instead of the navigation bar.
|
||||
-- | On mobile (a device with low resolution), a `burger icon` appears instead of the navigation bar.
|
||||
-- | When clicked, a list of options (such as pages or a disconnection button) should appear.
|
||||
-- | Also, when clicked again, the list should disappear.
|
||||
|
||||
render :: forall m. State -> H.ComponentHTML Action () m
|
||||
render { logged, active, admin }
|
||||
= HH.div_
|
||||
[ main_nav
|
||||
[ nav_brand [ logo, burger_menu ]
|
||||
, nav_menu
|
||||
[ navbar_start [ left_bar_div ]
|
||||
, navbar_end [ right_bar_div ]
|
||||
]
|
||||
]
|
||||
]
|
||||
render { logged, active, admin } =
|
||||
main_nav
|
||||
[ nav_brand [ logo, burger_menu ]
|
||||
, nav_menu
|
||||
[ navbar_start left_bar_div
|
||||
, navbar_end right_bar_div
|
||||
]
|
||||
]
|
||||
|
||||
where
|
||||
left_bar_div =
|
||||
HH.div [HP.classes C.buttons] $ case logged, admin of
|
||||
case logged, admin of
|
||||
false, _ -> [ link_home, code_dropdown ]
|
||||
_, false -> [ link_home, link_domains, code_dropdown ]
|
||||
_, _ -> [ link_home, link_domains, link_authd_admin, code_dropdown ]
|
||||
|
||||
right_bar_div =
|
||||
HH.div [HP.classes C.navbar_item]
|
||||
[ HH.div [HP.classes C.buttons] $ case logged of
|
||||
false -> [ link_auth, link_register, link_mail_validation ]
|
||||
_ -> [ link_disconnection ]
|
||||
]
|
||||
case logged of
|
||||
false -> [ link_auth, link_register, link_mail_validation ]
|
||||
_ -> [ link_disconnection ]
|
||||
|
||||
main_nav = HH.nav [ HP.classes C.navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
|
||||
logo = HH.a [HP.classes C.navbar_item, HP.href "/"] [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
|
||||
navbar_color = C.is_success
|
||||
|
||||
main_nav =
|
||||
HH.nav [ HP.classes $ C.navbar <> navbar_color
|
||||
, ARIA.label "main navigation"
|
||||
, ARIA.role "navigation"
|
||||
]
|
||||
|
||||
logo = HH.strong [HP.classes $ C.navbar_item <> (C.is_size 4)] [HH.text "🍉"]
|
||||
-- HH.a [HP.classes C.navbar_item, HP.href "/"]
|
||||
-- [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
|
||||
|
||||
burger_menu =
|
||||
HH.a [ HP.classes $ C.navbar_burger <> if active then C.is_active else []
|
||||
@ -133,18 +138,21 @@ render { logged, active, admin }
|
||||
]
|
||||
|
||||
nav_brand = HH.div [HP.classes C.navbar_brand]
|
||||
nav_menu = HH.div [HP.id "navbar-netlibre", HP.classes $ C.navbar_menu <> if active then C.is_active else []]
|
||||
nav_menu = HH.div
|
||||
[ HP.id "navbar-netlibre"
|
||||
, HP.classes $ C.navbar_menu <> C.is_spaced <> if active then C.is_active else []
|
||||
]
|
||||
|
||||
navbar_start = HH.div [HP.classes C.navbar_start]
|
||||
navbar_end = HH.div [HP.classes C.navbar_end]
|
||||
|
||||
link_home = nav_button C.is_info "Home" (Navigate Home)
|
||||
link_domains = nav_button C.is_info "Domains" (Navigate DomainList)
|
||||
link_authd_admin = nav_button C.is_info "Admin" (Navigate Administration)
|
||||
link_auth = nav_button C.is_info "Login" (Navigate Authentication)
|
||||
link_register = nav_button_strong "Register" (Navigate Registration)
|
||||
link_mail_validation = nav_button C.is_info "Mail verification" (Navigate MailValidation)
|
||||
link_disconnection = nav_button C.is_danger "Disconnection" UnLog
|
||||
link_home = nav_link "Home" (Navigate Home)
|
||||
link_domains = nav_link "Domains" (Navigate DomainList)
|
||||
link_authd_admin = nav_link "Admin" (Navigate Administration)
|
||||
link_auth = nav_link "Login" (Navigate Authentication)
|
||||
link_register = nav_link_strong "Register" (Navigate Registration)
|
||||
link_mail_validation = nav_link "Mail verification" (Navigate MailValidation)
|
||||
link_disconnection = nav_link "Disconnection" UnLog
|
||||
|
||||
dropdown title dropdown_elements
|
||||
= HH.div [HP.classes $ C.navbar_item <> C.has_dropdown <> C.is_hoverable]
|
||||
@ -156,6 +164,16 @@ render { logged, active, admin }
|
||||
nav_button_strong str action = btn C.is_primary action (HH.strong [] [ HH.text str ])
|
||||
nav_button classes str action = btn classes action (HH.text str)
|
||||
|
||||
nav_link_strong str action =
|
||||
HH.a [ HP.classes (C.navbar_item <> C.is_danger <> C.has_background_success_dark)
|
||||
, HE.onClick (\_ -> action)
|
||||
] [ (HH.strong [] [ HH.text str ]) ]
|
||||
|
||||
nav_link str action =
|
||||
HH.a [ HP.classes (C.navbar_item <> navbar_color)
|
||||
, HE.onClick (\_ -> action)
|
||||
] [ (HH.text str) ]
|
||||
|
||||
code_dropdown =
|
||||
dropdown "Source code"
|
||||
[ dropdown_element "https://git.baguette.netlib.re/Baguette/authd" "authentication daemon"
|
||||
|
||||
@ -4,6 +4,9 @@ import Prelude (show, ($), (<>))
|
||||
|
||||
import Halogen.HTML as HH
|
||||
|
||||
is_spaced :: Array HH.ClassName
|
||||
is_spaced = [HH.ClassName "is-spaced"]
|
||||
|
||||
is_ancestor :: Array HH.ClassName
|
||||
is_ancestor = [HH.ClassName "is-ancestor"]
|
||||
is_vertical :: Array HH.ClassName
|
||||
@ -107,8 +110,10 @@ is_centered :: Array HH.ClassName
|
||||
is_centered = [HH.ClassName "is-centered"]
|
||||
is_danger :: Array HH.ClassName
|
||||
is_danger = [HH.ClassName "is-danger"]
|
||||
is :: Int -> Array HH.ClassName
|
||||
is size = [HH.ClassName $ "is-" <> show size]
|
||||
is_size :: Int -> Array HH.ClassName
|
||||
is_size size = [HH.ClassName $ "is-" <> show size]
|
||||
is_size size = [HH.ClassName $ "is-size-" <> show size]
|
||||
is_horizontal :: Array HH.ClassName
|
||||
is_horizontal = [HH.ClassName "is-horizontal"]
|
||||
is_hoverable :: Array HH.ClassName
|
||||
|
||||
Loading…
Reference in New Issue
Block a user