git.iko.soy/rowtype-yoga/psfp
on 191a78d help sign in
rowtype-yoga/psfp/client/src/Container/Sidebar.purs
141 lines 4.2 kB history raw
1module Container.Sidebar where
3import Prelude
5import CSS.Safer (cssSafer)
6import Data.Monoid (guard)
7import Effect (Effect)
8import React.Basic (JSX)
9import React.Basic.DOM as R
10import React.Basic.Events (handler_)
11import React.Basic.Hooks (ReactComponent, component, element)
12import React.Basic.Hooks as React
13import SVG.Icon (ActiveArrowDirection(..), mkMenu)
14import Theme.Styles (classNames, makeStyles)
15import Theme.Types (CSSTheme)
17mkSidebar ∷
18 Effect
19 ( ReactComponent
20 { children ∷ Array JSX
21 , modifyCollapsed ∷ (Boolean -> Boolean) -> Effect Unit
22 , collapsed ∷ Boolean
23 }
24 )
25mkSidebar = do
26 useStyles <-
27 makeStyles \(theme ∷ CSSTheme) ->
28 { sidebar:
29 cssSafer
30 { background: theme.interfaceColour
31 , fontFamily: theme.textFontFamily
32 , color: theme.textColour
33 , gridArea: "nav"
34 , display: "flex"
35 , flexDirection: "column"
36 , minHeight: "calc(100vh, -80px)"
37 , transition: "0.2s ease-in-out"
38 , overflowX: "hidden"
39 }
40 , sidebarCollapsed: cssSafer { width: "70px" }
41 , sidebarExpanded: cssSafer { width: "250px" }
42 , logo:
43 cssSafer
44 { width: "60px"
45 , height: "60px"
46 , padding: "0 5px 0 5px"
47 , transition: "0.2s ease-in-out"
48 , transitionDelay: "0.1s"
49 , alignSelf: "flex-end"
50 }
51 , logoCollapsed:
52 cssSafer
53 {} -- transform: "rotate(180deg)"}
54 }
55 menu <- mkMenu
56 component "Sidebar" \{ children, collapsed, modifyCollapsed } -> React.do
57 rawClasses <- useStyles
58 let
59 classes = flip classNames rawClasses
60 pure
61 $ R.nav
62 { className:
63 classes
64 [ _.sidebar
65 , if collapsed then _.sidebarCollapsed else _.sidebarExpanded
66 ]
67 , children:
68 [ R.ul
69 { className: classes [ _.logo, guard collapsed _.logoCollapsed ]
70 , onClick: handler_ $ (modifyCollapsed not)
71 , children:
72 [ element menu
73 { activeArrowDirection: if collapsed then ArrowPointsRight else ArrowPointsLeft }
74 ]
75 }
76 ]
77 <> children
78 }
80mkSidebarLink ∷ Effect (ReactComponent { name ∷ String, icon ∷ JSX, collapsed ∷ Boolean })
81mkSidebarLink = do
82 useStyles <-
83 makeStyles \(theme ∷ CSSTheme) ->
84 { sidebarEntry:
85 cssSafer
86 { fontFamily: theme.headingFontFamily
87 , alignSelf: "flex-end"
88 , justifyContent: "space-between"
89 , alignContent: "stretch"
90 , color: theme.textColour
91 , gridArea: "nav"
92 , display: "flex"
93 , flexDirection: "row"
94 , overflowX: "hidden"
95 , width: "190px"
96 , paddingLeft: "5px"
97 , borderRadius: "5px 0 0 5px"
98 , cursor: "pointer"
99 , "&:hover":
100 { background: theme.highlightColour
101 }
102 -- , "&:hover": cssSafer{ opacity: "1.0"}
103 }
104 , label:
105 cssSafer
106 { fontFamily: theme.textFontFamily
107 , color: theme.textColour
108 , paddingLeft: "20px"
109 , textTransform: "uppercase"
110 , lineHeight: "60px"
111 , fontSize: "1.4em"
112 }
113 , icon:
114 cssSafer
115 { width: "50px"
116 , height: "50px"
117 , padding: "5px 10px 5px 5px"
118 , transition: "0.2s ease-in-out"
119 , transitionDelay: "0.1s"
120 , alignSelf: "flex-end"
121 , fill: theme.textColour <> " !important"
122 }
123 }
124 component "SidebarLink" \{ name, icon, collapsed } -> React.do
125 rawClasses <- useStyles
126 let
127 classes = flip classNames rawClasses
128 pure
129 $ R.li
130 { className: classes [ _.sidebarEntry ]
131 , children:
132 [ R.div
133 { className: classes [ _.label ]
134 , children: [ R.text name ]
135 }
136 , R.div
137 { className: classes [ _.icon ]
138 , children: [ icon ]
139 }
140 ]
141 }