@@ -1,11 +1,18 @@
1−module Components.Navigation (navigation) where
1+module Components.Navigation
2+ ( isDarkDefault_
3+ , navigation
4+ )
5+ where
26
37import Prelude
8+import Web.HTML.HTMLElement
49
5−import Data.Maybe (Maybe(..))
6−import Data.Traversable (traverse_)
10+import Control.Monad.Maybe.Trans (MaybeT(..), runMaybeT)
11+import Data.Maybe (Maybe(..), maybe)
12+import Data.Traversable (for_, traverse, traverse_)
713import Data.Tuple.Nested ((/\))
814import Debug (spy)
15+import Effect (Effect)
916import Next.Router (useRouter)
1017import Next.Router as Router
1118import NextUI.NextUI (switch, useTheme)
@@ -13,7 +20,7 @@ import NextUI.NextUI as NextUI
1320import React.Basic.DOM (css)
1421import React.Basic.DOM.Events (targetChecked)
1522import React.Basic.Events (handler)
16−import React.Basic.Hooks (Component, component, useEffect, useState')
23+import React.Basic.Hooks (Component, component, useEffect, useEffectOnce, useState')
1724import React.Basic.Hooks as React
1825import React.Icons (icon)
1926import React.Icons.Si (siDiscord, siDiscourse, siGithub, siPurescript)
@@ -23,56 +30,81 @@ import Web.DOM.Document (documentElement)
2330import Web.DOM.Element as DOMEL
2431import Web.HTML (window)
2532import Web.HTML.HTMLDocument (toDocument)
33+import Web.HTML.HTMLDocument as Doc
2634import Web.HTML.Window (document)
35+-- radial-gradient(20rem 20rem at left 15rem top 20rem, rgba(30, 144, 255,0.5) 0% 10%,#0000 90% 90%),
36+mkBackgroundImage isDark =
37+ if isDark then
38+ """
39+ radial-gradient(25rem 25rem at left 15rem top 20rem, rgba(30, 144, 255,0.55) 0% 10%,#0000 90% 90%),
40+ radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(0, 0, 139, 0.75) 0% 10%, #0000 70% 80%);
41+ """
42+ else
43+ """
44+ radial-gradient(25rem 25rem at left 15rem top 20rem, rgba(32, 178, 170, 0.25) 0% 10%,#0000 90% 90%),
45+ radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(30, 144, 255, 0.25) 0% 10%,#0000 70% 80%);
46+ """
47+foreign import isDarkDefault_ :: Effect Boolean
2748
2849navigation :: Component Unit
29−navigation = component "Navbar" \_props -> React.do
50+navigation = do
51+ component "Navbar" \_props -> React.do
3052
31− { theme } <- useTheme
32− router <- useRouter
33− let
34− dispatchRoute = Router.push router
35− isDark /\ setDark <- useState' false
36− _ <- useEffect [ isDark ] do
37− w <- window
38− maybeElem <- document w <#> toDocument >>= documentElement
39− case maybeElem of
40− Just el -> do
41− (DOMEL.setAttribute "class" if isDark then "light-theme" else "dark-theme") el
42− pure mempty
43− Nothing -> pure mempty
44− pure $ el NextUI.navbar { isBordered: isDark, variant: "static" }
45− [ el NextUI.navbarBrand {}
46− $ el NextUI.link
47− { onClick: dispatchRoute $ "/"
48− }
49− $ icon siPurescript { style: css { color: getColorValue theme "neutral" }, size: "3rem" }
50− , el NextUI.navbarContent { hideIn: "xs" } $ map (mkLink theme)
51− [ { onClick: dispatchRoute "/pursuit", title: "Getting started" }
52− , { onClick: dispatchRoute "/pursuit", title: "Try Purescript" }
53− , { onClick: dispatchRoute "/pursuit", title: "Pursuit" }
54− ]
55− , el NextUI.navbarContent {}
56− [ el NextUI.navbarLink
57− { href: "https://purescript.org/chat"
58− }
59− $ icon siDiscord { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
60− , el NextUI.navbarLink
61− { href: "https://discourse.purescript.org/"
62− , target: "_blank"
63− }
64− $ icon siDiscourse { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
65− , el NextUI.navbarLink
66− { href: "https://www.github.com/purescript/purescript"
67− , target: "_blank"
68− }
69− $ icon siGithub { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
70− , el switch { checked: isDark, onChange: handler targetChecked $ traverse_ setDark } ""
71− ]
72− ]
73− where
74− mkLink theme { onClick, title } =
75− el NextUI.navbarLink
76− { onClick
77− }
78− $ el NextUI.text { size: "$xl", color: getColorValue theme "neutral" } title
53+ { theme } <- useTheme
54+ router <- useRouter
55+ let
56+ dispatchRoute = Router.push router
57+ isDarkPreference /\ setIsDarkPreference <- useState' true
58+ isDark /\ setDark <- useState' isDarkPreference
59+ _ <- useEffectOnce do
60+ isDarkDefault <- isDarkDefault_
61+ setIsDarkPreference $ spy "Setting isDarkDefault " isDarkDefault
62+ pure mempty
63+ _ <- useEffect [ isDark ] do
64+ w <- window
65+ htmlDocument <- document w
66+ maybeElem <- htmlDocument # toDocument # documentElement
67+ case maybeElem of
68+ Just el -> do
69+ (DOMEL.setAttribute "class" if (spy "isDark" $ isDark) then "dark-theme" else "light-theme") el
70+ bodyElem <- runMaybeT do
71+ body <- MaybeT $ Doc.body htmlDocument
72+ pure $ toElement body
73+ maybe (pure unit) (DOMEL.setAttribute "style" ("background-image: " <> mkBackgroundImage isDark)) bodyElem
74+ pure mempty
75+ Nothing -> pure mempty
76+ pure $ el NextUI.navbar { isBordered: isDark, variant: "static" }
77+ [ el NextUI.navbarBrand {}
78+ $ el NextUI.link
79+ { onClick: dispatchRoute $ "/"
80+ }
81+ $ icon siPurescript { style: css { color: getColorValue theme "neutral" }, size: "3rem" }
82+ , el NextUI.navbarContent { hideIn: "xs" } $ map (mkLink theme)
83+ [ { onClick: dispatchRoute "/pursuit", title: "Getting started" }
84+ , { onClick: dispatchRoute "/pursuit", title: "Try Purescript" }
85+ , { onClick: dispatchRoute "/pursuit", title: "Pursuit" }
86+ ]
87+ , el NextUI.navbarContent {}
88+ [ el NextUI.navbarLink
89+ { href: "https://purescript.org/chat"
90+ }
91+ $ icon siDiscord { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
92+ , el NextUI.navbarLink
93+ { href: "https://discourse.purescript.org/"
94+ , target: "_blank"
95+ }
96+ $ icon siDiscourse { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
97+ , el NextUI.navbarLink
98+ { href: "https://github.com/purescript/purescript"
99+ , target: "_blank"
100+ }
101+ $ icon siGithub { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }
102+ , el switch { checked: isDark, onChange: handler targetChecked $ traverse_ setDark } ""
103+ ]
104+ ]
105+ where
106+ mkLink theme { onClick, title } =
107+ el NextUI.navbarLink
108+ { onClick
109+ }
110+ $ el NextUI.text { size: "$xl", color: getColorValue theme "neutral" } title