@kompasid/lit-web-components 0.9.19 → 0.9.21

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

@@ -1,70 +1,23 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-import { html, css, LitElement } from 'lit'
+import { LitElement, html, css } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'
 import { timedContent } from '../../utils/timedContent.js'
 
-interface DataExternalLink {
-  external?: boolean
-  gtmClass?: string
-  icon: object | null
-  iconify: string | null
-  isNew: boolean
-  name: string
-  url: string
-}
-
-interface dataType {
-  href: string
-  external?: boolean
-  icon: object | null
-  iconify: string | null
-  name: string
-  slug: string
-  redDot: [
-    {
-      start: string
-      end: string
-    }
-  ]
-  children: [
-    {
-      href: string
-      external: boolean
-      icon: string
-      iconify: string | null
-      name: string
-      slug: string
-      redDot: [
-        {
-          start: string
-          end: string
-        }
-      ]
-    }
-  ]
-}
-interface DataSideBarLink {
-  feature: dataType[]
-  category: dataType[]
-  lainnya: dataType[]
-}
+// Importing the data fetch functions
+import {
+  fetchExternalLinks,
+  fetchSidebarData,
+  DataExternalLink,
+  DataSideBarLink,
+  DataSideBarItem,
+} from './SidebarDataController.js'
 
 @customElement('kompasid-menu-side-bar')
 export class KompasMenuSideBar extends LitElement {
-  hasSlotContent = false
-  shadowRoot: any
-
-  firstUpdated() {
-    const slot = this.shadowRoot?.querySelector('slot')
-    const assignedNodes = slot!.assignedNodes({ flatten: true })
-
-    this.hasSlotContent = assignedNodes.length > 0
-  }
-
   static styles = [
     css`
       .slide-side-enter-active,
@@ -86,228 +39,107 @@ export class KompasMenuSideBar extends LitElement {
       .menu-menu-sidebar::-webkit-scrollbar {
         width: 4px;
       }
-
       .menu-menu-sidebar::-webkit-scrollbar-track {
         background: white;
       }
-
       .menu-menu-sidebar::-webkit-scrollbar-thumb {
         background-color: #00557d; /* Replace with your brand color */
         border-radius: 8px;
       }
-
       .menu-menu-sidebar::-webkit-scrollbar-button,
       .menu-menu-sidebar::-webkit-scrollbar-corner {
         background-color: white;
       }
+      /* existing styles */
     `,
     TWStyles,
   ]
-  @property({ type: Array }) dataExternal: DataExternalLink[] = []
-  @property({ type: Boolean }) isDark = false
 
-  async connectedCallback() {
-    super.connectedCallback()
-    try {
-      await this.fetchExternal()
-    } catch (error) {
-      this.handleFetchError(error)
-    }
-  }
+  /**
+   * Props
+   * property kompasProSubscription untuk menghandle apakah user sudah login atau belum
+   */
 
-  handleFetchError(error: unknown) {
-    const errorMessage =
-      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
-    alert(`Terjadi kesalahan: ${errorMessage}`)
-  }
+  @property({ type: Boolean }) isDark = false
+  @property({ type: Boolean }) isProductionMode = false
+  @property({ type: String }) subscriptionPackage = ''
 
-  dataSidebar: DataSideBarLink = {
+  @state() dataExternal: DataExternalLink[] = []
+  @state() dataSidebar: DataSideBarLink = {
+    bundles: [],
     feature: [],
     category: [],
     lainnya: [],
   }
+  @state() showNavBar = false
+  @state() expandedSlug: string | null = null
+  hasSlotContent = false
 
-  async fetchExternal() {
-    // External
-    const endpointExternal = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuExternalLinkV2.json`
-    const response = await fetch(endpointExternal, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-    const resultExternal = await response.json()
-    // eslint-disable-next-line no-undef
-    if (!resultExternal || !Array.isArray(resultExternal)) {
-      console.error(
-        'Error: resultExternal.result is undefined or not an array',
-        resultExternal
-      )
-      this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined
-    } else {
-      this.dataExternal = resultExternal.map(
-        (externalLink: Partial<DataExternalLink>) => ({
-          external: externalLink.external ?? false,
-          gtmClass: externalLink.gtmClass ?? '',
-          icon: externalLink.icon ?? null,
-          iconify: externalLink.iconify ?? null,
-          isNew: externalLink.isNew ?? false,
-          name: externalLink.name ?? '',
-          url: externalLink.url ?? '',
-        })
-      )
-    }
-
-    // Sidebar
-    const endpointSidebar = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuSideV3.json`
-    const responseSidebar = await fetch(endpointSidebar, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-    const resultSidebar = await responseSidebar.json()
-    // Validate the structure of the response
-    if (!resultSidebar || typeof resultSidebar !== 'object') {
-      console.error('Invalid response format:', resultSidebar)
-      return
-    }
-
-    // Convert object to an array
-    const sidebarArray = Object.values(resultSidebar)
-    const [featureArray, categoryArray, othersArray] = sidebarArray as [
-      any[],
-      any[],
-      any[]
-    ]
-    const features: dataType[] =
-      featureArray?.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 ?? '',
-                },
-              ],
-            }))
-          : [],
-      })) ?? []
+  // Fetch data when the component is connected to the DOM
+  async connectedCallback() {
+    super.connectedCallback()
+    await this.loadData()
+  }
 
-    // Map category data
-    const categories: dataType[] =
-      categoryArray?.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 ?? '',
-                },
-              ],
-            }))
-          : [],
-      })) ?? []
+  private hasKompasOnePackage(): boolean {
+    return this.subscriptionPackage
+      ?.split(' ')
+      .some(pkg => pkg.includes('kompas-one'))
+  }
 
-    // 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 ?? '',
-                },
-              ],
-            }))
-          : [],
-      })) ?? []
+  private hasKompasProPackage(): boolean {
+    return this.subscriptionPackage
+      ?.split(' ')
+      .some(pkg => pkg.includes('kompas-pro'))
+  }
 
-    this.dataSidebar = {
-      feature: features,
-      category: categories,
-      lainnya: others,
-    }
-    this.requestUpdate()
+  private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {
+    return bundles
+      .filter(b => b.isShow)
+      .map(b => {
+        if (b.name === 'Kompas One') {
+          return {
+            ...b,
+            children: this.hasKompasOnePackage() ? b.children : [],
+          }
+        }
+        if (b.name === 'Kompas Pro') {
+          return {
+            ...b,
+            children: this.hasKompasProPackage() ? b.children : [],
+          }
+        }
+        return b
+      })
   }
 
-  renderChips() {
-    const chips = []
-    chips.push(
-      html`
-        <div class="flex">
-          <div
-            class="py-0.5 px-1.5 rounded-full"
-            style="position: relative; display: inline-flex; background-color:#D71920;"
-          >
-            <span class="font-bold font-sans text-xs text-white capitalize"
-              >Baru</span
-            >
-          </div>
-        </div>
-      `
-    )
-    return chips
+  // Function to load the data using async API calls
+  private async loadData() {
+    try {
+      const [extData, sbData] = await Promise.all([
+        fetchExternalLinks(this.isProductionMode),
+        fetchSidebarData(this.isProductionMode),
+      ])
+
+      this.dataExternal = extData
+      this.dataSidebar = {
+        ...sbData,
+        bundles: this.filterBundles(sbData.bundles),
+      }
+    } catch (error) {
+      console.error('Error loading data:', error)
+    }
   }
 
-  hasChildren(item: any): boolean {
-    return Array.isArray(item?.children) && item.children.length > 0
+  private toggleNavSidebar(e: Event) {
+    e.stopPropagation()
+    this.showNavBar = !this.showNavBar
   }
 
-  rubricClicked(item: { name: string; href?: string }, event?: Event): void {
+  private rubricClicked(
+    item: { name: string; href?: string },
+    event?: Event
+  ): void {
     if (event) {
       event.stopPropagation() // Prevent parent click event
     }
@@ -318,62 +150,191 @@ export class KompasMenuSideBar extends LitElement {
     // add data layer here
   }
 
-  @state()
-  private expandedSlug: string | null = null
-  private toggleChildren(item: any) {
+  private hasChildren(item: DataSideBarItem): boolean {
+    return Array.isArray(item.children) && item.children.length > 0
+  }
+
+  private toggleChildren(item: DataSideBarItem) {
     this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug
   }
 
-  @state()
-  private showNavBar: boolean = false
+  private renderItem(item: any, padClass: string) {
+    return html`
+      <div class="w-full font-sans text-black">
+        <div
+          class="flex items-center justify-between text-sm font-medium ${padClass} transition-all cursor-pointer"
+          role="button"
+          tabindex="0"
+          @click=${(e: Event) => this.rubricClicked(item, e)}
+          @keydown=${(e: KeyboardEvent) => {
+            if (e.key === 'Enter') this.rubricClicked(item, e)
+          }}
+        >
+          <div
+            class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
+          >
+            ${item.iconSrc
+              ? html`<div class="flex">
+                  <img
+                    src="${item.iconSrc}"
+                    alt="Kompas.id"
+                    scale="0"
+                    class="block w-5"
+                  />
+                </div>`
+              : ''}
+            <span class="font-bold">${decodeSpecialChars(item.name)}</span>
+            ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')
+              ? html`<span
+                  class="bg-orange-400 h‑2 w‑2 rounded-full relative -top-[12px] shrink-0"
+                ></span>`
+              : ''}
+          </div>
+          ${this.hasChildren(item)
+            ? html`
+                <span
+                  class="flex justify-center items-center rounded my‑1 py‑4 w‑10 h‑10 cursor‑pointer text-grey-400"
+                  role="button"
+                  tabindex="0"
+                  @click=${(e: Event) => {
+                    e.stopPropagation()
+                    this.toggleChildren(item)
+                  }}
+                  @keydown=${(e: KeyboardEvent) => {
+                    if (e.key === 'Enter') {
+                      e.stopPropagation()
+                      this.toggleChildren(item)
+                    }
+                  }}
+                >
+                  ${unsafeSVG(
+                    getFontAwesomeIcon(
+                      'fas',
+                      this.expandedSlug === item.slug
+                        ? 'chevron-up'
+                        : 'chevron-down',
+                      12,
+                      12
+                    )
+                  )}
+                </span>
+              `
+            : null}
+        </div>
 
-  toggleNavSidebar = (e: Event) => {
-    e.stopPropagation() // prevent bubbling
-    this.showNavBar = !this.showNavBar
+        ${this.hasChildren(item) && this.expandedSlug === item.slug
+          ? html`<div
+              class="${padClass.includes('px-6')
+                ? 'pt‑1 pb‑2 space-y‑1 text-black'
+                : 'pl‑14 pt‑1 pb‑2 space-y‑1 text-black'}"
+            >
+              ${repeat(
+                item.children ?? [],
+                (c: DataSideBarItem) => c.slug,
+                (child: DataSideBarItem) => html`
+                  <div
+                    role="button"
+                    tabindex="0"
+                    class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
+                    @click=${() => this.rubricClicked(child)}
+                    @keydown=${(e: KeyboardEvent) => {
+                      if (e.key === 'Enter') this.rubricClicked(child, e)
+                    }}
+                  >
+                    <div
+                      class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8"
+                    >
+                      ${decodeSpecialChars(child.name)}
+                      ${timedContent(
+                        child.redDot.start ?? '',
+                        child.redDot.end ?? ''
+                      )
+                        ? html`<span
+                            class="bg-orange-400 h‑2 w‑2 rounded-full relative -top-[12px] shrink-0"
+                          ></span>`
+                        : ''}
+                    </div>
+                    <span class="ml-auto text-grey-400">
+                      ${child.external
+                        ? unsafeSVG(
+                            getFontAwesomeIcon('fas', 'external-link', 16, 16)
+                          )
+                        : ''}
+                    </span>
+                  </div>
+                `
+              )}
+            </div>`
+          : ''}
+      </div>
+    `
+  }
+
+  private renderSection(title: string | null, items: any[], padClass: string) {
+    if (!items || items.length === 0) return null // skip if empty data
+    return html`
+      ${title
+        ? html`<span class="text-sm text-grey-400 ${padClass} font-normal"
+            >${title}</span
+          >`
+        : null}
+      ${repeat(
+        items,
+        item => item.slug,
+        item => this.renderItem(item, padClass)
+      )}
+    `
+  }
+
+  private renderChips() {
+    return html`
+      <div
+        class="py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex"
+        style="background-color:#D71920;"
+      >
+        <span class="font-bold font-sans text-xs text-white capitalize"
+          >Baru</span
+        >
+      </div>
+    `
   }
 
   render() {
     return html`
-      <!-- Button Menu -->
+      <!-- Toggle Button -->
       <div
+        role="button"
+        tabindex="0"
         class="w-fit flex items-center justify-center cursor-pointer relative"
         @click=${this.toggleNavSidebar}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter') this.toggleNavSidebar(e)
+        }}
       >
         <slot></slot>
-        ${!this.hasSlotContent
-          ? html`
-              <div
-                class="h-4 inline-flex ${this.isDark
-                  ? 'text-[#FFFFFF]'
-                  : 'text-brand-1'}"
-              >
-                ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
-              </div>
-              <span
-                class="font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
-                  .isDark
-                  ? 'text-[#FFFFFF]'
-                  : 'text-brand-1'}"
-              >
-                Menu
-              </span>
-            `
-          : ''}
+        <div class="h-4 inline-flex text-brand-1">
+          ${unsafeSVG(getFontAwesomeIcon('fas', 'bars', 20, 20))}
+        </div>
+        <span
+          class="font-sans hidden sm:inline ml-2 tracking-wide font-bold text-brand-1"
+        >
+          Menu
+        </span>
       </div>
-      <!-- Side Menu -->
+      <!-- Sidebar Menu -->
       <nav
-        @click=${this.toggleNavSidebar}
         class=${this.showNavBar
           ? 'fixed left-0 top-0 w-screen z-[100]'
           : 'hidden'}
       >
+        <!-- Sidebar Content -->
         <div
-          ref="toggle-nav-sidebar"
-          class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg"
-          style="width: 312px;"
+          class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 shadow-lg"
+          style="width:312px;"
         >
+          <!-- Logo and Close Button -->
           <div
-            class="bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full"
+            class="bg-[#FFFFFF] flex flex-col items-center justify-center w-full"
           >
             <div
               ref="logo-kompas"
@@ -388,343 +349,74 @@ export class KompasMenuSideBar extends LitElement {
                 />
               </a>
               <span
+                role="button"
+                tabindex="0"
                 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}
+                @keydown=${(e: KeyboardEvent) => {
+                  if (e.key === 'Enter') this.toggleNavSidebar(e)
+                }}
               >
                 ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
               </span>
             </div>
-            <div class="flex flex-wrap px-6 w-full">
-              ${this.dataExternal.map(
-                item => html`
-                  <a href="${item.url}" class="flex w-1/2 no-underline">
-                    <div
-                      class="cursor-pointer flex items-center pb-4 w-[312px]"
-                    >
-                      ${item.icon &&
-                      Array.isArray(item.icon) &&
-                      item.icon.length >= 2
-                        ? html`
-                            <div class="flex mr-2 text-brand-1">
-                              ${unsafeSVG(
-                                getFontAwesomeIcon(item.icon[0], item.icon[1])
-                              )}
-                            </div>
-                          `
-                        : ''}
-                      <span class="font-sans relative text-xs text-[#666666]">
-                        ${item.name}
-                      </span>
-                      <div class="ml-1">
-                        ${item.isNew ? this.renderChips() : ''}
-                      </div>
-                    </div>
-                  </a>
-                `
-              )}
-            </div>
           </div>
-          <div class="border-b border-[#DDD] m-6 "></div>
-          <!-- feature -->
-          <div class="flex">
-            <div class="flex justify-between flex-col">
-              ${this.dataSidebar.feature.map(
-                item => html`
-                  <div class="w-full font-sans">
-                    <!-- Parent item -->
-                    <div
-                      class="flex items-center justify-between px-6 text-sm font-medium text-gray-700 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-sm font-bold relative text-[#333] w-full"
-                            >${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="text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
-                              @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="pl-14 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>
-                        `
+          <!-- External Links -->
+          <div class="flex flex-wrap px-6">
+            ${repeat(
+              this.dataExternal,
+              item => item.name,
+              item => html`
+                <a href="${item.url}" class="flex w-1/2 no-underline px-2">
+                  <div class="cursor-pointer flex items-center pb-4">
+                    ${item.icon &&
+                    Array.isArray(item.icon) &&
+                    item.icon.length >= 2
+                      ? html`<div class="flex mr-2 text-brand-1">
+                          ${unsafeSVG(
+                            getFontAwesomeIcon(item.icon[0], item.icon[1])
+                          )}
+                        </div>`
                       : ''}
-                  </div>
-                `
-              )}
-            </div>
-          </div>
-          <div class="border-b border-[#DDD] m-6 "></div>
-          <!-- 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-6 transition-all cursor-pointer"
-                      @click=${(e: Event) => this.rubricClicked(item, e)}
+                    <span class="font-sans text-xs text-[#666666]"
+                      >${item.name}</span
                     >
-                      <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 ${item.name === 'Beranda'
-                              ? 'text-[#00559a]'
-                              : 'text-[#333] w-full'}"
-                            >${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 text-grey-400"
-                              @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>
-                        `
+                    ${item.isNew
+                      ? html`<span class="ml-1">${this.renderChips()}</span>`
                       : ''}
                   </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 text-[#333]"
-                            >${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)
-                              }}
-                            >
-                              ${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>
+                </a>
+              `
+            )}
           </div>
+          ${this.dataExternal.length > 0
+            ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
+            : null}
+
+          <!-- Bundle Section -->
+          ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}
+          ${this.dataSidebar.bundles.length > 0
+            ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
+            : null}
+
+          <!-- Feature Section -->
+          ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}
+          ${this.dataSidebar.feature.length > 0
+            ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
+            : null}
+
+          <!-- Category (Redaksional) -->
+          ${this.renderSection(
+            'Redaksional',
+            this.dataSidebar.category,
+            'px-6'
+          )}
+          ${this.dataSidebar.category.length > 0
+            ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
+            : null}
+
+          <!-- Others (Lainnya) -->
+          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}
         </div>
       </nav>
     `