Allow to hide the search menu

This is more convenient on small screens

modules/webapp/src/main/elm/Comp/ItemCardList.elm

@@ -79,16 +79,13 @@ view model =
 
 viewGroup : ItemLightGroup -> Html Msg
 viewGroup group =
-    div [] <|
+    div [ class "item-group" ]
-        List.concat
+        [ div [ class "ui horizontal divider" ]
-            [ [ div [ class "ui horizontal divider" ]
+            [ text group.name
-                    [ text group.name
-                    ]
-              ]
-            , [ div [ class "ui one column grid" ]
-                    (List.map viewItem group.items)
-              ]
             ]
+        , div [ class "ui one column grid" ]
+            (List.map viewItem group.items)
+        ]
 
 
 viewItem : ItemLight -> Html Msg

modules/webapp/src/main/elm/Page/Home/Data.elm

@@ -17,6 +17,7 @@ type alias Model =
     , itemListModel : Comp.ItemCardList.Model
     , searchInProgress : Bool
     , viewMode : ViewMode
+    , menuCollapsed : Bool
     }
 
 
@@ -26,6 +27,7 @@ emptyModel =
     , itemListModel = Comp.ItemCardList.init
     , searchInProgress = False
     , viewMode = Listing
+    , menuCollapsed = False
     }
 
 
@@ -36,6 +38,7 @@ type Msg
     | ItemCardListMsg Comp.ItemCardList.Msg
     | ItemSearchResp (Result Http.Error ItemLightList)
     | DoSearch
+    | ToggleSearchMenu
 
 
 type ViewMode

modules/webapp/src/main/elm/Page/Home/Update.elm

@@ -68,6 +68,11 @@ update key flags msg model =
         DoSearch ->
             doSearch flags model
 
+        ToggleSearchMenu ->
+            ( { model | menuCollapsed = not model.menuCollapsed }
+            , Cmd.none
+            )
+
 
 doSearch : Flags -> Model -> ( Model, Cmd Msg )
 doSearch flags model =

modules/webapp/src/main/elm/Page/Home/View.elm

@@ -12,21 +12,33 @@ import Page.Home.Data exposing (..)
 view : Model -> Html Msg
 view model =
     div [ class "home-page ui padded grid" ]
-        [ div [ class "four wide column" ]
+        [ div
-            [ div [ class "ui top attached ablue-comp menu" ]
+            [ classList
-                [ h4 [ class "header item" ]
+                [ ( "sixteen wide mobile six wide tablet four wide computer column", True )
-                    [ text "Search"
+                , ( "invisible hidden", model.menuCollapsed )
+                ]
+            ]
+            [ div
+                [ class "ui top attached ablue-comp menu"
+                ]
+                [ a
+                    [ class "item"
+                    , href "#"
+                    , onClick ToggleSearchMenu
+                    ]
+                    [ i [ class "ui angle down icon" ] []
+                    , text "Search"
                     ]
                 , div [ class "right floated menu" ]
                     [ a
-                        [ class "item"
+                        [ class "icon item"
                         , onClick ResetSearch
                         , href "#"
                         ]
                         [ i [ class "undo icon" ] []
                         ]
                     , a
-                        [ class "item"
+                        [ class "icon item"
                         , onClick DoSearch
                         , href ""
                         ]
@@ -38,8 +50,28 @@ view model =
                 [ Html.map SearchMenuMsg (Comp.SearchMenu.view model.searchMenuModel)
                 ]
             ]
-        , div [ class "twelve wide column" ]
+        , div
-            [ case model.viewMode of
+            [ classList
+                [ ( "sixteen wide mobile ten wide tablet twelve wide computer column", not model.menuCollapsed )
+                , ( "sixteen wide column", model.menuCollapsed )
+                ]
+            ]
+            [ div
+                [ classList
+                    [ ( "invisible hidden", not model.menuCollapsed )
+                    , ( "ui segment container", True )
+                    ]
+                ]
+                [ a
+                    [ class "ui basic large circular label"
+                    , onClick ToggleSearchMenu
+                    , href "#"
+                    ]
+                    [ i [ class "search icon" ] []
+                    , text "Search Menu…"
+                    ]
+                ]
+            , case model.viewMode of
                 Listing ->
                     if model.searchInProgress then
                         resultPlaceholder