Navbar now is fully functional and fancy.

src/App/Container.purs

@@ -67,6 +67,7 @@ import App.Messages.DNSManagerDaemon as DNSManager
 import App.Messages.AuthenticationDaemon as AuthD
 import Halogen as H
 import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
 import Type.Proxy (Proxy(..))
 import Effect.Aff.Class (class MonadAff)
 import Data.ArrayBuffer.Types (ArrayBuffer)
@@ -78,6 +79,7 @@ import Web.Storage.Storage as Storage
 import App.LogMessage (LogMessage(..))
 
 import App.Pages
+import CSSClasses as C
 
 type Token = String
 type Login = String
@@ -245,9 +247,7 @@ render state
     render_nav = HH.slot _nav unit NavigationInterface.component unit NavigationInterfaceEvent
 
     render_header :: forall monad. MonadAff monad => H.ComponentHTML Action ChildSlots monad
-    render_header = case state.token of
-      Nothing -> Bulma.hero "net libre" "free domains"
-      Just _ ->  Bulma.hero "net libre" ""
+    render_header = Bulma.small_hero  "net libre" "Providing free domains since 2015!"
 
     render_logs :: forall monad. MonadAff monad => H.ComponentHTML Action ChildSlots monad
     render_logs = Bulma.container [ HH.slot_ _log unit AppLog.component unit ]

src/App/NavigationInterface.purs

@@ -152,7 +152,8 @@ render { logged, active, admin } =
   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
+  link_disconnection   =
+    nav_link_ (C.has_text_light <> C.has_background_danger) "Disconnection" UnLog
 
   dropdown title dropdown_elements
     = HH.div [HP.classes $ C.navbar_item <> C.has_dropdown <> C.is_hoverable]
@@ -169,8 +170,10 @@ render { logged, active, admin } =
          , HE.onClick (\_ -> action)
          ] [ (HH.strong [] [ HH.text str ]) ]
 
-  nav_link str action =
-    HH.a [ HP.classes (C.navbar_item <> navbar_color)
+  nav_link str action = nav_link_ navbar_color str action
+
+  nav_link_ classes str action =
+    HH.a [ HP.classes (C.navbar_item <> classes)
          , HE.onClick (\_ -> action)
          ] [ (HH.text str) ]
 

src/Bulma.purs

@@ -316,6 +316,17 @@ hero _title _subtitle
           ]
       ]
 
+small_hero :: forall w i. String -> String -> HH.HTML w i
+small_hero _title _subtitle =
+  HH.section [ HP.classes (C.hero <> C.is_info <> C.is_small) ]
+    [ HH.div [ HP.classes C.hero_body ]
+        [ HH.div [ HP.classes $ C.container <> C.has_text_centered ]
+            [ HH.p [ HP.classes C.title ]    [ HH.text _title ]
+            , HH.p [ HP.classes C.subtitle ] [ HH.text _subtitle ]
+            ]
+        ]
+    ]
+
 hero_danger :: forall w i. String -> String -> HH.HTML w i
 hero_danger _title _subtitle
   = HH.section [ HP.classes (C.hero <> C.is_danger <> C.is_small) ]

src/CSSClasses.purs

@@ -26,6 +26,9 @@ message = [HH.ClassName "message"]
 message_header :: Array HH.ClassName
 message_header = [HH.ClassName "message-header"]
 
+has_text_centered :: Array HH.ClassName
+has_text_centered = [HH.ClassName "has-text-centered"]
+
 message_body :: Array HH.ClassName
 message_body = [HH.ClassName "message-body"]
 
@@ -72,6 +75,8 @@ has_background_warning_dark :: Array HH.ClassName
 has_background_warning_dark = [HH.ClassName "has-background-warning-dark"]
 has_background_danger_dark :: Array HH.ClassName
 has_background_danger_dark = [HH.ClassName "has-background-danger-dark"]
+has_background_danger :: Array HH.ClassName
+has_background_danger = [HH.ClassName "has-background-danger"]
 
 has_background_primary_light :: Array HH.ClassName
 has_background_primary_light = [HH.ClassName "has-background-primary-light"]