implementação de mudança de interface

Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed 2026-03-30 09:53:11 -03:00
1 parent d445aa03cf
commit d4e1b297ae
24 files changed
+1982 -47

No files matched your search

+46 -45
View File
@@ -102,6 +102,21 @@ const component: ClosureComponent<Attrs> = () => {
return { name, href, active: vnode.attrs["page"] === n };
});
// --- BEGIN UNIFI THEME ---
const NAV_ICONS: Record<string, string> = {
"Overview": "nav-overview",
"Devices": "nav-devices",
"Faults": "nav-faults",
"Presets": "nav-presets",
"Provisions": "nav-provisions",
"Virtual Parameters": "nav-virtualparams",
"Files": "nav-files",
"Config": "nav-config",
"Permissions": "nav-permissions",
"Users": "nav-users",
};
// --- END UNIFI THEME ---
return [
<div>
<TransitionRoot show={!!sidebarOpen} duration={300}>
@@ -128,7 +143,8 @@ const component: ClosureComponent<Attrs> = () => {
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
{/* --- BEGIN UNIFI THEME --- */}
<div class="relative flex-1 flex flex-col max-w-xs w-full unifi-sidebar">
<TransitionChild
enter="ease-in-out duration-300"
enterFrom="opacity-0"
@@ -160,24 +176,21 @@ const component: ClosureComponent<Attrs> = () => {
<a
key={item.name}
href={item.href}
class={classNames(
item.active
? "bg-stone-100 text-stone-900"
: "text-stone-600 hover:bg-stone-50 hover:text-stone-900",
"group flex items-center px-2 py-2 text-base font-medium rounded-md",
)}
class={`unifi-nav-item${item.active ? " active" : ""}`}
>
<Icon name={NAV_ICONS[item.name] || "nav-overview"} class="h-[18px] w-[18px]" />
{item.name}
</a>
))}
</nav>
</div>
<div class="p-2">
<div class="unifi-sidebar-footer">
{window.username ? (
<div class="flex items-center px-2 text-stone-600 text-base">
<div class="unifi-user-info">
<Icon name="nav-users" class="h-4 w-4" />
{window.username}
<button
class="ml-auto text-base font-medium text-cyan-600 hover:text-cyan-500"
class="unifi-logout-btn"
onclick={(e) => {
e.target.disabled = true;
store
@@ -197,19 +210,13 @@ const component: ClosureComponent<Attrs> = () => {
</button>
</div>
) : (
<div class="px-2">
<a
class="text-base font-medium text-cyan-700 hover:text-cyan-900"
href=""
>
Log in
</a>
<div class="unifi-user-info">
<a class="unifi-logout-btn" href="">Log in</a>
</div>
)}
</div>
<div class="text-sm font-mono text-stone-400 text-right p-2">
v{VERSION}
</div>
<div class="unifi-version">v{VERSION}</div>
{/* --- END UNIFI THEME --- */}
</div>
</TransitionChild>
<div class="flex-shrink-0 w-14">
@@ -219,35 +226,33 @@ const component: ClosureComponent<Attrs> = () => {
</TransitionRoot>
{/* Static sidebar for desktop */}
{/* --- BEGIN UNIFI THEME --- */}
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<div class="flex-1 flex flex-col min-h-0 border-r border-stone-200 bg-white">
<div class="flex-1 flex flex-col min-h-0 unifi-sidebar">
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4">
<img class="h-10 w-auto" src={LOGO_SVG} alt="GenieACS" />
<div class="unifi-brand">
<img src={LOGO_SVG} alt="GenieACS" />
</div>
<nav class="mt-5 flex-1 px-2 bg-white flex flex-col gap-1">
<nav class="mt-5 flex-1 px-2 flex flex-col gap-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
class={classNames(
item.active
? "bg-stone-100 text-stone-900"
: "text-stone-600 hover:bg-stone-50 hover:text-stone-900",
"group flex items-center px-2 py-2 text-sm font-medium rounded-md",
)}
class={`unifi-nav-item${item.active ? " active" : ""}`}
>
<Icon name={NAV_ICONS[item.name] || "nav-overview"} class="h-[18px] w-[18px]" />
{item.name}
</a>
))}
</nav>
</div>
<div class="p-2">
<div class="unifi-sidebar-footer">
{window.username ? (
<div class="flex items-center px-2 text-stone-600 text-sm">
<div class="unifi-user-info">
<Icon name="nav-users" class="h-4 w-4" />
{window.username}
<button
class="ml-auto text-sm font-medium text-cyan-700 hover:text-cyan-900"
class="unifi-logout-btn"
onclick={(e) => {
e.target.disabled = true;
store
@@ -267,23 +272,18 @@ const component: ClosureComponent<Attrs> = () => {
</button>
</div>
) : (
<div class="px-2">
<a
class="text-sm font-medium text-cyan-700 hover:text-cyan-900"
href=""
>
Log in
</a>
<div class="unifi-user-info">
<a class="unifi-logout-btn" href="">Log in</a>
</div>
)}
</div>
<div class="text-xs font-mono text-stone-400 text-right p-2">
v{VERSION}
</div>
<div class="unifi-version">v{VERSION}</div>
</div>
</div>
<div class="md:pl-64 flex flex-col flex-1">
<div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-stone-100">
{/* --- END UNIFI THEME --- */}
<div class="md:pl-64 flex flex-col flex-1 unifi-main-bg">
{/* --- BEGIN UNIFI THEME --- */}
<div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button
type="button"
class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-stone-500 hover:text-stone-900 focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-cyan-500"
@@ -297,6 +297,7 @@ const component: ClosureComponent<Attrs> = () => {
<Icon name="menu" class="h-6 w-6" />
</button>
</div>
{/* --- END UNIFI THEME --- */}
<main class="flex-1">
<div class="py-6">
<div class="px-4 sm:px-6 md:px-8">