permalinkRadix UI navigation menu

spago install radix-ui
npm install @radix-ui/react-navigationMenu

module AccordionStructure where

import RadixUI.NavigationMenu as NavigationMenu
import React.Basic.DOM (text) as R
import React.Basic.DOM.Simplified.Generated (button)

navigationMenu = NavigationMenu.root

module Example.RadixUI.NavigationMenu where

import Alethic.Prelude.View

import Beta.DOM (a, div, li, p, ul, (++))
import Effect (Effect)
import Foreign.Object (singleton) as Object
import RadixUI.Accordion as Accordion
import RadixUI.NavigationMenu (content, indicator, item, link, list, root, trigger, viewport) as NavigationMenu
import React.Basic.DOM (text) as R
import React.Basic.DOM.SVG (path) as SVG
import React.Basic.DOM.SVG (svg)
import React.Basic.Hooks (reactComponentWithChildren)
import React.Basic.Hooks as React
import React.Icons (icon)
import React.Icons.Rx (rxCaretDown, rxChevronDown)
import React.Basic.DOM (text)

content1 = NavigationMenu.content
  { className: "data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
  }
  [ ul { className: "one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]" }
      [ li { className: "row-span-3 grid" } link1
      , listItem "Stitches" "CSS-in-JS with best-in-class developer experience."
      , listItem "Colours" "Beautiful, thought-out palettes with auto dark mode."
      , listItem "Icons" "A crisp set of 15x15 icons, balanced and consistent."
      ]

  ]

link1 = NavigationMenu.link { asChild: true }
  [ a
      { href: "/"
      , className: "focus:shadow-violet7 from-purple9 to-indigo9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
      }
      [ svg
          { _aria: Object.singleton "hidden" "true"
          , width: "38"
          , height: "38"
          , viewBox: "0 0 25 25"
          , fill: "white"
          , children:
              [ SVG.path { d: "M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" }
              , SVG.path { d: "M12 0H4V8H12V0Z" }
              , SVG.path { d: "M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z" }
              ]
          }
      , div { className: "mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white" }
          "Radix Primitives"
      , p { className: "text-mauve4 text-[14px] leading-[1.3]" }
          "Unstyled, accessible components for React."
      ]
  ]

item1 = NavigationMenu.item {}
  [ NavigationMenu.trigger
      { className: "text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
      }
      [ text "Learn "
      , div { "aria-hidden": true, className: "einz" }
          $ icon
              rxCaretDown
              { className: "text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
              }
      ]
  , content1
  ]

item2 = NavigationMenu.item {}
  [ NavigationMenu.trigger
      { className: "text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
      }
      [ R.text "Overview "
      , div { "aria-hidden": true } $ icon
          rxCaretDown
          { className: "text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
          }
      ]
  , NavigationMenu.content
      { className: "absolute top-0 left-0 w-full sm:w-auto" }
      [ ul
          { className: "m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3"
          }
          [ listItem
              "Introduction"
              "Build high-quality, accessible design systems and web apps."
          , listItem
              "Getting started"
              "A quick tutorial to get you up and running with Radix Primitives."
          , listItem
              "Styling"
              "Unstyled and compatible with any styling solution."
          , listItem
              "Animation"
              "Use CSS keyframes or any animation library of your choice."
          , listItem
              "Accessibility"
              "Tested in a range of browsers and assistive technologies."
          , listItem
              "Releases"
              "Radix Primitives releases and their changelogs."
          ]

      ]
  ]

mkNavigationMenuDemo :: Effect (ReactComponent {})
mkNavigationMenuDemo = reactComponent "ReactComponent" \{} -> React.do
  pure $ NavigationMenu.root
    { className: "relative z-[1] flex w-screen justify-center"
    }
    [ NavigationMenu.list
        { className: "center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]"
        }
        [ item1
        , item2
        , NavigationMenu.indicator
            { className: "data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]"
            }
            [ div
                { className: "relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
                }
                noJSX
            ]
        ]
    , div
        { className: "perspective-[2000px] absolute top-full left-0 flex w-full justify-center"
        }
        $ NavigationMenu.viewport
            { className: "data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
            }
    ]

listItem :: String -> String -> JSX
listItem title children =
  li {}
    $ NavigationMenu.link { asChild: true }
    $ a { className: "focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors" }
        [ div { className: "text-violet12 mb-[5px] font-medium leading-[1.2]" }
            title
        , p { className: "text-mauve11 leading-[1.4]" }
            children
        ]