[ERGO] Handed button does not disappear under mouse pointer after click

src/Gargantext/Components/Nodes/Home/Public.purs

@@ -117,12 +117,12 @@ publicLayoutCpt = R.hooksComponentWithModule thisModule "publicLayout" cpt
                      [ H.div { className:"container1"
                              , style: { marginBottom : "15px"}
                              }
-                             [ H.h2 {} [H.text "Discover knowledge"
-                             , H.p { className: "lead text-muted center"}
-                                   [ H.text "maps made with "
-                                   , H.span {className: "fa fa-heart"} []
-                                   ]
-                             ]
+                             [ H.h2 {} [ H.text "Discover knowledge"
+                                       , H.p { className: "lead text-muted center"}
+                                             [ H.text "maps made with "
+                                             , H.span {className: "fa fa-heart"} []
+                                             ]
+                                       ]
                              ]
                      ]
              -- | TODO browse maps

src/Gargantext/Components/TopBar.purs

@@ -6,7 +6,6 @@ import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
-
 import Gargantext.Prelude
 
 import Gargantext.Types (Handed(..))
@@ -15,9 +14,7 @@ import Gargantext.Utils.Reactix as R2
 thisModule :: String
 thisModule = "Gargantext.Components.TopBar"
 
-type TopBarProps = (
-  handed :: R.State Handed
-  )
+type TopBarProps = (handed :: R.State Handed)
 
 topBar :: R2.Component TopBarProps
 topBar = R.createElement topBarCpt
@@ -31,35 +28,41 @@ topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt
                    , className: "navbar navbar-inverse navbar-fixed-top" }
         [ H.div { className: "container-fluid" }
             [ H.div { className: "navbar-inner" }
-              [ logo (fst handed)
-              , H.div { className: "collapse navbar-collapse"  <> navHanded} (
-                [
-                  H.ul { className: "nav navbar-nav" <> navHanded} []
-                , H.ul { title: "If you are Left Handed you can change "
-                             <> "the interface by clicking on me. Click "
-                             <> "again to come back to previous state."
-                       , className: "nav navbar-nav" <> navHanded
-                       } [handedChooser { handed } []]
-                , H.ul { className: "nav navbar-nav" <> navHanded} [divDropdownLeft {} []]
-                {-, H.ul { title: "Dark Mode soon here"
-                        , className : "nav navbar-nav"
-                         } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[]
-                                                  ]
-                                         ]
-                               ]
-                      -}
-                ] <> children)
-              ]
+                    [ logo false (fst handed)
+                    , H.div { className: "collapse navbar-collapse"  <> navHanded false}
+                            ( [
+                                H.ul { className: "nav navbar-nav" <> navHanded false} []
+                              , handButton false handed
+                              , H.ul { className: "nav navbar-nav" <> navHanded false} [divDropdownLeft {} []]
+                              {-, H.ul { title: "Dark Mode soon here"
+                                      , className : "nav navbar-nav"
+                                       } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[]
+                                                                ]
+                                                       ]
+                                             ]
+                                    -}
+                              ] <> children 
+                            )
+                    ]
+            , H.div { className: "navbar-inner" }
+                    [ handButton true handed 
+                    ]
             ]
         ]
           where
-            navHanded  = if fst handed == LeftHanded then " navbar-right" else ""
+            navHanded t = if xor t (fst handed == LeftHanded) then " navbar-right" else " navbar-left"
+            handButton t handed = H.ul { title: "If you are Left Handed you can change "
+                                           <> "the interface by clicking on me. Click "
+                                           <> "again to come back to previous state."
+                                     , className: "nav navbar-nav" <> navHanded t
+                                     } [handedChooser { handed } []]
+
             -- sortHanded = if fst handed == LeftHanded then reverse else reverse -- identity
             -- SB.searchBar {session, databases: allDatabases}
 
 
-logo :: Handed -> R.Element
-logo handed =
+logo :: Boolean -> Handed -> R.Element
+logo b handed =
   H.a { className, href: "#/" }
   [ H.img { src, title, width: "30", height: "28" }
   ]
@@ -67,7 +70,7 @@ logo handed =
     className = "navbar-brand logoSmall" <> navHanded
     src       = "images/logoSmall.png"
     title     = "Back to home."
-    navHanded = if handed == LeftHanded then " navbar-right" else ""
+    navHanded = if xor b (handed == LeftHanded) then " navbar-right" else ""
 
 
 divDropdownLeft :: R2.Component ()

src/Gargantext/Prelude.purs

-module Gargantext.Prelude (module Prelude, logs, logExceptions, id, class Read, read)
+module Gargantext.Prelude (module Prelude, logs, logExceptions, id, class Read, read, xor)
   where
 
 import Data.Maybe (Maybe)
@@ -35,3 +35,9 @@ logExceptions message f x =
                              logs e
                              throwException e) do
       pure $ f x
+
+xor :: Boolean -> Boolean -> Boolean
+xor true false = true
+xor false true = true
+xor _      _   = false
+

src/Gargantext/Types.purs

@@ -10,23 +10,21 @@ import Data.Generic.Rep.Ord (genericCompare)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Int (toNumber)
 import Data.Maybe (Maybe(..), maybe, fromMaybe)
+import Data.Tuple (fst, snd)
+import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
+import Gargantext.Prelude
 import Prim.Row (class Union)
 import Reactix as R
 import URI.Query (Query)
 
-import Gargantext.Prelude
-
+-------------------------------------------------------------------------
 data Handed = LeftHanded | RightHanded
 
 derive instance genericHanded :: Generic Handed _
 instance eqHanded :: Eq Handed where
   eq = genericEq
 
-reverseHanded :: Handed -> Handed
-reverseHanded LeftHanded  = RightHanded
-reverseHanded RightHanded = LeftHanded
-
 -------------------------------------------------------------------------
 type ID      = Int
 type Name    = String