// Generated by purs version 0.13.6
"use strict";
var Control_Applicative = require("../Control.Applicative/index.js");
var Data_HeytingAlgebra = require("../Data.HeytingAlgebra/index.js");
var Data_Monoid = require("../Data.Monoid/index.js");
var Data_Semigroup = require("../Data.Semigroup/index.js");
var Data_Symbol = require("../Data.Symbol/index.js");
var JSS = require("../JSS/index.js");
var React_Basic = require("../React.Basic/index.js");
var React_Basic_DOM = require("../React.Basic.DOM/index.js");
var React_Basic_DOM_Generated = require("../React.Basic.DOM.Generated/index.js");
var React_Basic_Events = require("../React.Basic.Events/index.js");
var React_Basic_Hooks = require("../React.Basic.Hooks/index.js");
var React_Basic_Hooks_Internal = require("../React.Basic.Hooks.Internal/index.js");
var Record_Extra = require("../Record.Extra/index.js");
var Type_Equality = require("../Type.Equality/index.js");
var Yoga_SVG_Icon = require("../Yoga.SVG.Icon/index.js");
var Yoga_Theme_Styles = require("../Yoga.Theme.Styles/index.js");
var mkSidebarLink = function __do() {
    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "icon";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "label";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "sidebarEntry";
    }))()(Record_Extra.mapRecordNil)()())()())()())(JSS.jssClasses()(function (v) {
        return {
            sidebarEntry: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "&:hover";
            }))(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "background";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignContent";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignSelf";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "borderRadius";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "color";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "cursor";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "display";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "flexDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontFamily";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "gridArea";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "justifyContent";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "overflowX";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
                fontFamily: v.headingFontFamily,
                alignSelf: "flex-end",
                justifyContent: "space-between",
                alignContent: "stretch",
                color: v.textColour,
                gridArea: "nav",
                display: "flex",
                flexDirection: "row",
                overflowX: "hidden",
                width: "190px",
                paddingLeft: "5px",
                borderRadius: "5px 0 0 5px",
                cursor: "pointer",
                "&:hover": {
                    background: v.highlightColour
                }
            }),
            label: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "color";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontFamily";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontSize";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "lineHeight";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingLeft";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "textTransform";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
                fontFamily: v.textFontFamily,
                color: v.textColour,
                paddingLeft: "20px",
                textTransform: "uppercase",
                lineHeight: "60px",
                fontSize: "1.4em"
            }),
            icon: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignSelf";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fill";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "padding";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transition";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transitionDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))))))))()())({
                width: "50px",
                height: "50px",
                padding: "5px 10px 5px 5px",
                transition: "0.2s ease-in-out",
                transitionDelay: "0.1s",
                alignSelf: "flex-end",
                fill: v.textColour + " !important"
            })
        };
    }))();
    return React_Basic_Hooks.component()()()("SidebarLink")(function (v) {
        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
            return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.li()({
                className: classes.sidebarEntry,
                children: [ React_Basic_DOM_Generated.div()({
                    className: classes.label,
                    children: [ React_Basic_DOM.text(v.name) ]
                }), React_Basic_DOM_Generated.div()({
                    className: classes.icon,
                    children: [ v.icon ]
                }) ]
            }));
        });
    })();
};
var mkSidebar = function __do() {
    var useStyles = Yoga_Theme_Styles.makeStylesJSS()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "logo";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "logoCollapsed";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "sidebar";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "sidebarCollapsed";
    }))()(Record_Extra.mapRecordCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
        return "sidebarExpanded";
    }))()(Record_Extra.mapRecordNil)()())()())()())()())()())(JSS.jssClasses()(function (v) {
        return {
            sidebar: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "background";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "borderRadius";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "boxShadow";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "color";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "display";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "flexDirection";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "fontFamily";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "marginTop";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "overflowX";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "paddingBottom";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "position";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transition";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transitionTimingFunction";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "zIndex";
            }))(JSS.jssAbleInt)()()()(JSS.jssAbleFieldsNil)))))))))))))))()())({
                background: v.interfaceColourLighter,
                fontFamily: v.textFontFamily,
                borderRadius: "0 12px 12px 0",
                color: v.textColour,
                position: "absolute",
                marginTop: "calc(100vh + 20px)",
                paddingBottom: "20px",
                display: "flex",
                flexDirection: "column",
                transition: "0.4s",
                transitionTimingFunction: "cubic-bezier(.56,-0.32,.36,1)",
                overflowX: "hidden",
                zIndex: 24,
                boxShadow: "0px 0px 60px rgba(0,0,0,0." + ((function () {
                    if (v.isLight) {
                        return "17";
                    };
                    return "43";
                })() + ")")
            }),
            sidebarCollapsed: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                width: "70px"
            }),
            sidebarExpanded: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil))()())({
                width: "220px"
            }),
            logo: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "alignSelf";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "height";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "padding";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transition";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "transitionDelay";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsCons(new Data_Symbol.IsSymbol(function ($dollar__unused) {
                return "width";
            }))(JSS.jssAbleString)()()()(JSS.jssAbleFieldsNil)))))))()())({
                width: "60px",
                height: "60px",
                padding: "0 5px 0 5px",
                transition: "0.2s ease-in-out",
                transitionDelay: "0.1s",
                alignSelf: "flex-end"
            }),
            logoCollapsed: JSS.jss(JSS.jssAbleRecord(JSS.jssAbleFieldsNil)()())({})
        };
    }))();
    var menu = Yoga_SVG_Icon.mkMenu();
    return React_Basic_Hooks.component()()()("Sidebar")(function (v) {
        return React_Basic_Hooks_Internal.bind(React_Basic_Hooks_Internal.ixBindRender)(useStyles({}))(function (classes) {
            return Control_Applicative.pure(React_Basic_Hooks_Internal.applicativeRender(Type_Equality.refl))(React_Basic_DOM_Generated.nav()({
                className: classes.sidebar + (" " + (function () {
                    if (v.collapsed) {
                        return classes.sidebarCollapsed;
                    };
                    return classes.sidebarExpanded;
                })()),
                children: Data_Semigroup.append(Data_Semigroup.semigroupArray)([ React_Basic_DOM_Generated.ul()({
                    className: classes.logo + (" " + Data_Monoid.guard(Data_Monoid.monoidString)(v.collapsed)(classes.logoCollapsed)),
                    onClick: React_Basic_Events.handler_(v.modifyCollapsed(Data_HeytingAlgebra.not(Data_HeytingAlgebra.heytingAlgebraBoolean))),
                    children: [ React_Basic.element(menu)({
                        activeArrowDirection: (function () {
                            if (v.collapsed) {
                                return Yoga_SVG_Icon.ArrowPointsRight.value;
                            };
                            return Yoga_SVG_Icon.ArrowPointsLeft.value;
                        })()
                    }) ]
                }) ])(v.kids)
            }));
        });
    })();
};
module.exports = {
    mkSidebar: mkSidebar,
    mkSidebarLink: mkSidebarLink
};