Merge remote-tracking branch 'origin/arturo-dev-230109-sidebar-closing-rc0.x' into dev

dist/styles/bootstrap-darkster.css

@@ -9530,6 +9530,11 @@ input[type=range]:-moz-focusring {
   width: 100%;
   display: block;
 }
+.graph-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 .graph-sidebar__legend-tab {
   padding: 16px 20px;
 }
@@ -11564,6 +11569,11 @@ select.form-control {
   width: 100%;
   display: block;
 }
+.phylo-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 
 .phylo-details-tab__counter {
   margin: 16px 20px;

dist/styles/bootstrap-default.css

@@ -9479,6 +9479,11 @@ input[type=range]:-moz-focusring {
   width: 100%;
   display: block;
 }
+.graph-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 .graph-sidebar__legend-tab {
   padding: 16px 20px;
 }
@@ -11510,6 +11515,11 @@ select.form-control {
   width: 100%;
   display: block;
 }
+.phylo-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 
 .phylo-details-tab__counter {
   margin: 16px 20px;

dist/styles/bootstrap-greyson.css

@@ -9239,6 +9239,11 @@ input[type=range]:-moz-focusring {
   width: 100%;
   display: block;
 }
+.graph-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 .graph-sidebar__legend-tab {
   padding: 16px 20px;
 }
@@ -11273,6 +11278,11 @@ select.form-control {
   width: 100%;
   display: block;
 }
+.phylo-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 
 .phylo-details-tab__counter {
   margin: 16px 20px;

dist/styles/bootstrap-herbie.css

@@ -9487,6 +9487,11 @@ input[type=range]:-moz-focusring {
   width: 100%;
   display: block;
 }
+.graph-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 .graph-sidebar__legend-tab {
   padding: 16px 20px;
 }
@@ -11521,6 +11526,11 @@ select.form-control {
   width: 100%;
   display: block;
 }
+.phylo-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 
 .phylo-details-tab__counter {
   margin: 16px 20px;

dist/styles/bootstrap-monotony.css

@@ -9488,6 +9488,11 @@ input[type=range]:-moz-focusring {
   width: 100%;
   display: block;
 }
+.graph-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 .graph-sidebar__legend-tab {
   padding: 16px 20px;
 }
@@ -11522,6 +11527,11 @@ select.form-control {
   width: 100%;
   display: block;
 }
+.phylo-sidebar__close {
+  position: absolute;
+  right: 0;
+  margin-right: 24px;
+}
 
 .phylo-details-tab__counter {
   margin: 16px 20px;

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -23,7 +23,7 @@ import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.App.Store as AppStore
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Elevation(..), Variant(..))
 import Gargantext.Components.GraphExplorer.Sidebar.ContactList (contactListWrapper)
 import Gargantext.Components.GraphExplorer.Sidebar.DocList (docListWrapper)
 import Gargantext.Components.GraphExplorer.Sidebar.Legend as Legend
@@ -39,7 +39,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
-import Gargantext.Types (CTabNgramType, FrontendError(..), NodeID, TabSubType(..), TabType(..), TermList(..), modeTabType)
+import Gargantext.Types (CTabNgramType, FrontendError(..), NodeID, SidePanelState(..), TabSubType(..), TabType(..), TermList(..), modeTabType)
 import Gargantext.Utils (getter, nbsp, setter, (?))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
@@ -63,13 +63,16 @@ sidebar = R2.leaf sidebarCpt
 sidebarCpt :: R.Component Props
 sidebarCpt = here.component "sidebar" cpt where
   cpt props _ = do
-    -- States
+    -- | States
+    -- |
     { sideTab
+    , showSidebar
     } <- GraphStore.use
 
-    sideTab'  <- R2.useLive' sideTab
+    sideTab'      <- R2.useLive' sideTab
 
-    -- Computed
+    -- | Computed
+    -- |
     let
       sideTabs =
         [ GET.SideTabLegend
@@ -77,12 +80,27 @@ sidebarCpt = here.component "sidebar" cpt where
         , GET.SideTabCommunity
         ]
 
-    -- Render
+    -- | Behaviors
+    -- |
+    let
+      closeCallback :: Unit -> Effect Unit
+      closeCallback _ = T.write_ Closed showSidebar
+
+    -- | Render
+    -- |
     pure $
 
       H.div
       { className: "graph-sidebar" }
       [
+        -- Close CTA
+        B.iconButton
+        { name: "times"
+        , elevation: Level2
+        , callback: closeCallback
+        , className: "graph-sidebar__close"
+        }
+      ,
         -- Menu
         B.tabs
         { value: sideTab'

src/Gargantext/Components/PhyloExplorer/Sidebar/SideBar.purs

@@ -6,10 +6,12 @@ import Gargantext.Prelude
 
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (Elevation(..))
 import Gargantext.Components.PhyloExplorer.DetailsTab (detailsTab)
 import Gargantext.Components.PhyloExplorer.SelectionTab (selectionTab)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.Types (TabView(..))
+import Gargantext.Types (SidePanelState(..))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -32,6 +34,7 @@ component = R.hooksComponent componentName cpt where
     -- |
     { sideBarTabView
     , phyloId
+    , sideBarDisplayed
     } <- PhyloStore.use
 
     sideBarTabView' <- R2.useLive' sideBarTabView
@@ -42,6 +45,12 @@ component = R.hooksComponent componentName cpt where
     let
       tabList = [ DetailsTab, SelectionTab ]
 
+    -- | Behaviors
+    -- |
+    let
+      closeCallback :: Unit -> Effect Unit
+      closeCallback _ = T.write_ Closed sideBarDisplayed
+
     -- | Render
     -- |
     pure $
@@ -49,6 +58,14 @@ component = R.hooksComponent componentName cpt where
       H.div
       { className: "phylo-sidebar" }
       [
+        -- Close CTA
+        B.iconButton
+        { name: "times"
+        , elevation: Level2
+        , callback: closeCallback
+        , className: "phylo-sidebar__close"
+        }
+      ,
         -- Menu
         B.tabs
         { value: sideBarTabView'

src/sass/_legacy/_graph.sass

@@ -122,6 +122,11 @@
   $margin-x: $sidebar-tab-margin-x
   $margin-y: space-x(2)
 
+  &__close
+    position: absolute
+    right: 0
+    margin-right: space-x(3)
+
   &__legend-tab
     padding: $margin-y $margin-x
 

src/sass/_legacy/_phylo.scss

@@ -549,6 +549,12 @@ $decreasing-color: #11638F;
 
 .phylo-sidebar {
   @include term-window;
+
+  &__close {
+    position: absolute;
+    right: 0;
+    margin-right: space-x(3);
+  }
 }
 
 .phylo-details-tab {