<script setup>
import { computed, ref, watch } from "vue";
import { useLight } from "#imports";
const light = useLight();
const props = defineProps(["value", "dense"]);
const favMenuExpanded = ref(
  typeof window !== "undefined" ? JSON.parse(localStorage.getItem("fav-menu-expanded") || "false") : false
);
watch(favMenuExpanded, (newValue) => {
  if (typeof window !== "undefined") {
    localStorage.setItem("fav-menu-expanded", JSON.stringify(newValue));
  }
});
const color1 = computed(() => {
  return light.getColorValue();
});
const color2 = computed(() => {
  let c = light.getColorValue();
  c = c + "b3";
  return c;
});
</script>

<style scoped>
.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
</style>

<template>
    <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite" 
                      v-model="favMenuExpanded">
        <q-list class="q-pl-md menu-list" :dense="dense">
            <q-item v-ripple :to="item.path" v-for="item in value">
                <q-item-section avatar>
                    <q-icon :name="item.icon ?? 'sym_o_link'" />
                </q-item-section>
                <q-item-section>
                    <q-item-label v-text="$t(item.label)"></q-item-label>
                </q-item-section>
                
            </q-item>
        </q-list>
    </q-expansion-item>
</template>
