lib.ftd

-- import: sarvom.github.io/poppins/assets as poppins-assets
-- import: fastn/processors as pr

-- component navbar-desktop:
boolean $hover-home: false
boolean $hover-contact: false

-- ftd.row:
width: fill-container
height.fixed.px: 61
background.solid: #fff
align-content: center
anchor: window
z-index: 100
sticky: true 

-- ftd.text: HOME
role: $poppins-size-17-600
color: #001
color if {navbar-desktop.hover-home}: #e84a43
$on-mouse-enter$: $ftd.set-bool($a = $navbar-desktop.hover-home, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $navbar-desktop.hover-home, v = false)
align-self: center
padding-left.px: 120
padding-right.px: 60
link: index.html

-- ftd.row:
height: fill-container

-- navbar-button: WHAT WE DO
url: /ThreeFlaneurs/what-we-do/
bg-color: #f1562a

-- navbar-button: WHO WE ARE
url: /ThreeFlaneurs/who-we-are/
bg-color: #9bd22d

-- navbar-button: LATEST NEWS
url: /ThreeFlaneurs/latest-news/
bg-color: #ffaa80

-- navbar-button: 3F JOURNAL
url: /ThreeFlaneurs/3f-journal/
bg-color: #ff8c1a

-- navbar-button: PUBLICATIONS
url: /ThreeFlaneurs/publications/
bg-color: #efef52

-- end: ftd.row


-- ftd.text: CONTACT
role: $poppins-size-17-600
color: #000
color if {navbar-desktop.hover-contact}: #e84a43
$on-mouse-enter$: $ftd.set-bool($a = $navbar-desktop.hover-contact, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $navbar-desktop.hover-contact, v = false)
align-self: center
padding-right.px: 120
padding-left.px: 60
link: index.html#contact-1


-- end: ftd.row

-- end: navbar-desktop









-- boolean $menu-open: false


-- component navbar-mobile:
boolean $hover-home: false
boolean $hover-contact: false

-- ftd.column:
width: fill-container
background.solid: #fff
align-content: center

-- ftd.row:
width: fill-container
align-content: center
id: navbar-mobile

-- ftd.text: HOME
role: $poppins-size-17-600
color: #001
padding.px: 20
color if {navbar-mobile.hover-home}: #e84a43
$on-mouse-enter$: $ftd.set-bool($a = $navbar-mobile.hover-home, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $navbar-mobile.hover-home, v = false)
align-self: center
link: index.html

-- ftd.image: 
src: $assets.files.assets.hamburger-menu.svg
height.fixed.px: 30
margin-left.percent: 80
anchor.id: navbar-mobile
$on-click$: $ftd.set-bool($a = $menu-open, v = true)

-- end: ftd.row

-- ftd.column:
height: fill-container

-- navbar-button: WHAT WE DO
url: /what-we-do
bg-color: #f1562a

-- navbar-button: WHO WE ARE
url: /who-we-are
bg-color: #9bd22d

-- navbar-button: LATEST NEWS
url: /latest-news
bg-color: #ffaa80

-- navbar-button: 3F JOURNAL
url: /3f-journal
bg-color: #ff8c1a

-- navbar-button: PUBLICATIONS
url: /publications
bg-color: #efef52

-- end: ftd.column


-- ftd.text: CONTACT
role: $poppins-size-17-600
color: #000
padding.px: 15
color if {navbar-mobile.hover-contact}: #e84a43
$on-mouse-enter$: $ftd.set-bool($a = $navbar-mobile.hover-contact, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $navbar-mobile.hover-contact, v = false)
align-self: center
link: index.html#contact-1




-- end: ftd.column

-- end: navbar-mobile









-- component navbar-dropdown:


-- ftd.row:
if: {menu-open}
width: fill-container
height: fill-container
anchor: window
z-index: 100
spacing: space-between
background.solid: #fff  



-- ftd.column:
padding-left.px: 30
padding-top.px: 30
spacing.fixed.px: 30

-- ftd.text: WHAT WE DO
role: $poppins-size-17-600
color: #000
link: /what-we-do

-- ftd.text: WHO WE ARE
role: $poppins-size-17-600
color: #000
link: /who-we-are

-- ftd.text: LATEST NEWS
role: $poppins-size-17-600
color: #000
link: /latest-news

-- ftd.text: 3F JOURNAL
role: $poppins-size-17-600
color: #000
link: /3f-journal

-- ftd.text: PUBLICATIONS
role: $poppins-size-17-600
color: #000
link: /publications

-- end: ftd.column


-- ftd.image: 
src: $assets.files.assets.cross.svg
height.fixed.px: 30
margin-top.px: 30
margin-right.px: 15
$on-click$: $ftd.set-bool($a = $menu-open, v = false)


-- end: ftd.row

-- end: navbar-dropdown















-- component navbar-button:
caption name:
string url:
string bg-color: 
boolean $hover: false
optional boolean $drop-down: false

-- ftd.column:
width if { ftd.device == "mobile" }: fill-container
height: fill-container
align-content: center
background.solid: $navbar-button.bg-color

-- ftd.text: $navbar-button.name
role: $poppins-size-17-600
color: #fff
padding-vertical.px if {ftd.device == "mobile"}: 10
color if {navbar-button.hover}: #8c8c8c
$on-mouse-enter$: $ftd.set-bool($a = $navbar-button.hover, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $navbar-button.hover, v = false)
padding-horizontal.px: 40
link: $navbar-button.url

-- end: ftd.column

-- end: navbar-button





















-- ftd.type poppins-size-17-600-desktop:
size.px: 17
weight: 600
font-family: $poppins-assets.fonts.Poppins

-- ftd.type poppins-size-17-600-mobile:
size.px: 17
weight: 600
font-family: $poppins-assets.fonts.Poppins

-- ftd.responsive-type poppins-size-17-600:
desktop: $poppins-size-17-600-desktop
mobile: $poppins-size-17-600-mobile