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:
parent
67807ac7e6
commit
2f336d956a
10 changed files with 97 additions and 27 deletions
|
@ -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
|
||||
|
|
|
@ -6,7 +6,7 @@ module Info
|
|||
, root
|
||||
) where
|
||||
|
||||
author, description, bio, mail :: String
|
||||
author, description, bio, mail, root :: String
|
||||
|
||||
author = "Etienne Werly"
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
25
src/Kit/Atoms/StickyHeader.hs
Normal file
25
src/Kit/Atoms/StickyHeader.hs
Normal 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
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
19
src/Kit/Molecules/SmallProfilePic.hs
Normal file
19
src/Kit/Molecules/SmallProfilePic.hs
Normal 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
|
||||
|
20
src/Kit/Organisms/TopMenu.hs
Normal file
20
src/Kit/Organisms/TopMenu.hs
Normal 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")]
|
|
@ -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$"
|
||||
]
|
||||
)
|
||||
)
|
||||
]
|
||||
|
|
|
@ -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$"
|
||||
|
|
Loading…
Reference in a new issue