<template>
  <div class="notion-plus-container">
    <div class="div-1">
      <div role="dialog" class="div-2">
        <div class="div-3">
          <div class="notion-scroller vertical">
            <div id="" tabindex="0" role="menu" aria-activedescendant="">
              <div class="div-4">
                <div class="div-5">
                  <div
                    style="
                      align-self: center;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    Basic blocks
                  </div>
                  <div style="margin-left: auto">
                    <img
                      role="progressbar"
                      class="loading-spinner"
                      alt="Loading..."
                      aria-busy="true"
                      aria-live="polite"
                      src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20data-ember-extension%3D%221%22%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2228.1542969%25%22%20y1%3D%2263.7402344%25%22%20x2%3D%2274.6289062%25%22%20y2%3D%2217.7832031%25%22%20id%3D%22linearGradient-1%22%3E%3Cstop%20stop-color%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20offset%3D%220%25%22%2F%3E%3Cstop%20stop-color%3D%22rgba(164%2C%20164%2C%20164%2C%200)%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20%3E%3Cg%20transform%3D%22translate(-236.000000%2C%20-286.000000)%22%3E%3Cg%20transform%3D%22translate(238.000000%2C%20286.000000)%22%3E%3Ccircle%20id%3D%22Oval-2%22%20stroke%3D%22url(%23linearGradient-1)%22%20stroke-width%3D%224%22%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10%2C2%20C4.4771525%2C2%200%2C6.4771525%200%2C12%22%20id%3D%22Oval-2%22%20stroke%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20stroke-width%3D%224%22%2F%3E%3Crect%20id%3D%22Rectangle-1%22%20fill%3D%22rgba(164%2C%20164%2C%20164%2C%201)%22%20x%3D%228%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                      style="visibility: hidden; filter: invert(0)"
                    />
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r56:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/text/en.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Text</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Just start writing with plain text.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r57:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/page.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Page</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Embed a sub-page inside this page.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r58:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/to-do.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">To-do list</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Track tasks with a to-do list.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r59:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/header.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Heading 1</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Big section heading.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5a:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/subheader.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Heading 2</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Medium section heading.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5b:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/subsubheader.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Heading 3</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Small section heading.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5c:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/simple-table.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Table</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Add simple tabular content to your page.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5d:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/bulleted-list.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Bulleted list</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Create a simple bulleted list.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5e:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/numbered-list.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Numbered list</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Create a list with numbering.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5f:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/toggle.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Toggle list</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Toggles can hide and show content inside.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5g:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/quote/en.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Quote</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Capture a quote.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5h:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/divider.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Divider</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Visually divide blocks.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5i:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/link.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      "
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Link to page</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Link to an existing page.
                      </div>
                    </div>
                  </div>
                </div>
                <div class="menuitem" tabindex="-1" id=":r5j:">
                  <div class="menuitem-div-1">
                    <div class="menuitem-div-2">
                      <div class="menuitem-div-3">
                        <img
                          src="assets/common/img/notion/blocks/callout.png"
                          referrerpolicy="same-origin"
                        />
                      </div>
                    </div>
                    <div
                      style="
                        margin-left: 6px;
                        margin-right: 12px;
                        min-width: 0px;
                        flex: 1 1 auto;
                      " 
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        <div style="display: flex; align-items: center">
                          <span style="margin-right: 6px">Callout</span>
                        </div>
                      </div>
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: rgb(120, 119, 116);
                          margin-top: 2px;
                          font-size: 12px;
                        "
                      >
                        Make writing stand out.
                      </div>
                    </div>
                  </div>
                </div>
              </div>

             
            </div>
            <div></div>
          </div>
          <footer style="flex-shrink: 0"></footer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  
  
  
};
</script>

<style scoped lang="scss">
.notion-plus-container {
  // display: none;
  // position: absolute;
  // top: 0;
  // right:0;
  // pointer-events: auto;

  .div-1 {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column-reverse;
    transform-origin: 0% top;
    left: 0px;
    top: 4px;
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: 270ms;
    transition-timing-function: ease;

    .div-2 {
      border-radius: 6px;
      background: white;
      backdrop-filter: none;
      position: relative;
      max-width: calc(100vw - 24px);
      box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
        rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
      overflow: hidden;

      .div-3 {
        display: flex;
        flex-direction: column;
        width: 324px;
        min-width: 180px;
        max-width: calc(100vw - 24px);
        height: 100%;
        max-height: 40vh;

        .notion-scroller {
          z-index: 1;
          flex-grow: 1;
          min-height: 0px;
          transform: translateZ(0px);
          overflow: hidden auto;
          margin-right: 0px;
          margin-bottom: 0px;

          .div-4 {
            padding-top: 6px;
            padding-bottom: 6px;

            .div-5 {
              display: flex;
              padding-left: 14px;
              padding-right: 14px;
              margin-top: 6px;
              margin-bottom: 8px;
              color: rgba(55, 53, 47, 0.65);
              fill: rgba(55, 53, 47, 0.45);
              font-size: 12px;
              font-weight: 500;
              line-height: 120%;
              user-select: none;
            }

            .menuitem {
              user-select: none;
              transition: background 20ms ease-in 0s;
              cursor: pointer;
              width: calc(100% - 8px);
              margin-left: 4px;
              margin-right: 4px;
              border-radius: 4px;

              &.active {
                background: rgba(55, 53, 47, 0.08);
              }

              .menuitem-div-1 {
                display: flex;
                align-items: center;
                line-height: 120%;
                width: 100%;
                user-select: none;
                min-height: 45px;
                font-size: 14px;
                padding-top: 4px;
                padding-bottom: 4px;

                .menuitem-div-2 {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-left: 10px;
                  margin-right: 4px;
                  margin-top: 1px;
                  align-self: flex-start;

                  .menuitem-div-3 {
                    width: 100%;
                    height: 100%;
                  }
                  .menuitem-img ,img{
                    display: block;
                    object-fit: cover;
                    border-radius: 4px;
                    background: white;
                    width: 46px;
                    height: 46px;
                    flex-grow: 0;
                    flex-shrink: 0;
                    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
                    filter: invert(0);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
