<script>
import { defineComponent } from "vue";
import SidebarLinks from "./SidebarLinks";

export default defineComponent({
  name: "Sidebar",
  components: { SidebarLinks /* , NavLinks */ },
  render(h) {
    let WBCSidebarObj = {
      dive: true,

      options: { hide: !true, class: "sidebarr" },
      default_0: {
        comp: "~VNavigationDrawer",
        options: {
          hide: true,
          key: "key-drawer",
          class: "sidebarr my-15",
          props: {
            permanent: !true, // Make it permanent

            app: true,
            hight: "100vh",

            // right: true,
            right: (that) => that?.store?.state?.lg == "ar",
            // right: true,
            "expand-on-hover": true,
          },
          style: {
            height: 1,
          },
        },
      },
      default_1: {
        comp: "VIcon",
        options: {
          class: "ma-5 justify-left sidebar-icon",

          html: "mdi-menu",
          on: {
            // "toggle-sidebar"
            click: (that) => () => {
              that.data["default_2"].options.hide = !that.data?.["default_2"]?.options
                ?.hide;
            },
          },
        },
      },
      default_2: {
        comp: SidebarLinks,
        options: {
          hide: false,
          // class: "sidebarr",
          props: {
            depth: 0,
            items: this.items,
          },
        },
      },
      ...(this?.$themeConfig?.sidebarStyle || {}),

      // tracker: (that) => {
      //   // if (that.data?.[1]?.[0]?.options?.props)
      //   //   that.data[1][0].options.props.right =
      //   //     that?.store?.state?.lg == "ar" ? true : false;
      // },
    };

    return h("WBC", {
      props: {
        item: WBCSidebarObj,
      },
    });
  },
  props: ["items"],
});
</script>

<style lang="stylus">
.sidebarr
  &&::-webkit-scrollbar
    width: 0
    height: 0
  .personal-info-wrapper
    display none
  ul
    padding 0
    margin 0
    list-style-type none
    &.sidebar-links
      > li
        background $accentColor
  a
    display inline-block
  .nav-links
    display none
    border-bottom 1px solid var(--border-color)
    padding 0.5rem 0 0.75rem 0
    a
      font-weight 600
    .nav-item, .repo-link
      display block
      line-height 1.25rem
      font-size 1.1em
      padding 0.5rem 0 0.5rem 1.5rem
  & > .sidebar-links
    padding 1.5rem 0
    & > li > a.sidebar-link
      font-size 1em
      line-height 1.7
      font-weight 500
    & > li:not(:first-child)
      margin-top .75rem

@media (max-width: $MQMobile)
  .sidebar
    .personal-info-wrapper
      display block
    .nav-links
      display block
      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
        top calc(1rem - 2px)
    & > .sidebar-links
      padding 1rem 0
</style>
