Меню навигации в Йесод

Question

Я смотрю на реализацию меню (что-то вроде этого). Как правильно это сделать? Я не нашел ни примеров в самом Yesod, ни в других библиотеках, которые это делают.

Answer 1

Описание проблемы звучит как то, что я бы в основном обрабатывал на стороне клиента с помощью js и, возможно, ajax или даже с элементами формы + умный css.

Я предполагаю, что большинство сайтов, созданных с помощью Yesod, не имеют больше, чем, возможно, полдюжины навигационных записей, поэтому отдельная подсистема только для меню не была чем-то, что нужно многим людям. Но, может быть, я что-то упустил, так что посмотрите сами.

Тем не менее, разработка собственной подсистемы должна быть относительно простой, если она вам действительно нужна. В конце концов, все, что вам нужно, это чтобы какой-то маленький кусочек деревушки изменился в зависимости от перечисления или чего-то еще.

Answer 2

Вот упрощенный пример того, чем я закончил:

-- Foundation.hs

data MenuItem = MenuItem
  { _menuItemLabel :: Text
  , _menuItemRoute :: Route App
  , _menuItemAccessCallback :: Bool
  } deriving (Show)

instance Yesod App where
  -- ...

  defaultLayout widget = do
      -- ...
      muser <- maybeAuthPair
      mcurr <- getCurrentRoute

      -- All the menu items.
     let menuItems =
          [ MenuItem
            { _menuItemLabel = "Home"
            , _menuItemRoute = HomeR
            -- Always show menu item.
            , _menuItemAccessCallback = True
            }
          , MenuItem
            { _menuItemLabel = "People"
            , _menuItemRoute = PeopleR
            -- Example for item that shows only if user is authenticated.
            , _menuItemAccessCallback = isJust muser
            }
          ]

      -- Filter items to show only accessible items
      let filteredMenuItems = [x | x <- menuItems, _menuItemAccessCallback x == True]

И внутри файла шаблона по умолчанию:

-- default-layout.hamlet
<nav>
  $forall MenuItem label route _ <- filteredMenuItems
    <a class="item" :Just route == mcurr:.active href="@{route}">#{label}