407 lines
25 KiB
HTML
407 lines
25 KiB
HTML
<div role="navigation" aria-label="Navbar" class="" id="layout-topbar">
|
|
<div class="flex items-center justify-between px-6 py-3 bg-menu">
|
|
<div class="inline-flex items-center gap-5">
|
|
<a href="/">
|
|
<img src="{{ 'logo_new.png' | asset_url }}" class="h-[20px]" />
|
|
</a>
|
|
<button
|
|
class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-96 justify-start gap-2 px-2 !text-sm md:flex bg-white"
|
|
onclick="document.getElementById('topbar-search-modal')?.showModal()">
|
|
<i data-lucide="search"></i>
|
|
<span>Tìm Kiếm</span>
|
|
</button>
|
|
<button
|
|
class="btn btn-outline btn-sm btn-square btn-ghost border-base-300 text-base-content/70 flex size-9 md:hidden"
|
|
aria-label="Search" onclick="document.getElementById('topbar-search-modal')?.showModal()">
|
|
<i data-lucide="search"></i>
|
|
</button>
|
|
<dialog id="topbar-search-modal" class="modal p-0">
|
|
<div class="modal-box bg-transparent p-0 shadow-none">
|
|
<div class="bg-base-100 rounded-box">
|
|
<div class="input w-full border-0 !outline-none">
|
|
<i data-lucide="search" class="text-base-content/60 size-4.5"></i>
|
|
<input type="search" class="grow" placeholder="Tìm kiếm" aria-label="Search" />
|
|
<form method="dialog">
|
|
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
|
|
<i data-lucide="x" class="text-base-content/80 size-4"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="border-base-300 flex items-center gap-3 border-t px-2 py-2">
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<i data-lucide="arrow-up" class="size-3.5"></i>
|
|
</div>
|
|
<div
|
|
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<i data-lucide="arrow-down" class="size-3.5"></i>
|
|
</div>
|
|
<p class="text-base-content/80 ms-1 text-sm">Điều hướng</p>
|
|
</div>
|
|
<div class="flex items-center gap-0.5 max-sm:hidden">
|
|
<div
|
|
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<i data-lucide="undo-2" class="size-3.5"></i>
|
|
</div>
|
|
<p class="text-base-content/80 ms-1 text-sm">Quay lại</p>
|
|
</div>
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<i data-lucide="corner-down-left" class="size-3.5"></i>
|
|
</div>
|
|
<p class="text-base-content/80 ms-1 text-sm">Mở</p>
|
|
</div>
|
|
<div class="ms-auto flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 bg-base-200 flex h-5 items-center justify-center rounded-sm border px-1 text-sm/none shadow-xs">
|
|
esc
|
|
</div>
|
|
<p class="text-base-content/80 ms-1 text-sm">Đóng</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-base-100 rounded-box mt-4">
|
|
<div class="px-5 py-3">
|
|
<p class="text-base-content/80 text-sm font-medium">I'm looking for...</p>
|
|
<div class="mt-2 flex flex-wrap gap-1.5">
|
|
<div
|
|
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
|
Writer
|
|
</div>
|
|
<div
|
|
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
|
Editor
|
|
</div>
|
|
<div
|
|
class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
|
|
Explainer
|
|
</div>
|
|
<div
|
|
class="border-base-300 hover:bg-base-200 rounded-box flex cursor-pointer items-center gap-1 border border-dashed px-2.5 py-1 text-sm/none">
|
|
<span class="iconify lucide--plus size-3.5"></span>
|
|
Action
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-base-300 h-px border-dashed" />
|
|
|
|
<ul class="menu w-full pt-1">
|
|
<li class="menu-title">Talk to assistant</li>
|
|
<li>
|
|
<div class="group">
|
|
<div
|
|
class="from-primary to-primary/80 mask mask-squircle text-primary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
|
|
R
|
|
</div>
|
|
<p class="grow text-sm">Research Buddy</p>
|
|
<div
|
|
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
|
|
<span class="iconify lucide--star text-orange-500"></span>
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<span class="iconify lucide--corner-down-left size-3.5"></span>
|
|
</div>
|
|
<p class="ms-1 text-sm opacity-80">Select</p>
|
|
</div>
|
|
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<div class="group">
|
|
<div
|
|
class="from-secondary to-secondary/80 mask mask-squircle text-secondary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
|
|
T
|
|
</div>
|
|
<p class="grow text-sm">Task Planner</p>
|
|
<div
|
|
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
|
|
<span class="iconify lucide--star text-orange-500"></span>
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<span class="iconify lucide--corner-down-left size-3.5"></span>
|
|
</div>
|
|
<p class="ms-1 text-sm opacity-80">Select</p>
|
|
</div>
|
|
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="group">
|
|
<div
|
|
class="from-success to-success/80 mask mask-squircle text-success-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
|
|
S
|
|
</div>
|
|
<p class="grow text-sm">Sparking Ideas</p>
|
|
<div
|
|
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
|
|
<span class="iconify lucide--star text-orange-500"></span>
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<span class="iconify lucide--corner-down-left size-3.5"></span>
|
|
</div>
|
|
<p class="ms-1 text-sm opacity-80">Select</p>
|
|
</div>
|
|
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="group">
|
|
<div
|
|
class="from-warning to-warning/80 mask mask-squircle text-warning-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
|
|
D
|
|
</div>
|
|
<p class="grow text-sm">Docs Assistant</p>
|
|
<div
|
|
class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
|
|
<span class="iconify lucide--star text-orange-500"></span>
|
|
<div class="flex items-center gap-0.5">
|
|
<div
|
|
class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
|
|
<span class="iconify lucide--corner-down-left size-3.5"></span>
|
|
</div>
|
|
<p class="ms-1 text-sm opacity-80">Select</p>
|
|
</div>
|
|
<span class="iconify lucide--ellipsis-vertical opacity-80"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="border-base-300 h-px border-dashed" />
|
|
|
|
<ul class="menu w-full pt-1">
|
|
<li class="menu-title flex flex-row items-center justify-between gap-2">
|
|
<span>Tasks Manager</span>
|
|
<span>Progress</span>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span class="iconify lucide--notebook size-4"></span>
|
|
<p class="grow text-sm">Creating an essay</p>
|
|
<progress class="progress progress-primary h-1 w-30" value="60"
|
|
max="100"></progress>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span class="iconify lucide--message-circle size-4"></span>
|
|
<p class="grow text-sm">Summarizing chat</p>
|
|
<progress class="progress progress-secondary h-1 w-30" value="80"
|
|
max="100"></progress>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span class="iconify lucide--code size-4"></span>
|
|
<p class="grow text-sm">Fixing syntax</p>
|
|
<progress class="progress progress-accent h-1 w-30" value="35" max="100"></progress>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span class="iconify lucide--book-open size-4"></span>
|
|
<p class="grow text-sm">Reading docs</p>
|
|
<progress class="progress progress-info h-1 w-30" value="90" max="100"></progress>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span class="iconify lucide--lightbulb size-4"></span>
|
|
<p class="grow text-sm">Generating ideas</p>
|
|
<progress class="progress progress-warning h-1 w-30" value="50"
|
|
max="100"></progress>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
<div class="inline-flex items-center gap-0.5">
|
|
|
|
<div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
|
|
<div tabindex="0" role="button" class="btn btn-circle btn-sm relative" aria-label="Notifications">
|
|
<i data-lucide="bell" class="motion-preset-seesaw size-4.5"></i>
|
|
<div class="status status-error status-sm absolute end-1 top-1"></div>
|
|
</div>
|
|
<div tabindex="0"
|
|
class="dropdown-content bg-base-100 rounded-box mt-1 w-80 shadow-md duration-1000 hover:shadow-lg">
|
|
<div class="bg-base-200/30 rounded-t-box border-base-200 border-b ps-4 pe-2 pt-3">
|
|
<div class="flex items-center justify-between">
|
|
<p class="font-medium">Notification</p>
|
|
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
|
|
onclick="document.activeElement.blur()">
|
|
<span class="iconify lucide--x size-4"></span>
|
|
</button>
|
|
</div>
|
|
<div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
|
|
<div role="tablist" class="tabs tabs-sm tabs-border">
|
|
<div role="tab" class="tab tab-active gap-2 px-3 font-medium">
|
|
<span>All</span>
|
|
<div class="badge badge-sm">4</div>
|
|
</div>
|
|
<div role="tab" class="tab gap-2 px-3"><span>Team</span></div>
|
|
<div role="tab" class="tab gap-2 px-3"><span>AI</span></div>
|
|
<div role="tab" class="tab gap-2 px-3"><span>@mention</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
|
|
<div class="avatar avatar-online size-12">
|
|
<img src="../../assets/images//avatars/2.png"
|
|
class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
|
alt="" />
|
|
</div>
|
|
<div class="grow">
|
|
<p class="text-sm leading-tight">Lena submitted a draft for review.</p>
|
|
<p class="text-base-content/60 text-xs">15 min ago</p>
|
|
<div class="mt-2 flex items-center gap-2">
|
|
<button class="btn btn-sm btn-primary">Approve</button>
|
|
<button class="btn btn-sm btn-outline border-base-300">Decline</button>
|
|
</div>
|
|
</div>
|
|
<div class="status status-primary absolute end-4 top-4 size-1.5"></div>
|
|
</div>
|
|
<hr class="border-base-300 border-dashed" />
|
|
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
|
<div class="avatar avatar-offline size-12">
|
|
<img src="/images/avatars/4.png"
|
|
class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
|
|
alt="" />
|
|
</div>
|
|
<div class="grow">
|
|
<p class="text-sm leading-tight">Kai mentioned you in a project.</p>
|
|
<p class="text-base-content/60 text-xs">22 min ago</p>
|
|
<div
|
|
class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
|
|
<p class="text-sm">Check model inputs?</p>
|
|
<button class="btn btn-xs btn-ghost text-xs">
|
|
<span class="iconify lucide--reply size-3.5"></span>
|
|
Reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-base-300 border-dashed" />
|
|
<div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
|
|
<div class="avatar size-12">
|
|
<img src="/images/avatars/5.png"
|
|
class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
|
|
alt="" />
|
|
</div>
|
|
<div class="grow">
|
|
<p class="text-sm leading-tight">Your latest results are ready</p>
|
|
<div
|
|
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
|
<p class="text-sm">
|
|
Forecast Report
|
|
<span class="text-base-content/60 text-xs">(12 MB)</span>
|
|
</p>
|
|
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
|
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
|
|
<p class="text-sm">
|
|
Generated Summary
|
|
<span class="text-base-content/60 text-xs">(354 KB)</span>
|
|
</p>
|
|
<button class="btn btn-xs btn-square btn-ghost text-xs">
|
|
<span class="iconify lucide--arrow-down-to-line size-4"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-base-200" />
|
|
<div class="flex items-center justify-between px-2 py-2">
|
|
<button class="btn btn-sm btn-soft btn-primary">View All</button>
|
|
<div class="flex items-center gap-1">
|
|
<button class="btn btn-sm btn-square btn-ghost">
|
|
<span class="iconify lucide--check-check size-4"></span>
|
|
</button>
|
|
<button class="btn btn-sm btn-square btn-ghost">
|
|
<span class="iconify lucide--bell-ring size-4"></span>
|
|
</button>
|
|
<button class="btn btn-sm btn-square btn-ghost">
|
|
<span class="iconify lucide--settings size-4"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown dropdown-bottom dropdown-end w-full">
|
|
<div tabindex="0" role="button"
|
|
class="hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 transition-all group">
|
|
<div class="avatar">
|
|
<div class="bg-base-200 mask mask-squircle w-8">
|
|
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
|
|
</div>
|
|
</div>
|
|
<div class="grow -space-y-0.5">
|
|
<p class="text-sm font-medium text-white group-hover:text-black">Denish N</p>
|
|
<p class="text-base-content/60 text-xs text-white group-hover:text-black">@withden</p>
|
|
</div>
|
|
<i data-lucide="chevrons-up-down" class="size-4 text-white group-hover:text-black"></i>
|
|
</div>
|
|
<ul role="menu" tabindex="0"
|
|
class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
|
|
<li>
|
|
<a href="./pages/settings.html">
|
|
<i data-lucide="user" class="size-4"></i>
|
|
<span>Tài khoản</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/admin/system/settings">
|
|
<i data-lucide="Settings" class="size-4"></i>
|
|
<span>Cài đặt hệ thống</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 relative">
|
|
<ul class="menu menu-horizontal">
|
|
<li>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="house" class="tw-sla menu-icon-color"></i>
|
|
<a href="/"><span class="grow">Home</span></a>
|
|
</div>
|
|
</li>
|
|
{% for _menu_item in global.main_menu %}
|
|
{% assign _menu_children = _menu_item.menu %}
|
|
{% if _menu_item.id != 'system' %}
|
|
<li
|
|
class="{%- for _item in _menu_children -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
|
|
<div class="flex items-center gap-3">
|
|
{% if _menu_item.icon_class != '' %}
|
|
<i data-lucide="{{_menu_item.icon_class}}" class="tw-sla menu-icon-color"></i>
|
|
{% endif %}
|
|
<span class="grow">{{ _menu_item.name }}</span>
|
|
</div>
|
|
<ul class="p-2 submenu">
|
|
{% for _item in _menu_children %}
|
|
<li class="{% if _item.url == global.url %} active {% endif %}"><a href="{{ _item.url }}"
|
|
style="white-space: nowrap">{{ _item.name }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div> |