basefn/src/components/Basefn__AppLayout.res at main · brnrdog/basefn · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
%%raw(`import './Basefn__AppLayout.css'`)

open Xote

type contentWidth = FullWidth | Contained
type topbarPosition = Inline | AboveAll

@jsx.component
let make = (
  ~sidebar: option<Node.node>=?,
  ~topbar: option<Node.node>=?,
  ~children: Node.node,
  ~contentWidth: contentWidth=FullWidth,
  ~noPadding: bool=false,
  ~sidebarSize: option<string>=?, // "sm" | "md" | "lg"
  ~sidebarCollapsed: bool=false,
  ~topbarPosition: topbarPosition=Inline,
  ~topbarSize: option<string>=?, // "sm" | "md" | "lg"
) => {
  let sidebarOpen = Signal.make(false)

  let getLayoutClass = () => {
    let hasSidebar = sidebar->Option.isSome ? " basefn-app-layout--has-sidebar" : ""
    let sidebarSizeClass = switch sidebarSize {
    | Some("sm") => " basefn-app-layout--sidebar-sm"
    | Some("lg") => " basefn-app-layout--sidebar-lg"
    | _ => ""
    }
    let collapsedClass = sidebarCollapsed ? " basefn-app-layout--sidebar-collapsed" : ""
    let topbarPositionClass = switch topbarPosition {
    | AboveAll => " basefn-app-layout--topbar-above"
    | Inline => ""
    }
    let topbarSizeClass = switch (topbarPosition, topbarSize) {
    | (AboveAll, Some("sm")) => " basefn-app-layout--topbar-sm"
    | (AboveAll, Some("lg")) => " basefn-app-layout--topbar-lg"
    | _ => ""
    }
    let sidebarOpenClass = Computed.make(() =>
      Signal.get(sidebarOpen) ? " basefn-app-layout--sidebar-open" : ""
    )
    "basefn-app-layout" ++
    hasSidebar ++
    sidebarSizeClass ++
    collapsedClass ++
    topbarPositionClass ++
    topbarSizeClass
  }

  let getContentClass = () => {
    let widthClass = switch contentWidth {
    | FullWidth => " basefn-app-layout--full-width"
    | Contained => " basefn-app-layout--contained"
    }
    let paddingClass = noPadding ? " basefn-app-layout__content-inner--no-padding" : ""
    "basefn-app-layout__content-inner" ++ widthClass ++ paddingClass
  }

  let handleSidebarToggle = () => {
    Signal.update(sidebarOpen, prev => !prev)
  }

  <div
    class={Computed.make(() => {
      getLayoutClass() ++
      Signal.get(
        Computed.make(() => Signal.get(sidebarOpen) ? " basefn-app-layout--sidebar-open" : ""),
      )
    })}
  >
    {switch (topbarPosition, topbar) {
    | (AboveAll, Some(topbarContent)) =>
      <div class="basefn-app-layout__topbar basefn-app-layout__topbar--above">
        {topbarContent}
      </div>
    | _ => <> </>
    }}
    <div class="basefn-app-layout__body">
      {switch sidebar {
      | Some(sidebarContent) =>
        <>
          <div class="basefn-app-layout__sidebar"> {sidebarContent} </div>
          <div
            class="basefn-app-layout__sidebar-backdrop"
            onClick={_ => Signal.set(sidebarOpen, false)}
          />
        </>
      | None => <> </>
      }}
      <div class="basefn-app-layout__main-wrapper">
        {switch (topbarPosition, topbar) {
        | (Inline, Some(topbarContent)) =>
          <div class="basefn-app-layout__topbar"> {topbarContent} </div>
        | _ => <> </>
        }}
        <main class="basefn-app-layout__content">
          <div class={getContentClass()}> {children} </div>
        </main>
      </div>
    </div>
  </div>
}