basefn/src/components/Basefn__Sidebar.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
%%raw(`import './Basefn__Sidebar.css'`)

open Xote

type size = Sm | Md | Lg

type navItem = {
  label: string,
  icon: option<string>,
  active: bool,
  url: string,
}

type navSection = {
  title: option<string>,
  items: array<navItem>,
}

let sizeToString = (size: size) => {
  switch size {
  | Sm => "sm"
  | Md => "md"
  | Lg => "lg"
  }
}

@jsx.component
let make = (
  ~logo: option<Node.node>=?,
  ~sections: array<navSection>,
  ~footer: option<Node.node>=?,
  ~size: size=Md,
  ~collapsed: bool=false,
) => {
  let scrolling = Signal.make(false)
  let getSidebarClass = () => {
    let sizeClass = " basefn-sidebar--" ++ sizeToString(size)
    let collapsedClass = collapsed ? " basefn-sidebar--collapsed" : ""
    "basefn-sidebar" ++ sizeClass ++ collapsedClass
  }

  let _ = Effect.run(() => {
    Basefn__Dom.addEventListener("scroll", () => {
      let scrollY = %raw("window.scrollY")
      Signal.set(scrolling, scrollY >= 64)
    })
  })

  <div class={getSidebarClass()}>
    {switch logo {
    | Some(logoContent) => {
        let class = Computed.make(() =>
          "basefn-sidebar__header" ++ (
            Signal.get(scrolling) ? " basefn-sidebar__header--scrolling" : ""
          )
        )
        <div class>
          <div class="basefn-sidebar__logo"> {logoContent} </div>
        </div>
      }
    | None => <> </>
    }}
    <nav class="basefn-sidebar__nav">
      {sections
      ->Array.map(section => {
        <div class="basefn-sidebar__section">
          {switch section.title {
          | Some(title) =>
            <div class="basefn-sidebar__section-title"> {Node.text(title)} </div>
          | None => <> </>
          }}
          {section.items
          ->Array.mapWithIndex((item, index) => {
            let itemClass =
              "basefn-sidebar__item" ++ (item.active ? " basefn-sidebar__item--active" : "")

            Router.link(
              ~to={item.url},
              ~attrs=[Node.attr("class", itemClass)],
              ~children=[
                <div class="basefn-sidebar__item-text"> {Node.text(item.label)} </div>,
              ],
              (),
            )
          })
          ->Node.fragment}
        </div>
      })
      ->Node.fragment}
    </nav>
    {switch footer {
    | Some(footerContent) => <div class="basefn-sidebar__footer"> {footerContent} </div>
    | None => <> </>
    }}
  </div>
}