Sticky top menu.

On pages without the big profile header, a small top menu for easy nav:
just the logo (drop shape) linking to home and the nav.
This commit is contained in:
Etienne Werly 2023-07-08 00:48:17 +02:00
parent 67807ac7e6
commit 2f336d956a
10 changed files with 97 additions and 27 deletions

View file

@ -38,6 +38,7 @@ library
Kit.Atoms.Link
Kit.Atoms.Section
Kit.Atoms.Separators
Kit.Atoms.StickyHeader
Kit.Atoms.Stylesheet
Kit.Atoms.Typography
Kit.Constants.Breakpoints
@ -52,10 +53,12 @@ library
Kit.Molecules.ProfileBio
Kit.Molecules.ProfileContent
Kit.Molecules.ProfilePic
Kit.Molecules.SmallProfilePic
Kit.Molecules.Tag
Kit.Organisms.Card
Kit.Organisms.Head
Kit.Organisms.ProfileHeader
Kit.Organisms.TopMenu
Kit.Templates.Archive
Kit.Templates.Index
Kit.Templates.Post

View file

@ -6,7 +6,7 @@ module Info
, root
) where
author, description, bio, mail :: String
author, description, bio, mail, root :: String
author = "Etienne Werly"

View file

@ -7,6 +7,7 @@ module Kit.Atoms.FullScreenModal
import Clay as C
import Components
import Data.Text ( pack )
import Kit.Constants.Colors
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
@ -17,7 +18,7 @@ fullScreenModal id = do
return $ H.div H.! class_ "full-screen-modal" H.! A.id (stringValue id)
where
css = C.div # byClass "full-screen-modal" ? do
backgroundColor white
backgroundColor $ primary @ 90
position fixed
top <> left $ nil
C.width <> C.height $ pct 100

View file

@ -0,0 +1,25 @@
module Kit.Atoms.StickyHeader
( stickyHeader
) where
import Clay as C
import Components
import Kit.Constants.Colors
import Kit.Constants.Spacing as S
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
stickyHeader :: Component (Html -> Html)
stickyHeader = do
addCss css
return $ H.header H.! class_ "stickyHeader"
where
css = C.header # byClass "stickyHeader" ? do
C.height giant
position sticky
top nil
paddingTop nil
borderTop nil solid white
display flex
flexDirection row
justifyContent spaceBetween

View file

@ -35,7 +35,6 @@ nav' x = do
names = snd <$> x
css = do
C.nav ? do
marginTop huge
C.ul ? do
listStyleType none
C.li ? do

View file

@ -6,6 +6,7 @@ import Clay as C
import Components
import Kit.Atoms.BreakpointQueries
import Kit.Constants.Colors
import Kit.Constants.Spacing
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
@ -15,6 +16,7 @@ css = byClass "profile-bio" & do
C.width (pct 100)
textAlign center
color $ grays @ 50
paddingBottom regular
breakpointM $ do
display inlineBlock
C.width (C.em 20)

View file

@ -0,0 +1,19 @@
module Kit.Molecules.SmallProfilePic
( smallProfilePic
) where
import Clay as C
import Components
import Kit.Atoms.Image
import Kit.Constants.Spacing as S
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
smallProfilePic :: FilePath -> String -> Component Html
smallProfilePic file altText = do
addCss css
H.div H.! class_ "small-profile-pic" <$> imgWithShape Drop file altText
where
css = byClass "small-profile-pic" & do
C.width giant

View file

@ -0,0 +1,20 @@
module Kit.Organisms.TopMenu
( topMenu
) where
import Clay as C
import Components
import Kit.Atoms.Link
import Kit.Atoms.StickyHeader
import Kit.Molecules.Nav
import Kit.Molecules.SmallProfilePic
import Routes
import Routes
import Text.Blaze.Html5 as H
import Text.Blaze.Html5.Attributes as A
topMenu :: Component Html
topMenu = do
stickyHeader <*> mconcat
[a' Home <*> smallProfilePic "avatar.smol.png" "my face", nav' links]
where links = [(Home, "Home"), (Archive, "Archive")]

View file

@ -11,6 +11,7 @@ import Kit.Atoms.Section
import Kit.Atoms.Separators
import Kit.Molecules.Tag
import Kit.Organisms.Head
import Kit.Organisms.TopMenu
import Routes
import Text.Blaze.Html5 as H
@ -27,20 +28,22 @@ archiveTemplate :: Component Html
archiveTemplate = mconcat
[ docTypeHtml <$> defaultHead "Archive"
, H.body
<$> (section' <*> mconcat
[ pure $ h1 "Post archive"
, pure "$for(tagList)$"
, tagLink "#$tag$" <*> pure "$tag$"
, pure "$endfor$"
, hr'
, pure "$for(tagList)$"
, tagSpan "$tag$" <*> pure "$tag$"
, ul <$> mconcat
[ pure "$for(posts)$"
, li <$> (a' "$url$" <*> pure "$title$")
, pure "$endfor$"
]
, pure "$endfor$"
]
<$> ( topMenu
<> (section' <*> mconcat
[ pure $ h1 "Post archive"
, pure "$for(tagList)$"
, tagLink "#$tag$" <*> pure "$tag$"
, pure "$endfor$"
, hr'
, pure "$for(tagList)$"
, tagSpan "$tag$" <*> pure "$tag$"
, ul <$> mconcat
[ pure "$for(posts)$"
, li <$> (a' "$url$" <*> pure "$title$")
, pure "$endfor$"
]
, pure "$endfor$"
]
)
)
]

View file

@ -6,16 +6,14 @@ import Components
import Core.Render
import Kit.Atoms.Section
import Kit.Organisms.Head
import Kit.Organisms.TopMenu
import Text.Blaze.Html5 as H
hiding ( main )
postTemplate :: Component Html
postTemplate =
docTypeHtml
<$> defaultHead "$title$"
<> (section' <*> pure
(body $ do
h1 "$title$"
"$body$"
)
)
postTemplate = docTypeHtml
<$> mconcat [defaultHead "$title$", topMenu, section' <*> pure postBody]
where
postBody = body $ do
h1 "$title$"
"$body$"