git.iko.soy/rowtype-yoga/psfp
on 6e3d5f6 help sign in
rowtype-yoga/psfp/client/src/Container/Component.purs
87 lines 3.0 kB history raw
1module Container.Component where
3import Prelude
5import CSS.Safer (cssSafer)
6import Container.Header (mkHeader)
7import Container.Landing (mkLandingPage)
8import Container.Sidebar (mkSidebar, mkSidebarLink)
9import Effect (Effect)
10import Polyfill.SmoothScrolling (smoothScrollPolyfill)
11import React.Basic (JSX)
12import React.Basic.DOM as R
13import React.Basic.Hooks ((/\), ReactComponent, component, element, useState)
14import React.Basic.Hooks as React
15import SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
16import Theme.Provider (mkThemeProvider)
17import Theme.Styles (makeStyles)
18import Theme.Types (CSSTheme)
20mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, children ∷ Array JSX })
21mkContainer = do
22 themeProvider <- mkThemeProvider
23 containerContent <- mkContainerContent
24 component "Container" \{ theme, children } -> React.do
25 pure
26 $ element themeProvider
27 { theme
28 , children:
29 [ element containerContent { children }
30 ]
31 }
33mkContainerContent ∷ Effect (ReactComponent { children ∷ Array JSX })
34mkContainerContent = do
35 smoothScrollPolyfill
36 useStyles <-
37 makeStyles \(theme ∷ CSSTheme) ->
38 -- { "@global": cssSafer { "*": { outline: "1px solid red" } }
39 { container:
40 cssSafer
41 { backgroundColor: theme.backgroundColour
42 , fontFamily: theme.textFontFamily
43 , color: theme.textColour
44 , display: "grid"
45 , transition: "0.2s ease-in-out"
46 , gridTemplateAreas:
47 "'landing landing landing'"
48 <> "'header header header' "
49 <> "'nav content content'"
50 -- , "footer footer footer"
51 -- , gridTemplateColumns: "max-content auto"
52 , minWidth: "100%"
53 , maxWidth: "100%"
54 }
55 , content:
56 cssSafer
57 { gridArea: "content"
58 , minHeight: "200vh"
59 }
60 , icon: cssSafer { fill: "theme.textColour" }
61 }
62 landingPage <- mkLandingPage
63 sidebar <- mkSidebar
64 header <- mkHeader
65 sidebarLink <- mkSidebarLink
66 component "ContainerContent" \{ children } -> React.do
67 classes <- useStyles
68 collapsed /\ modifyCollapsed <- useState true
69 pure
70 $ R.div
71 { className: classes.container
72 , children:
73 [ element landingPage {}
74 , element sidebar
75 { collapsed
76 , modifyCollapsed
77 , children:
78 [ element sidebarLink { name: "Learn", icon: element appendIcon {}, collapsed }
79 , element sidebarLink { name: "Try", icon: element bindIcon {}, collapsed }
80 , element sidebarLink { name: "Share", icon: element applyflippedIcon {}, collapsed }
81 , element sidebarLink { name: "Jobs", icon: element mapIcon {}, collapsed }
82 ]
83 }
84 , element header {}
85 , R.div { className: classes.content, children }
86 ]
87 }