Repository: penpot/penpot
File: frontend/src/app/main/ui/dashboard/sidebar.cljs (ClojureScript)

Code before:
              :id (:id item)
              :team-id (:id team)
              :is-selected (= (:id item) (:id project))}])]
         [:div {:class (stl/css :sidebar-empty-placeholder)}
          pin-icon
          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
     [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))

(mf/defc help-learning-menu*
  {::mf/props :obj
   ::mf/private true}
  [{:keys [on-close on-click]}]
  (let [handle-click-url
        (mf/use-fn
         (fn [event]
           (let [url       (-> (dom/get-current-target event)
                               (dom/get-data "url"))
                 eventname (-> (dom/get-current-target event)
                               (dom/get-data "eventname"))]
             (st/emit! (ptk/event ::ev/event {::ev/name eventname
                                              ::ev/origin "menu:in-app"}))
             (dom/open-new-window url))))

        handle-feedback-click
        (mf/use-fn #(on-click :settings-feedback %))]

    [:> dropdown-menu* {:show true
                        :class (stl/css :sub-menu :help-learning)
                        :on-close on-close}

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://help.penpot.app"
                              :on-click handle-click-url
                              :data-eventname "explore-help-center-click"}
      (tr "labels.help-center")]

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://penpot.app/learning-center"
                              :on-click handle-click-url
                              :data-eventname "explore-learning-center-click"}
      (tr "labels.learning-center")]

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://penpot.app/penpothub"
                              :on-click handle-click-url
                              :data-eventname "explore-penpot-hub-click"}
      (tr "labels.penpot-hub")]

     (when (contains? cf/flags :user-feedback)
       [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                                :on-click handle-feedback-click}

Review comment (performance):
Question: we're kind of bypassing React here. Is this for a performance reason, or something else? (I'm not familiar with the `dropdown-menu-item*` component) If not, maybe we should stick to how things are usually done in React, for the sake of consistency

Code after:
              :key (dm/str (:id item))
              :id (:id item)
              :team-id (:id team)
              :is-selected (= (:id item) (:id project))}])]
         [:div {:class (stl/css :sidebar-empty-placeholder)}
          pin-icon
          [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]
     [:div {:class (stl/css-case :separator true :overflow-separator overflow?)}]]))

(mf/defc help-learning-menu*
  {::mf/props :obj
   ::mf/private true}
  [{:keys [on-close on-click]}]
  (let [handle-click-url
        (mf/use-fn
         (fn [event]
           (let [url       (-> (dom/get-current-target event)
                               (dom/get-data "url"))
                 eventname (-> (dom/get-current-target event)
                               (dom/get-data "eventname"))]
             (st/emit! (ptk/event ::ev/event {::ev/name eventname
                                              ::ev/origin "menu:in-app"}))
             (dom/open-new-window url))))

        handle-feedback-click
        (mf/use-fn #(on-click :settings-feedback %))]

    [:> dropdown-menu* {:show true
                        :class (stl/css :sub-menu :help-learning)
                        :on-close on-close}

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://help.penpot.app"
                              :on-click handle-click-url
                              :data-eventname "explore-help-center-click"}
      (tr "labels.help-center")]

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://penpot.app/learning-center"
                              :on-click handle-click-url
                              :data-eventname "explore-learning-center-click"}
      (tr "labels.learning-center")]

     [:> dropdown-menu-item* {:class (stl/css :submenu-item)
                              :data-url "https://penpot.app/penpothub"
                              :on-click handle-click-url
                              :data-eventname "explore-penpot-hub-click"}
      (tr "labels.penpot-hub")]

     (when (contains? cf/flags :user-feedback)
       [:> dropdown-menu-item* {:class (stl/css :submenu-item)