git.iko.soy/rowtype-yoga/psfp
on 97117af help sign in
rowtype-yoga/psfp/client/dce-output/Container.Sidebar/index.js
260 lines 15 kB history raw
1// Generated by purs version 0.13.6
2"use strict";
3var Control_Applicative = require("../Control.Applicative/index.js");
4var Data_HeytingAlgebra = require("../Data.HeytingAlgebra/index.js");
5var Data_Monoid = require("../Data.Monoid/index.js");
6var Data_Semigroup = require("../Data.Semigroup/index.js");
7var Data_Symbol = require("../Data.Symbol/index.js");
8var JSS = require("../JSS/index.js");
9var React_Basic = require("../React.Basic/index.js");
10var React_Basic_DOM = require("../React.Basic.DOM/index.js");
11var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
12var React_Basic_Events = require("../React.Basic.Events/index.js");
13var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
14var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
15var Record_Extra = require("../Record.Extra/index.js");
16var Type_Equality = require("../Type.Equality/index.js");
17var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
18var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
19var mkSidebarLink = function __do() {
20 var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
21 return "icon";
22 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
23 return "label";
24 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
25 return "sidebarEntry";
26 }))()(Record_Extra.mapRecordNil)()())()())()())(JSS.jssClasses()(function (v) {
27 return {
28 sidebarEntry: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
29 return "&:hover";
30 }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
31 return "background";
32 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
33 return "alignContent";
34 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
35 return "alignSelf";
36 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
37 return "borderRadius";
38 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
39 return "color";
40 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
41 return "cursor";
42 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
43 return "display";
44 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
45 return "flexDirection";
46 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
47 return "fontFamily";
48 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
49 return "gridArea";
50 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
51 return "justifyContent";
52 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
53 return "overflowX";
54 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
55 return "paddingLeft";
56 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
57 return "width";
58 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
59 fontFamily: v.headingFontFamily,
60 alignSelf: "flex-end",
61 justifyContent: "space-between",
62 alignContent: "stretch",
63 color: v.textColour,
64 gridArea: "nav",
65 display: "flex",
66 flexDirection: "row",
67 overflowX: "hidden",
68 width: "190px",
69 paddingLeft: "5px",
70 borderRadius: "5px 0 0 5px",
71 cursor: "pointer",
72 "&:hover": {
73 background: v.highlightColour
74 }
75 }),
76 label: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
77 return "color";
78 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
79 return "fontFamily";
80 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
81 return "fontSize";
82 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
83 return "lineHeight";
84 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
85 return "paddingLeft";
86 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
87 return "textTransform";
88 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
89 fontFamily: v.textFontFamily,
90 color: v.textColour,
91 paddingLeft: "20px",
92 textTransform: "uppercase",
93 lineHeight: "60px",
94 fontSize: "1.4em"
95 }),
96 icon: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
97 return "alignSelf";
98 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
99 return "fill";
100 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
101 return "height";
102 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
103 return "padding";
104 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
105 return "transition";
106 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
107 return "transitionDelay";
108 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
109 return "width";
110 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))()())({
111 width: "50px",
112 height: "50px",
113 padding: "5px 10px 5px 5px",
114 transition: "0.2s ease-in-out",
115 transitionDelay: "0.1s",
116 alignSelf: "flex-end",
117 fill: v.textColour + " !important"
118 })
119 };
120 }))();
121 return React_Basic_Hooks.component()()()("SidebarLink")(function (v) {
122 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
123 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.li()({
124 className: classes.sidebarEntry,
125 children: [ React_Basic_DOM_Generated.div()({
126 className: classes.label,
127 children: [ React_Basic_DOM.text(v.name) ]
128 }), React_Basic_DOM_Generated.div()({
129 className: classes.icon,
130 children: [ v.icon ]
131 }) ]
132 }));
133 });
134 })();
135};
136var mkSidebar = function __do() {
137 var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
138 return "logo";
139 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
140 return "logoCollapsed";
141 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
142 return "sidebar";
143 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
144 return "sidebarCollapsed";
145 }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
146 return "sidebarExpanded";
147 }))()(Record_Extra.mapRecordNil)()())()())()())()())()())(JSS.jssClasses()(function (v) {
148 return {
149 sidebar: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
150 return "background";
151 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
152 return "borderRadius";
153 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
154 return "boxShadow";
155 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
156 return "color";
157 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
158 return "display";
159 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
160 return "flexDirection";
161 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
162 return "fontFamily";
163 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
164 return "marginTop";
165 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
166 return "overflowX";
167 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
168 return "paddingBottom";
169 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
170 return "position";
171 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
172 return "transition";
173 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
174 return "transitionTimingFunction";
175 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
176 return "zIndex";
177 }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
178 background: v.interfaceColourLighter,
179 fontFamily: v.textFontFamily,
180 borderRadius: "0 12px 12px 0",
181 color: v.textColour,
182 position: "absolute",
183 marginTop: "calc(100vh + 20px)",
184 paddingBottom: "20px",
185 display: "flex",
186 flexDirection: "column",
187 transition: "0.4s",
188 transitionTimingFunction: "cubic-bezier(.56,-0.32,.36,1)",
189 overflowX: "hidden",
190 zIndex: 24,
191 boxShadow: "0px 0px 60px rgba(0,0,0,0." + ((function () {
192 if (v.isLight) {
193 return "17";
194 };
195 return "43";
196 })() + ")")
197 }),
198 sidebarCollapsed: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
199 return "width";
200 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
201 width: "70px"
202 }),
203 sidebarExpanded: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
204 return "width";
205 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
206 width: "220px"
207 }),
208 logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
209 return "alignSelf";
210 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
211 return "height";
212 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
213 return "padding";
214 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
215 return "transition";
216 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
217 return "transitionDelay";
218 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
219 return "width";
220 }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
221 width: "60px",
222 height: "60px",
223 padding: "0 5px 0 5px",
224 transition: "0.2s ease-in-out",
225 transitionDelay: "0.1s",
226 alignSelf: "flex-end"
227 }),
228 logoCollapsed: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsNil)()())({})
229 };
230 }))();
231 var menu = Yoga_SVG_Icon.mkMenu();
232 return React_Basic_Hooks.component()()()("Sidebar")(function (v) {
233 return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
234 return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.nav()({
235 className: classes.sidebar + (" " + (function () {
236 if (v.collapsed) {
237 return classes.sidebarCollapsed;
238 };
239 return classes.sidebarExpanded;
240 })()),
241 children: Data_Semigroup.append(Data_Semigroup.semigroupArray)([ React_Basic_DOM_Generated.ul()({
242 className: classes.logo + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(v.collapsed)(classes.logoCollapsed)),
243 onClick: React_Basic_Events.handler_(v.modifyCollapsed(Data_HeytingAlgebra.not(Data_HeytingAlgebra.heytingAlgebraBoolean))),
244 children: [ React_Basic.element(menu)({
245 activeArrowDirection: (function () {
246 if (v.collapsed) {
247 return Yoga_SVG_Icon.ArrowPointsRight.value;
248 };
249 return Yoga_SVG_Icon.ArrowPointsLeft.value;
250 })()
251 }) ]
252 }) ])(v.kids)
253 }));
254 });
255 })();
256};
257module.exports = {
258 mkSidebar: mkSidebar,
259 mkSidebarLink: mkSidebarLink
260};