Customization

resource/js/craftable-pro
├── Components/
│   ├── Logo.vue (used to customize content of the logo)
│   ├── Sidebar.vue (used to customize content of the sidebar)
│   └── UserDropdown.vue (used to customize content of the user dropdown menu)
├── Pages/
├── index.ts
└── shims-vue.d.ts

<template>
  <div>
    <span class="sr-only">Craftable PRO</span>
    <svg width="166" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M10.008 23.456c-1.584 0-2.944-.272-4.08-.816-1.136-.56-2.064-1.288-2.784-2.184a9.752 9.752 0 0 1-1.608-2.928c-.336-1.056-.504-2.08-.504-3.072v-.528c0-1.088.176-2.16.528-3.216a8.769 8.769 0 0 1 1.608-2.904c.736-.864 1.656-1.552 2.76-2.064 1.12-.528 2.44-.792 3.96-.792 1.584 0 2.984.296 4.2.888 1.216.592 2.184 1.416 2.904 2.472.736 1.04 1.168 2.264 1.296 3.672h-3.96c-.112-.704-.368-1.304-.768-1.8s-.92-.88-1.56-1.152c-.624-.272-1.328-.408-2.112-.408s-1.48.136-2.088.408a4.23 4.23 0 0 0-1.536 1.152 5.519 5.519 0 0 0-.936 1.776c-.208.672-.312 1.424-.312 2.256 0 .816.104 1.568.312 2.256a5.59 5.59 0 0 0 .96 1.776c.432.496.96.88 1.584 1.152.624.256 1.336.384 2.136.384 1.216 0 2.24-.296 3.072-.888.848-.592 1.36-1.408 1.536-2.448h3.936a7.804 7.804 0 0 1-1.296 3.528c-.704 1.056-1.672 1.904-2.904 2.544-1.216.624-2.664.936-4.344.936ZM20.948 23V9.848h3.047v5.64h-.072c0-1.856.392-3.288 1.176-4.296.8-1.008 1.952-1.512 3.456-1.512h.504v3.312h-.96c-1.056 0-1.872.288-2.448.864-.576.56-.864 1.376-.864 2.448V23h-3.84Zm17.975 0v-3.888h-.648v-4.224c0-.672-.16-1.176-.48-1.512-.32-.336-.832-.504-1.536-.504a71.676 71.676 0 0 0-3.168.096c-.608.032-1.16.064-1.656.096v-3.24c.368-.032.8-.064 1.296-.096a49.28 49.28 0 0 1 3.024-.096c1.344 0 2.472.192 3.384.576.928.384 1.632.968 2.112 1.752.48.768.72 1.76.72 2.976V23h-3.048Zm-4.2.336c-.944 0-1.776-.168-2.496-.504a3.929 3.929 0 0 1-1.656-1.44c-.4-.64-.6-1.4-.6-2.28 0-.96.248-1.744.744-2.352.496-.624 1.192-1.08 2.088-1.368.896-.304 1.928-.456 3.096-.456h2.808v2.136h-2.832c-.672 0-1.192.168-1.56.504-.352.32-.528.76-.528 1.32 0 .528.176.96.528 1.296.368.32.888.48 1.56.48a2.9 2.9 0 0 0 1.152-.216c.352-.16.64-.424.864-.792.224-.368.352-.88.384-1.536l.912.96c-.08.912-.304 1.68-.672 2.304a3.586 3.586 0 0 1-1.488 1.44c-.624.336-1.392.504-2.304.504ZM45.517 23V9.728c0-1.52.432-2.648 1.296-3.384.864-.736 2.136-1.104 3.816-1.104h1.68v2.88H50.46c-.432 0-.768.12-1.008.36s-.36.576-.36 1.008V23h-3.576Zm-1.56-10.08v-2.808H52.5v2.808h-8.544Zm16.67 10.248c-1.329 0-2.4-.16-3.217-.48-.816-.336-1.416-.888-1.8-1.656-.368-.784-.552-1.84-.552-3.168V6.296h3.576v11.712c0 .624.16 1.104.48 1.44.336.32.808.48 1.416.48h1.944v3.24h-1.848Zm-7.56-10.512V9.848h9.407v2.808h-9.408ZM72.953 23v-3.888h-.648v-4.224c0-.672-.16-1.176-.48-1.512-.32-.336-.832-.504-1.536-.504a71.676 71.676 0 0 0-3.168.096c-.608.032-1.16.064-1.656.096v-3.24c.368-.032.8-.064 1.296-.096a49.28 49.28 0 0 1 3.024-.096c1.344 0 2.472.192 3.384.576.928.384 1.632.968 2.112 1.752.48.768.72 1.76.72 2.976V23h-3.048Zm-4.2.336c-.944 0-1.776-.168-2.496-.504a3.929 3.929 0 0 1-1.656-1.44c-.4-.64-.6-1.4-.6-2.28 0-.96.248-1.744.744-2.352.496-.624 1.192-1.08 2.088-1.368.896-.304 1.928-.456 3.096-.456h2.808v2.136h-2.832c-.672 0-1.192.168-1.56.504-.352.32-.528.76-.528 1.32 0 .528.176.96.528 1.296.368.32.888.48 1.56.48a2.9 2.9 0 0 0 1.152-.216c.352-.16.64-.424.864-.792.224-.368.352-.88.384-1.536l.912.96c-.08.912-.304 1.68-.672 2.304a3.586 3.586 0 0 1-1.488 1.44c-.624.336-1.392.504-2.304.504Zm18.594.096c-1.072 0-2.016-.224-2.832-.672a4.904 4.904 0 0 1-1.92-1.992c-.464-.864-.712-1.92-.744-3.168h.456V23H79.26V5.48h3.84v8.904l-.912 1.152c.048-1.328.296-2.44.744-3.336.464-.912 1.096-1.592 1.896-2.04.8-.464 1.712-.696 2.736-.696.896 0 1.704.168 2.424.504.736.32 1.36.784 1.872 1.392a6.169 6.169 0 0 1 1.176 2.112c.288.816.432 1.704.432 2.664v.528c0 .96-.144 1.848-.432 2.664a6.263 6.263 0 0 1-1.224 2.16 5.724 5.724 0 0 1-1.92 1.44c-.752.336-1.6.504-2.544.504Zm-1.008-3.216c.656 0 1.224-.16 1.704-.48.496-.32.88-.768 1.152-1.344.272-.592.408-1.256.408-1.992 0-.752-.136-1.408-.408-1.968a3.032 3.032 0 0 0-1.152-1.296c-.48-.32-1.048-.48-1.704-.48-.576 0-1.12.136-1.632.408a3.257 3.257 0 0 0-1.248 1.176c-.304.496-.456 1.104-.456 1.824v.888c0 .688.16 1.28.48 1.776.336.48.76.848 1.272 1.104.512.256 1.04.384 1.584.384ZM96.303 23V5.48h3.864V23h-3.864Zm-1.56-14.688V5.48h5.424v2.832h-5.424Zm14.986 15.144c-1.12 0-2.112-.192-2.976-.576a6.36 6.36 0 0 1-2.136-1.536 7.376 7.376 0 0 1-1.296-2.184 7.449 7.449 0 0 1-.432-2.496v-.48c0-.88.144-1.72.432-2.52a6.993 6.993 0 0 1 1.296-2.184 5.901 5.901 0 0 1 2.088-1.512c.848-.384 1.808-.576 2.88-.576 1.408 0 2.592.32 3.552.96a6.152 6.152 0 0 1 2.232 2.472c.512 1.008.768 2.112.768 3.312v1.296h-11.64v-2.184h9.312l-1.248 1.008c0-.784-.112-1.456-.336-2.016-.224-.56-.56-.984-1.008-1.272-.432-.304-.976-.456-1.632-.456-.672 0-1.24.152-1.704.456-.464.304-.816.752-1.056 1.344-.24.576-.36 1.288-.36 2.136 0 .784.112 1.472.336 2.064a2.776 2.776 0 0 0 1.056 1.344c.48.32 1.104.48 1.872.48.704 0 1.28-.136 1.728-.408.448-.272.752-.608.912-1.008h3.528a5.545 5.545 0 0 1-1.128 2.352 5.719 5.719 0 0 1-2.112 1.608c-.848.384-1.824.576-2.928.576Z"
        fill="#121622"
      />
      <path
        d="M162 4h-35a4 4 0 0 0-4 4v14a4 4 0 0 0 4 4h35a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4Z"
        class="fill-primary-600"
      />
      <path
        d="M132.164 17.074v-1.988h1.834c.355 0 .658-.07.91-.21.261-.14.462-.336.602-.588.14-.261.21-.56.21-.896 0-.355-.07-.658-.21-.91a1.36 1.36 0 0 0-.602-.588c-.252-.14-.555-.21-.91-.21h-1.834V9.696h1.722c.868 0 1.61.145 2.226.434.625.29 1.101.7 1.428 1.232.336.532.504 1.171.504 1.918v.224c0 .728-.168 1.363-.504 1.904-.327.532-.803.943-1.428 1.232-.616.29-1.358.434-2.226.434h-1.722ZM130.148 20V9.696h2.296V20h-2.296Zm9.338 0V9.696h2.296V20h-2.296Zm6.202 0-2.996-4.396h2.52L148.348 20h-2.66Zm-4.522-3.276v-1.806h2.52c.336 0 .625-.065.868-.196.252-.14.443-.331.574-.574.14-.252.21-.541.21-.868 0-.327-.07-.611-.21-.854a1.314 1.314 0 0 0-.574-.574 1.709 1.709 0 0 0-.868-.21h-2.52V9.696h2.338c.849 0 1.587.13 2.212.392.625.252 1.106.63 1.442 1.134.336.504.504 1.139.504 1.904v.224c0 .756-.173 1.386-.518 1.89-.336.495-.817.868-1.442 1.12-.616.243-1.349.364-2.198.364h-2.338Zm13.323 3.542c-.924 0-1.731-.159-2.422-.476a5.1 5.1 0 0 1-1.694-1.274 5.672 5.672 0 0 1-1.008-1.722 5.412 5.412 0 0 1-.322-1.778v-.308c0-.635.112-1.26.336-1.876a5.231 5.231 0 0 1 1.036-1.694 4.966 4.966 0 0 1 1.708-1.204c.682-.308 1.47-.462 2.366-.462.896 0 1.685.154 2.366.462.682.299 1.251.7 1.708 1.204a5.197 5.197 0 0 1 1.036 1.694c.234.616.35 1.241.35 1.876v.308c0 .57-.112 1.162-.336 1.778a5.672 5.672 0 0 1-1.008 1.722c-.448.523-1.017.947-1.708 1.274-.681.317-1.484.476-2.408.476Zm0-2.142c.486 0 .92-.084 1.302-.252.392-.168.724-.401.994-.7.28-.299.49-.644.63-1.036s.21-.812.21-1.26c0-.476-.074-.91-.224-1.302a2.789 2.789 0 0 0-.63-1.036 2.691 2.691 0 0 0-.98-.686 3.367 3.367 0 0 0-1.302-.238c-.485 0-.919.08-1.302.238a2.84 2.84 0 0 0-.994.686c-.27.29-.476.635-.616 1.036-.14.392-.21.826-.21 1.302 0 .448.07.868.21 1.26.14.392.346.737.616 1.036.28.299.612.532.994.7a3.21 3.21 0 0 0 1.302.252Z"
        fill="#fff"
      />
    </svg>
  </div>
</template>

<template>
  <div>
    <TextInput
      class="my-6"
      name="search"
      :leftIcon="MagnifyingGlassIcon"
      placeholder="Search"
    />
    <nav class="mt-5 space-y-1">
      <SidebarItem href="/admin/media" :icon="PhotoIcon">
        {{ $t("craftable-pro", "Media") }}
      </SidebarItem>
 
      <SidebarGroup :title="$t('craftable-pro', 'Craftable PRO')">
        <SidebarItem href="/admin/craftable-pro-users" :icon="UsersIcon">
          {{ $t("craftable-pro", "Craftable Users") }}
        </SidebarItem>
        <SidebarItem href="/admin/translations" :icon="LanguageIcon">
          {{ $t("craftable-pro", "Translations") }}
        </SidebarItem>
        <SidebarItem href="/admin/roles" :icon="KeyIcon">
          {{ $t("craftable-pro", "Roles") }}
        </SidebarItem>
      </SidebarGroup>
    </nav>
  </div>
</template>
 
<script setup lang="ts">
import {
  KeyIcon,
  LanguageIcon,
  MagnifyingGlassIcon,
  PhotoIcon,
  UsersIcon,
} from "@heroicons/vue/24/outline";
import { TextInput, SidebarItem, SidebarGroup } from "craftable-pro/Components";
</script>

<template>
  <div class="divide-y divide-gray-100">
    <div class="py-1">
      <DropdownItem class="font-medium text-gray-900">
        {{ user?.email }}
      </DropdownItem>
    </div>
    <div class="py-1">
      <DropdownItem href="/admin/profile">
        {{ $t("craftable-pro", "Profile") }}
      </DropdownItem>
      <DropdownItem href="/admin/password">
        {{ $t("craftable-pro", "Password") }}
      </DropdownItem>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { DropdownItem } from "craftable-pro/Components";
import { useUser } from "craftable-pro/hooks/useUser";
 
const { user } = useUser();
</script>