@kompasid/lit-web-components 0.9.14 → 0.9.16

package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts

@@ -50,6 +50,7 @@ interface dataType {
 interface DataSideBarLink {
   feature: dataType[]
   category: dataType[]
+  lainnya: dataType[]
 }
 
 @customElement('kompasid-menu-side-bar')
@@ -113,6 +114,7 @@ export class KompasMenuSideBar extends LitElement {
       this.handleFetchError(error)
     }
   }
+
   handleFetchError(error: unknown) {
     const errorMessage =
       error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
@@ -122,10 +124,12 @@ export class KompasMenuSideBar extends LitElement {
   dataSidebar: DataSideBarLink = {
     feature: [],
     category: [],
+    lainnya: [],
   }
+
   async fetchExternal() {
     // External
-    const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`
+    const endpointExternal = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuExternalLinkV2.json`
     const response = await fetch(endpointExternal, {
       headers: {
         'Content-Type': 'application/json',
@@ -152,8 +156,9 @@ export class KompasMenuSideBar extends LitElement {
         })
       )
     }
+
     // Sidebar
-    const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`
+    const endpointSidebar = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuSideV3.json`
     const responseSidebar = await fetch(endpointSidebar, {
       headers: {
         'Content-Type': 'application/json',
@@ -168,7 +173,11 @@ export class KompasMenuSideBar extends LitElement {
 
     // Convert object to an array
     const sidebarArray = Object.values(resultSidebar)
-    const [featureArray, categoryArray] = sidebarArray as [any[], any[]]
+    const [featureArray, categoryArray, othersArray] = sidebarArray as [
+      any[],
+      any[],
+      any[]
+    ]
     const features: dataType[] =
       featureArray?.map((item: any) => ({
         href: item?.href ?? '',
@@ -233,7 +242,45 @@ export class KompasMenuSideBar extends LitElement {
             }))
           : [],
       })) ?? []
-    this.dataSidebar = { feature: features, category: categories }
+
+    // Map others data
+    const others: dataType[] =
+      othersArray?.map((item: any) => ({
+        href: item?.href ?? '',
+        external: item?.external ?? false,
+        icon: item?.icon ?? null,
+        iconify: item?.iconify ?? null,
+        name: item?.name ?? '',
+        slug: item?.slug ?? '',
+        redDot: [
+          {
+            start: item?.redDot?.start ?? '',
+            end: item?.redDot?.end ?? '',
+          },
+        ],
+        children: Array.isArray(item?.children)
+          ? item.children.map((child: any) => ({
+              href: child?.href ?? '',
+              external: child?.external ?? false,
+              icon: child?.icon ?? '',
+              iconify: child?.iconify ?? '',
+              name: child?.name ?? '',
+              slug: child?.slug ?? '',
+              redDot: [
+                {
+                  start: child?.redDot?.start ?? '',
+                  end: child?.redDot?.end ?? '',
+                },
+              ],
+            }))
+          : [],
+      })) ?? []
+
+    this.dataSidebar = {
+      feature: features,
+      category: categories,
+      lainnya: others,
+    }
     this.requestUpdate()
   }
 
@@ -341,10 +388,10 @@ export class KompasMenuSideBar extends LitElement {
                 />
               </a>
               <span
-                class="bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 py-4"
+                class="font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
                 @click=${this.toggleNavSidebar}
               >
-                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 12, 12))}
+                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
               </span>
             </div>
             <div class="flex flex-wrap px-4 w-full">
@@ -394,23 +441,7 @@ export class KompasMenuSideBar extends LitElement {
                       >
                         <div class="flex items-center space-x-3">
                           <span
-                            class="text-xl text-brand-1 h-8 flex items-center 
-                            ${item.icon === null ? 'w-8' : 'max-w-max w-8'}"
-                          >
-                            ${item.icon &&
-                            Array.isArray(item.icon) &&
-                            item.icon.length >= 2
-                              ? unsafeSVG(
-                                  getFontAwesomeIcon(
-                                    item.icon[0],
-                                    item.icon[1],
-                                    20,
-                                    20
-                                  )
-                                )
-                              : ''}
-                          </span>
-                          <span class="font-bold relative text-[#333] w-full"
+                            class="text-sm font-bold relative text-[#333] w-full"
                             >${decodeSpecialChars(item.name)}</span
                           >
                           ${timedContent(
@@ -495,34 +526,21 @@ export class KompasMenuSideBar extends LitElement {
           <!-- category -->
           <div class="flex">
             <div class="w-full flex justify-between flex-col">
+              <span class="text-sm text-grey-400 px-6 font-normal"
+                >Redaksional</span
+              >
               ${this.dataSidebar.category.map(
                 item => html`
                   <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
-                      class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"
+                      class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
                       @click=${(e: Event) => this.rubricClicked(item, e)}
                     >
                       <div
                         class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
                       >
                         <div class="flex items-center space-x-3">
-                          <span
-                            class="text-xl text-brand-1 max-w-max w-8 h-8 flex items-center"
-                          >
-                            ${item.icon &&
-                            Array.isArray(item.icon) &&
-                            item.icon.length >= 2
-                              ? unsafeSVG(
-                                  getFontAwesomeIcon(
-                                    item.icon[0],
-                                    item.icon[1],
-                                    20,
-                                    20
-                                  )
-                                )
-                              : ''}
-                          </span>
                           <span
                             class="font-bold ${item.name === 'Beranda'
                               ? 'text-[#00559a]'
@@ -545,7 +563,107 @@ export class KompasMenuSideBar extends LitElement {
                       ${this.hasChildren(item)
                         ? html`
                             <span
-                              class="bg-[#e1f0ff] flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-brand-1"
+                              class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold"
+                              @click=${(e: Event) => {
+                                e.stopPropagation() // Prevents click from bubbling to parent
+                                this.toggleChildren(item)
+                              }}
+                            >
+                              ${this.expandedSlug === item.slug
+                                ? unsafeSVG(
+                                    getFontAwesomeIcon(
+                                      'fas',
+                                      'chevron-up',
+                                      12,
+                                      12
+                                    )
+                                  )
+                                : unsafeSVG(
+                                    getFontAwesomeIcon(
+                                      'fas',
+                                      'chevron-down',
+                                      12,
+                                      12
+                                    )
+                                  )}
+                            </span>
+                          `
+                        : null}
+                    </div>
+
+                    <!-- Children items -->
+                    ${this.hasChildren(item) && this.expandedSlug === item.slug
+                      ? html`
+                          <div class="pt-1 pb-2 space-y-1">
+                            ${item.children.map(
+                              child => html`
+                                <div
+                                  class="flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all"
+                                  @click=${() => this.rubricClicked(child)}
+                                >
+                                  <div
+                                    class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
+                                  >
+                                    ${decodeSpecialChars(child.name)}
+                                    ${timedContent(
+                                      child.redDot[0].start,
+                                      child.redDot[0].end
+                                    )
+                                      ? html`<span
+                                          class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
+                                        ></span>`
+                                      : ''}
+                                  </div>
+                                </div>
+                              `
+                            )}
+                          </div>
+                        `
+                      : ''}
+                  </div>
+                `
+              )}
+            </div>
+          </div>
+
+          <div class="border-b border-[#DDD] m-6 "></div>
+          <!-- Lainnya -->
+          <div class="flex">
+            <div class="w-full flex justify-between flex-col">
+              <span class="text-sm text-grey-400 px-6 font-normal"
+                >Lainnya</span
+              >
+              ${this.dataSidebar.lainnya.map(
+                item => html`
+                  <div class="w-full font-sans">
+                    <!-- Parent item -->
+                    <div
+                      class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
+                      @click=${(e: Event) => this.rubricClicked(item, e)}
+                    >
+                      <div
+                        class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
+                      >
+                        <div class="flex items-center space-x-3">
+                          <span class="font-bold"
+                            >${decodeSpecialChars(item.name)}</span
+                          >
+                          ${timedContent(
+                            item.redDot[0].start,
+                            item.redDot[0].end
+                          )
+                            ? html`<span
+                                class="bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]"
+                              ></span>`
+                            : ''}
+                        </div>
+                      </div>
+
+                      <!-- Toggle chevron -->
+                      ${this.hasChildren(item)
+                        ? html`
+                            <span
+                              class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold"
                               @click=${(e: Event) => {
                                 e.stopPropagation() // Prevents click from bubbling to parent
                                 this.toggleChildren(item)

package/tailwind/tailwind.ts

@@ -1646,6 +1646,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1.25rem;
   }
 
+  .px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;