Foundation off-canvas nav Reagent

core.cljs

(defn employee-menu [state event]
  (let [open? (atom false)]

    (subscribe-to event :show-employee-menu [_]
      (reset! open? true))
    (subscribe-to event :hide-employee-menu [_]
      (reset! open? false))
    (subscribe-to event :hide-left-menu [_]
      (publish event :hide-employee-menu))

    (fn [state event]
      (let [current (s/current-employee state)
            employees (:employees state)]
        [:li.has-submenu
         [:a {:href "#"
              :on-click #(publish event :show-employee-menu)}
          (display-name current)]
         [:ul.left-submenu {:class (when @open? "move-right")}
          [:li.back [:a
                     {:href "#"
                      :on-click #(publish event :hide-employee-menu)}
                     "Back"]]
          [:li [:label "Select Employee"]]
          (for [employee @employees]
            ^{:key employee}
            [employee-menu-item employee event])]]))))

(defn assignment-menu-item [{:keys [number customer] :as assignment} event]
  [:li [:a {:href "#"
            :on-click #(publish event :assignment-selected assignment)}
        (str number " - " customer)]])

(defn main-menu [state event]

    (subscribe-to event :employee-selected [_ employee]
      (publish event :hide-employee-menu))

    (subscribe-to event :assignment-selected [_ assignment]
      (publish event :hide-left-menu))

    (fn [state event]
      (let [current-employee (s/current-employee state)]
        [:aside.left-off-canvas-menu
         [:ul.off-canvas-list
          [menu-label "Employee"]
          [employee-menu state event]
          (when current-employee
            [menu-label "Assigned Workorders"])
          (when current-employee
            (for [assign (:assignments current-employee)]
              ^{:key assign}
              [assignment-menu-item assign event]))]])))


(defn layout [state event]
  (let [open? (atom false)]

    (subscribe-to event :show-left-menu [_]
      (reset! open? true))
    (subscribe-to event :hide-left-menu [_]
      (reset! open? false))

    (fn [state event]
      [:div.off-canvas-wrap {:class (when @open? "move-right")}
       [:div.inner-wrap
        [main-menu state event]
        [navbar state event]
        [content-view state event]

        ;; creates an overlay to close the menu by clicking on the main
        ;; content area
        [:a.exit-off-canvas {:on-click #(publish event :hide-left-menu)}]]])))