Here, your model has an Attr value (which is probably not a good idea, try storing the string value associated with the style element instead), which is flipped every time a button is clicked. Your view, however, doesn't use this value, hence the UI will be unaffected. Or am I missing something?

By on 12/14/2022 5:05 AM ()

Adam,

Thank you so much for your suggestions, removed my previous code and got it working with the code below should anyone else need help.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let expanded = "width:150px;"
let collapsed = "width:35px;"

type NavWidth =  bool

let navwidth =  function
    | true -> expanded 
    | false -> collapsed

type Model =  { navwidth : NavWidth }

let initModel = { navwidth = false  }

type Message =
    | ToggleExpanded
    | ToggleCollapsed

let update remote message model =
    | ToggleExpanded ->
        { model with navwidth = true }, Cmd.none
    | ToggleCollapsed ->
        { model with navwidth = false }, Cmd.none

let view model dispatch =
    button { 
        attr.style  (if model.navwidth = false then collapsed else expanded)
        on.click (fun _ ->
            if model.navwidth = false then 
                dispatch ToggleExpanded
            else 
                dispatch ToggleCollapsed
        )
By on 12/18/2022 6:04 AM ()
IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy
Built with WebSharper