Untitled

<template>
  <div class="inter-300">
    <span @click="toggleAll" class="space-mono-regular text-lg text-gray-500">> Technologies <</span>
    <br><br>

    <div v-for="(obj, index) in CollapsibleObjects" class="collapse-list-wrapper">
      <div @click="CollapsibleObjects[index].expanded = !CollapsibleObjects[index].expanded" class="collapse-list-label">
        <span class="text-xl lg:text-3xl">{{ obj.label }}</span>
        <span v-if="!CollapsibleObjects[index].expanded" class="collapse-list-button">+</span>
        <span v-if="CollapsibleObjects[index].expanded" class="collapse-list-button">-</span>
      </div>

      <div>
        <ul class="collapsible-list" v-if="CollapsibleObjects[index].expanded">
          <li class="text-xl lg:text-xl" v-for="list in obj.list">
            {{ list.item }}
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">

type CollapsibleObject = {
  label: string;
  collapsed: boolean;
  list: Array<Object>;
};

const CollapsibleObjects = ref<Array<CollapsibleObject>>([
    {label: 'Operating Systems', collapsed: false, list: [{ item: 'GNU/Linux' }, { item: 'macOS' }, { item: 'FreeBSD' }, { item: 'Windows' }]},
    {label: 'Programming/Scripting', collapsed: false, list: [{ item: 'Golang' }, { item: 'Bash' }, { item: 'Python' }, { item: 'C' },
        { item: 'Javascript/Typescript' }, { item: 'Java' }, { item: 'PowerShell' }]},
    {label: 'Frameworks', collapsed: false, list: [{ item: 'Bubbletea (Golang)' }, { item: 'NuxtJS' }]},
    {label: 'Monitoring Tools', collapsed: false, list: [{ item: 'Node Exporter (Prometheus)' }, { item: 'Grafana' }, { item: 'OpsGenie' }, { item: 'auditd (UNIX)' }]},
    {label: 'Database Management', collapsed: false, list: [{ item: 'MySQL' }, { item: 'PostgreSQL' }, { item: 'SQLite' } ]},
    {label: 'Webservers', collapsed: false, list: [{ item: 'Nginx' }, { item: 'Apache 2.0' }]},
    {label: 'Configuration Management Systems', collapsed: false, list: [{ item: 'Puppet' }, { item: 'Ansible' }]},
    {label: 'Networking', collapsed: false, list: [{ item: 'Cisco IOS' }, { item: 'Tailscale' }, { item: 'Wireguard' }]},
]);
</script>