Fix the navbar.

src/App/AdministrationInterface.purs

@@ -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 ]

src/App/NavigationInterface.purs

@@ -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 }
+render { logged, active, admin } =
-  = HH.div_
+  main_nav
-      [ main_nav
+    [ nav_brand [ logo, burger_menu ]
-          [ nav_brand [ logo, burger_menu ]
+    , nav_menu
-          , nav_menu
+        [ navbar_start left_bar_div
-              [ navbar_start [ left_bar_div ]
+        , navbar_end   right_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]
+    case logged of
-      [ HH.div [HP.classes C.buttons] $ case logged of
+        false -> [ link_auth, link_register, link_mail_validation ]
-          false -> [ link_auth, link_register, link_mail_validation ]
+        _     -> [ link_disconnection ]
-          _     -> [ link_disconnection ]
-      ]
 
-  main_nav = HH.nav [ HP.classes C.navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
+  navbar_color = C.is_success
-  logo = HH.a [HP.classes C.navbar_item, HP.href "/"] [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
+
+  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_home            = nav_link        "Home"              (Navigate Home)
-  link_domains         = nav_button        C.is_info   "Domains"           (Navigate DomainList)
+  link_domains         = nav_link        "Domains"           (Navigate DomainList)
-  link_authd_admin     = nav_button        C.is_info   "Admin"             (Navigate Administration)
+  link_authd_admin     = nav_link        "Admin"             (Navigate Administration)
-  link_auth            = nav_button        C.is_info   "Login"             (Navigate Authentication)
+  link_auth            = nav_link        "Login"             (Navigate Authentication)
-  link_register        = nav_button_strong "Register" (Navigate Registration)
+  link_register        = nav_link_strong "Register"          (Navigate Registration)
-  link_mail_validation = nav_button        C.is_info   "Mail verification" (Navigate MailValidation)
+  link_mail_validation = nav_link        "Mail verification" (Navigate MailValidation)
-  link_disconnection   = nav_button        C.is_danger "Disconnection"     UnLog
+  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"

src/CSSClasses.purs

@@ -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