dmp-documentation/src/components/Sidebar.js at 00d592ffa3f13173cfd521e7c6bc607f40592763 · Code4GovTech/dmp-documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// src/components/Sidebar.js

import React from "react";
import { useHistory } from "react-router-dom";

function Sidebar({
  currentTab,
  issueData,
  currentOrg,
  setCurrentOrg,
  currentIssue,
  setCurrentIssue,
  setCurrentTab,
  year, // Add year prop
}) {
  const history = useHistory();
  return (
    <div className="sidebar-styles">
      <nav className="menu thin-scrollbar menu_styles">
        <ul className="theme-doc-sidebar-menu menu__list">
          <li className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
            <div
              className={`menu__link cursor-pointer ${currentTab === "c4gt" && year === "2024" ? "menu__link--active" : ""}`}
              onClick={() => {
                const newUrl = `/docs/2024/`;
                history.push(newUrl);
                setCurrentTab("c4gt");
              }}
            >
              C4GT'24
            </div>
          </li>
          <li className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
            <div
              className={`menu__link cursor-pointer ${currentTab === "c4gt" && year === "2025" ? "menu__link--active" : ""}`}
              onClick={() => {
                const newUrl = `/docs/2025/`;
                history.push(newUrl);
                setCurrentTab("c4gt");
              }}
            >
              C4GT'25
            </div>
          </li>
          {issueData == null ? (
            <></>
          ) : (
            issueData?.map((data, i) => {
              return (
                <li
                  key={i}
                  className={`theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item ${currentOrg === data?.org_name ? "" : "menu__list-item--collapsed"}`}
                >
                  <div
                    className={`menu__list-item-collapsible cursor-pointer ${currentOrg === data?.org_name && currentIssue == null ? "menu__list-item-collapsible--active" : ""}`}
                    onClick={() => {
                      const newUrl = `/docs/${year}?id=${data?.org_name}`;
                      history.push(newUrl);
                      setCurrentOrg(() => data?.org_name);
                      setCurrentIssue(() => null);
                    }}
                  >
                    <div
                      className={`menu__link ${currentOrg === data?.org_name ? "menu__link--active" : ""}`}
                    >
                      {data?.org_name}
                    </div>
                    <button
                      aria-label={`Toggle the collapsible sidebar category ${data?.org_name}`}
                      type="button"
                      className="clean-btn menu__caret"
                    ></button>
                  </div>
                  {currentOrg === data?.org_name ? (
                    <ul
                      className="menu__list"
                      style={{
                        display: "block",
                        overflow: "visible",
                        height: "auto",
                        willChange: "height",
                        transition: "height 187ms ease-in-out 0s",
                      }}
                    >
                      {data?.issues?.map((d, i) => {
                        if (d?.name != null)
                          return (
                            <li
                              key={i}
                              className="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"
                            >
                              <div
                                className={`menu__link cursor-pointer ${currentIssue === d.id ? "menu__link--active" : ""}`}
                                onClick={() => {
                                  const newUrl = `/docs/${year}?id=${currentOrg}&issue=${d.id}`;
                                  history.push(newUrl);
                                  setCurrentIssue(() => d.id);
                                }}
                              >
                                {d.name}
                              </div>
                            </li>
                          );
                        else <></>;
                      })}
                    </ul>
                  ) : (
                    <></>
                  )}
                </li>
              );
            })
          )}
        </ul>
      </nav>
    </div>
  );
}

export default Sidebar;