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