mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-07-27 10:31:38 +08:00
🛸 Sync 2026-06-11 08:48:12
This commit is contained in:
github-actions[bot]
parent
8f3e09dae8
commit
8287bb527a
@ -16,7 +16,11 @@ header {
|
||||
}
|
||||
|
||||
.brand {
|
||||
@apply hover:text-primary text-foreground inline-block shrink-0 text-xl font-semibold tracking-tight no-underline transition-all duration-200 hover:-translate-y-0.5 max-md:order-1 max-md:flex-1 max-md:text-lg;
|
||||
@apply hover:text-primary text-foreground inline-block shrink-0 text-xl font-semibold tracking-tight no-underline transition-all duration-200 hover:-translate-y-0.5 max-md:flex-1 max-md:text-lg;
|
||||
|
||||
[data-nav-type="sidebar"] & {
|
||||
@apply mr-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
@ -78,26 +82,50 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-controls {
|
||||
@apply max-md:order-last max-md:flex max-md:shrink-0 max-md:items-center md:hidden;
|
||||
.navigation-controls {
|
||||
@apply mr-3 flex shrink-0 items-center md:hidden;
|
||||
|
||||
& .mobile-menu-toggle {
|
||||
@apply max-md:ml-5 max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;
|
||||
[data-nav-type="sidebar"] & {
|
||||
@apply md:flex;
|
||||
}
|
||||
|
||||
& .navigation-toggle {
|
||||
@apply cursor-pointer transition-all duration-200 hover:scale-105 active:scale-95;
|
||||
|
||||
& svg {
|
||||
@apply max-md:text-foreground size-5 max-md:transition-transform max-md:duration-200;
|
||||
@apply text-foreground size-5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
& svg {
|
||||
@apply max-md:rotate-180;
|
||||
& .navigation-toggle-line {
|
||||
transform-box: fill-box;
|
||||
@apply origin-center transition-[transform,opacity] duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
& .navigation-toggle-line-top {
|
||||
transform: translateY(5px) rotate(45deg);
|
||||
}
|
||||
|
||||
& .navigation-toggle-line-middle {
|
||||
transform: scaleX(0.35);
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
& .navigation-toggle-line-bottom {
|
||||
transform: translate(3.75px, -5px) rotate(-45deg) scaleX(2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
& .navigation-toggle-line {
|
||||
@apply transition-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#indicators {
|
||||
@apply flex shrink-0 flex-row-reverse gap-5 max-md:order-2 max-md:shrink-0 md:gap-8;
|
||||
@apply flex shrink-0 flex-row-reverse gap-5 md:gap-8;
|
||||
|
||||
& span[data-indicator] {
|
||||
@apply before:text-foreground size-5 cursor-pointer text-[0px] before:absolute before:size-5 before:bg-current;
|
||||
@ -127,6 +155,103 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
body[data-nav-type="sidebar"] {
|
||||
/* body is flex-col in _base.css; sidebar layout needs a wrapping row */
|
||||
@apply md:flex-row md:flex-wrap;
|
||||
|
||||
& header {
|
||||
@apply md:basis-full;
|
||||
}
|
||||
|
||||
& #maincontent {
|
||||
@apply md:min-w-0 md:flex-1;
|
||||
}
|
||||
|
||||
& .header-crumb {
|
||||
@apply text-muted-foreground absolute left-1/2 m-0 hidden -translate-x-1/2 list-none items-center gap-2 p-0 text-sm md:flex;
|
||||
|
||||
& li {
|
||||
@apply m-0 list-none;
|
||||
}
|
||||
|
||||
& .crumb-sep {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
& .current {
|
||||
@apply text-foreground font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
& .sidebar-panel {
|
||||
@apply bg-header-bg border-border/60 sticky top-14 hidden h-[calc(100vh-3.5rem)] w-68 shrink-0 overflow-hidden border-r transition-[width,visibility] duration-300 md:block;
|
||||
}
|
||||
|
||||
&.sidebar-collapsed .sidebar-panel {
|
||||
@apply invisible w-0;
|
||||
}
|
||||
|
||||
& .sidebar-panel-inner {
|
||||
@apply flex h-full w-68 flex-col;
|
||||
}
|
||||
|
||||
& .sidebar-list {
|
||||
@apply m-0 flex-1 list-none overflow-y-auto p-3;
|
||||
|
||||
& li {
|
||||
@apply m-0 list-none;
|
||||
|
||||
&:first-child > .sidebar-category {
|
||||
@apply pt-1;
|
||||
}
|
||||
|
||||
&.active > .sidebar-link {
|
||||
@apply bg-header-interactive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .sidebar-category {
|
||||
@apply text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 px-3 pt-4 pb-1 text-sm font-semibold transition-colors duration-150 select-none;
|
||||
|
||||
& svg {
|
||||
@apply size-3 shrink-0 transition-transform duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
& li.section-collapsed > .sidebar-category svg {
|
||||
@apply -rotate-90;
|
||||
}
|
||||
|
||||
& .sidebar-section {
|
||||
@apply grid grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-out;
|
||||
}
|
||||
|
||||
& li.section-collapsed .sidebar-section {
|
||||
@apply grid-rows-[0fr];
|
||||
}
|
||||
|
||||
& .sidebar-submenu {
|
||||
@apply m-0 min-h-0 list-none overflow-hidden p-0;
|
||||
|
||||
& li.active > .sidebar-link {
|
||||
@apply bg-header-interactive;
|
||||
}
|
||||
}
|
||||
|
||||
& .sidebar-link {
|
||||
@apply text-foreground hover:bg-header-interactive block rounded-xl px-3 py-1.5 no-underline transition-all duration-150;
|
||||
}
|
||||
|
||||
& .sidebar-footer {
|
||||
@apply border-border/60 shrink-0 border-t p-3;
|
||||
|
||||
& .sidebar-link {
|
||||
@apply text-muted-foreground hover:text-error-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#maincontent {
|
||||
@apply max-w-max-width mx-auto min-h-[calc(100vh-4rem)] w-23/24 px-4 max-md:w-full max-md:px-3;
|
||||
|
||||
|
||||
@ -1,53 +1,88 @@
|
||||
.mobile-menu-overlay {
|
||||
@apply max-md:bg-overlay-base/60 max-md:invisible max-md:fixed max-md:inset-0 max-md:z-60 max-md:opacity-0 max-md:transition-opacity max-md:duration-300 md:hidden;
|
||||
@apply max-md:bg-header-bg max-md:invisible max-md:fixed max-md:top-14 max-md:right-0 max-md:bottom-0 max-md:left-0 max-md:z-60 max-md:opacity-0 max-md:transition-opacity max-md:duration-300 md:hidden;
|
||||
|
||||
&.mobile-menu-open {
|
||||
@apply max-md:visible max-md:opacity-100 max-md:backdrop-blur-md;
|
||||
|
||||
& .mobile-nav {
|
||||
@apply max-md:translate-x-0;
|
||||
}
|
||||
@apply max-md:visible max-md:opacity-100;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
@apply max-md:bg-page-bg max-md:absolute max-md:top-0 max-md:right-0 max-md:flex max-md:h-full max-md:w-80 max-md:translate-x-full max-md:flex-col max-md:shadow-2xl max-md:backdrop-blur-xl max-md:backdrop-saturate-150 max-md:transition-transform max-md:duration-300;
|
||||
@apply max-md:bg-header-bg max-md:absolute max-md:top-0 max-md:left-0 max-md:flex max-md:h-full max-md:w-full max-md:flex-col;
|
||||
|
||||
& .mobile-nav-header {
|
||||
@apply max-md:flex max-md:items-center max-md:justify-between max-md:p-6 max-md:pb-4;
|
||||
& .mobile-nav-body {
|
||||
@apply max-md:flex max-md:min-h-0 max-md:flex-1 max-md:flex-col max-md:px-5 max-md:pt-5;
|
||||
|
||||
& .mobile-nav-title {
|
||||
@apply max-md:text-foreground max-md:m-0 max-md:text-lg max-md:font-semibold;
|
||||
}
|
||||
|
||||
& .mobile-nav-close {
|
||||
@apply max-md:cursor-pointer max-md:transition-transform max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;
|
||||
|
||||
& svg {
|
||||
@apply max-md:text-foreground size-5 max-md:transition-transform max-md:duration-200;
|
||||
}
|
||||
& .mobile-nav-label {
|
||||
@apply max-md:text-muted-foreground max-md:mb-2 max-md:text-[0.6875rem] max-md:font-semibold max-md:tracking-[0.12em];
|
||||
}
|
||||
}
|
||||
|
||||
& .mobile-nav-list {
|
||||
@apply max-md:m-0 max-md:flex max-md:flex-1 max-md:list-none max-md:flex-col max-md:gap-0 max-md:overflow-y-auto max-md:p-0 max-md:px-6;
|
||||
@apply max-md:m-0 max-md:flex max-md:min-h-0 max-md:flex-1 max-md:list-none max-md:flex-col max-md:overflow-y-auto max-md:p-0 max-md:pb-4;
|
||||
|
||||
& .mobile-nav-item {
|
||||
@apply max-md:shrink-0;
|
||||
|
||||
& .mobile-nav-link {
|
||||
@apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:px-0 max-md:py-4 max-md:text-base max-md:font-medium max-md:no-underline max-md:transition-[color,transform] max-md:duration-300 max-md:hover:translate-x-1;
|
||||
@apply max-md:text-foreground max-md:hover:text-primary max-md:flex max-md:min-h-12 max-md:w-full max-md:items-center max-md:justify-between max-md:gap-4 max-md:px-0 max-md:py-2 max-md:text-lg max-md:leading-tight max-md:font-medium max-md:no-underline max-md:transition-colors max-md:duration-200;
|
||||
}
|
||||
|
||||
& .mobile-nav-chevron {
|
||||
@apply max-md:text-muted-foreground max-md:flex max-md:size-4 max-md:shrink-0 max-md:items-center max-md:justify-center max-md:transition-transform max-md:duration-300 max-md:ease-in-out;
|
||||
|
||||
& svg {
|
||||
@apply max-md:size-4;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > .mobile-nav-link {
|
||||
@apply max-md:text-primary;
|
||||
}
|
||||
|
||||
&.submenu-expanded {
|
||||
& .mobile-nav-chevron {
|
||||
@apply max-md:rotate-90;
|
||||
}
|
||||
}
|
||||
|
||||
& .mobile-nav-submenu {
|
||||
@apply max-md:m-0 max-md:list-none max-md:overflow-hidden max-md:p-0 max-md:transition-all max-md:duration-300 max-md:ease-in-out;
|
||||
@apply max-md:m-0 max-md:list-none max-md:overflow-hidden max-md:p-0 max-md:transition-[max-height,opacity] max-md:duration-300 max-md:ease-in-out;
|
||||
|
||||
& .mobile-nav-subitem {
|
||||
@apply max-md:border-border/20 max-md:border-b max-md:last:border-b-0;
|
||||
& .mobile-nav-sublink {
|
||||
@apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:py-3 max-md:pr-0 max-md:pl-4 max-md:text-sm max-md:font-normal max-md:no-underline max-md:transition-[color,transform] max-md:duration-300 max-md:hover:translate-x-1;
|
||||
@apply max-md:text-default-foreground max-md:hover:text-primary max-md:flex max-md:min-h-10 max-md:w-full max-md:items-center max-md:py-2 max-md:pr-0 max-md:pl-4 max-md:text-[0.9375rem] max-md:font-normal max-md:no-underline max-md:transition-colors max-md:duration-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .mobile-nav-footer {
|
||||
@apply max-md:border-border/30 max-md:flex max-md:shrink-0 max-md:items-center max-md:justify-between max-md:border-t max-md:px-5 max-md:py-4;
|
||||
|
||||
& .mobile-nav-footer-action {
|
||||
@apply max-md:flex max-md:items-center;
|
||||
}
|
||||
|
||||
& .mobile-nav-logout {
|
||||
@apply max-md:text-foreground max-md:hover:text-primary max-md:text-sm max-md:font-medium max-md:no-underline max-md:transition-colors max-md:duration-200;
|
||||
}
|
||||
|
||||
& .theme-switcher {
|
||||
& .theme-option {
|
||||
@apply max-md:px-2 max-md:py-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
& .mobile-nav-link,
|
||||
& .mobile-nav-chevron,
|
||||
& .mobile-nav-submenu,
|
||||
& .mobile-nav-sublink,
|
||||
& .mobile-nav-logout {
|
||||
@apply max-md:transition-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
return baseclass.extend({
|
||||
__init__() {
|
||||
ui.menu.load().then((tree) => this.render(tree));
|
||||
this.initMobileMenu();
|
||||
this.initNavigationControls();
|
||||
this.initUciIndicator();
|
||||
},
|
||||
|
||||
@ -21,42 +21,99 @@ return baseclass.extend({
|
||||
};
|
||||
},
|
||||
|
||||
initMobileMenu() {
|
||||
initNavigationControls() {
|
||||
const overlay = document.querySelector("#mobile-menu-overlay");
|
||||
const menuToggle = document.querySelector("#mobile-menu-btn");
|
||||
const closeBtn = document.querySelector("#mobile-nav-close");
|
||||
const navigationToggle = document.querySelector("#navigation-toggle");
|
||||
|
||||
if (!menuToggle || !overlay) return;
|
||||
if (!navigationToggle || !overlay) return;
|
||||
|
||||
menuToggle.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = overlay.classList.contains("mobile-menu-open");
|
||||
const desktop = window.matchMedia("(min-width: 768px)");
|
||||
const SIDEBAR_COLLAPSED_KEY = "aurora.sidebarCollapsed";
|
||||
|
||||
overlay.classList.toggle("mobile-menu-open", !isOpen);
|
||||
menuToggle.classList.toggle("active", !isOpen);
|
||||
menuToggle.setAttribute("aria-expanded", !isOpen);
|
||||
document.body.style.overflow = isOpen ? "" : "hidden";
|
||||
const isDesktopSidebar = () =>
|
||||
desktop.matches && document.body.dataset.navType === "sidebar";
|
||||
|
||||
if (isOpen) {
|
||||
document
|
||||
.querySelectorAll(".mobile-nav-item.submenu-expanded")
|
||||
.forEach((item) => {
|
||||
item.classList.remove("submenu-expanded");
|
||||
const submenu = item.querySelector(".mobile-nav-submenu");
|
||||
if (submenu) {
|
||||
submenu.style.maxHeight = "0";
|
||||
submenu.style.opacity = "0";
|
||||
}
|
||||
});
|
||||
const resetMobileSubmenus = () => {
|
||||
document
|
||||
.querySelectorAll(".mobile-nav-item.submenu-expanded")
|
||||
.forEach((item) => {
|
||||
item.classList.remove("submenu-expanded");
|
||||
const submenu = item.querySelector(".mobile-nav-submenu");
|
||||
if (submenu) {
|
||||
submenu.style.maxHeight = "0";
|
||||
submenu.style.opacity = "0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateToggleState = (expanded) => {
|
||||
navigationToggle.classList.toggle("is-expanded", expanded);
|
||||
navigationToggle.setAttribute("aria-expanded", expanded);
|
||||
};
|
||||
|
||||
const closeMobileNavigation = () => {
|
||||
overlay.classList.remove("mobile-menu-open");
|
||||
document.body.style.overflow = "";
|
||||
resetMobileSubmenus();
|
||||
};
|
||||
|
||||
const getNavigationExpanded = () => {
|
||||
if (isDesktopSidebar()) {
|
||||
return !document.body.classList.contains("sidebar-collapsed");
|
||||
}
|
||||
|
||||
return !desktop.matches && overlay.classList.contains("mobile-menu-open");
|
||||
};
|
||||
|
||||
const setNavigationExpanded = (expanded) => {
|
||||
if (isDesktopSidebar()) {
|
||||
closeMobileNavigation();
|
||||
|
||||
const collapsed = !expanded;
|
||||
document.body.classList.toggle("sidebar-collapsed", collapsed);
|
||||
localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
|
||||
updateToggleState(expanded);
|
||||
return;
|
||||
}
|
||||
|
||||
if (desktop.matches) {
|
||||
closeMobileNavigation();
|
||||
updateToggleState(false);
|
||||
return;
|
||||
}
|
||||
|
||||
overlay.classList.toggle("mobile-menu-open", expanded);
|
||||
document.body.style.overflow = expanded ? "hidden" : "";
|
||||
|
||||
if (!expanded) resetMobileSubmenus();
|
||||
|
||||
updateToggleState(expanded);
|
||||
};
|
||||
|
||||
const toggleNavigation = () =>
|
||||
setNavigationExpanded(!getNavigationExpanded());
|
||||
|
||||
const syncNavigationState = () => {
|
||||
closeMobileNavigation();
|
||||
|
||||
if (isDesktopSidebar()) {
|
||||
const collapsed =
|
||||
localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "true";
|
||||
document.body.classList.toggle("sidebar-collapsed", collapsed);
|
||||
updateToggleState(!collapsed);
|
||||
return;
|
||||
}
|
||||
|
||||
updateToggleState(false);
|
||||
};
|
||||
|
||||
navigationToggle.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
toggleNavigation();
|
||||
});
|
||||
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => menuToggle.click());
|
||||
}
|
||||
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target === overlay) menuToggle.click();
|
||||
if (e.target === overlay) setNavigationExpanded(false);
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
@ -64,10 +121,13 @@ return baseclass.extend({
|
||||
e.key === "Escape" &&
|
||||
overlay.classList.contains("mobile-menu-open")
|
||||
) {
|
||||
menuToggle.click();
|
||||
setNavigationExpanded(false);
|
||||
}
|
||||
});
|
||||
|
||||
desktop.addEventListener("change", syncNavigationState);
|
||||
syncNavigationState();
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const link = e.target.closest(".mobile-nav-link");
|
||||
if (!link) return;
|
||||
@ -105,24 +165,74 @@ return baseclass.extend({
|
||||
|
||||
renderMobileMenu(tree, url) {
|
||||
const list = document.querySelector("#mobile-nav-list");
|
||||
const footerAction = document.querySelector("#mobile-nav-footer-action");
|
||||
const children = ui.menu.getChildren(tree);
|
||||
|
||||
if (!list || !children.length) return;
|
||||
if (!list || !footerAction || !children.length) return;
|
||||
|
||||
list.innerHTML = "";
|
||||
footerAction.innerHTML = "";
|
||||
|
||||
children.forEach((child) => {
|
||||
const submenu = ui.menu.getChildren(child);
|
||||
const hasSubmenu = submenu.length > 0;
|
||||
const isActive = L.env.dispatchpath[1] === child.name;
|
||||
|
||||
const li = E("li", { class: "mobile-nav-item" }, [
|
||||
if (child.name === "logout") {
|
||||
footerAction.appendChild(
|
||||
E(
|
||||
"a",
|
||||
{
|
||||
class: "mobile-nav-logout",
|
||||
href: L.url(url, child.name),
|
||||
},
|
||||
[_(child.title)],
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const itemClasses = [
|
||||
"mobile-nav-item",
|
||||
hasSubmenu ? "has-submenu" : "",
|
||||
isActive ? "active" : "",
|
||||
].filter(Boolean);
|
||||
const linkChildren = [_(child.title)];
|
||||
|
||||
if (hasSubmenu) {
|
||||
linkChildren.push(
|
||||
E(
|
||||
"span",
|
||||
{
|
||||
class: "mobile-nav-chevron",
|
||||
"aria-hidden": "true",
|
||||
},
|
||||
[
|
||||
E(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 20 20",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
"stroke-width": "1.8",
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round",
|
||||
},
|
||||
[E("path", { d: "m7.5 5 5 5-5 5" })],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const li = E("li", { class: itemClasses.join(" ") }, [
|
||||
E(
|
||||
"a",
|
||||
{
|
||||
class: "mobile-nav-link",
|
||||
href: hasSubmenu ? "#" : L.url(url, child.name),
|
||||
},
|
||||
[_(child.title)],
|
||||
linkChildren,
|
||||
),
|
||||
]);
|
||||
|
||||
@ -216,7 +326,10 @@ return baseclass.extend({
|
||||
if (level === 0) {
|
||||
const navType = document.body?.dataset?.navType || "mega-menu";
|
||||
|
||||
if (navType === "mega-menu") {
|
||||
if (navType === "sidebar") {
|
||||
this.renderSidebar(children, url);
|
||||
return ul;
|
||||
} else if (navType === "mega-menu") {
|
||||
this.initMegaMenu(children, url, ul);
|
||||
} else {
|
||||
this.initBoxedDropdown(children, url, ul);
|
||||
@ -235,6 +348,112 @@ return baseclass.extend({
|
||||
return ul;
|
||||
},
|
||||
|
||||
renderSidebar(children, url) {
|
||||
const list = document.querySelector("#sidebar-list");
|
||||
const footer = document.querySelector("#sidebar-footer");
|
||||
|
||||
if (!list) return;
|
||||
|
||||
const KEY = "aurora.sidebarSections";
|
||||
const collapsed = new Set(JSON.parse(localStorage.getItem(KEY) || "[]"));
|
||||
const crumb = [];
|
||||
|
||||
const link = (href, title) =>
|
||||
E("a", { class: "sidebar-link", href }, [_(title)]);
|
||||
|
||||
children.forEach((child) => {
|
||||
const submenu = ui.menu.getChildren(child);
|
||||
|
||||
if (L.env.dispatchpath[1] === child.name) {
|
||||
crumb.push(_(child.title));
|
||||
|
||||
const page = submenu.find(
|
||||
(item) => L.env.dispatchpath[2] === item.name,
|
||||
);
|
||||
if (page) crumb.push(_(page.title));
|
||||
}
|
||||
|
||||
if (child.name === "logout") {
|
||||
(footer || list).appendChild(link(L.url(url, child.name), child.title));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!submenu.length) {
|
||||
const active = L.env.dispatchpath[1] === child.name;
|
||||
|
||||
list.appendChild(
|
||||
E("li", { class: active ? "active" : "" }, [
|
||||
link(L.url(url, child.name), child.title),
|
||||
]),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const ul = E("ul", { class: "sidebar-submenu" });
|
||||
|
||||
submenu.forEach((item) => {
|
||||
const active =
|
||||
L.env.dispatchpath[1] === child.name &&
|
||||
L.env.dispatchpath[2] === item.name;
|
||||
|
||||
ul.appendChild(
|
||||
E("li", { class: active ? "active" : "" }, [
|
||||
link(L.url(url, child.name, item.name), item.title),
|
||||
]),
|
||||
);
|
||||
});
|
||||
|
||||
list.appendChild(
|
||||
E(
|
||||
"li",
|
||||
{
|
||||
class: collapsed.has(child.name) ? "section-collapsed" : "",
|
||||
"data-section": child.name,
|
||||
},
|
||||
[
|
||||
E(
|
||||
"span",
|
||||
{
|
||||
class: "sidebar-category",
|
||||
role: "button",
|
||||
"aria-expanded": !collapsed.has(child.name),
|
||||
},
|
||||
[
|
||||
_(child.title),
|
||||
E(
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
|
||||
),
|
||||
],
|
||||
),
|
||||
E("div", { class: "sidebar-section" }, [ul]),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
list.addEventListener("click", (e) => {
|
||||
const category = e.target.closest(".sidebar-category");
|
||||
const item = category?.parentNode;
|
||||
|
||||
if (!item?.dataset.section) return;
|
||||
|
||||
const isCollapsed = item.classList.toggle("section-collapsed");
|
||||
category.setAttribute("aria-expanded", !isCollapsed);
|
||||
|
||||
collapsed[isCollapsed ? "add" : "delete"](item.dataset.section);
|
||||
localStorage.setItem(KEY, JSON.stringify([...collapsed]));
|
||||
});
|
||||
|
||||
const crumbEl = document.querySelector("#header-crumb");
|
||||
|
||||
crumb.forEach((title, i) => {
|
||||
if (i) crumbEl?.appendChild(E("li", { class: "crumb-sep" }, ["/"]));
|
||||
crumbEl?.appendChild(
|
||||
E("li", { class: i === crumb.length - 1 ? "current" : "" }, [title]),
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
initMegaMenu(children, url, ul) {
|
||||
const container = document.querySelector(".desktop-menu-container");
|
||||
const overlay = document.querySelector(".desktop-menu-overlay");
|
||||
|
||||
@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk
|
||||
LUCI_TITLE:=Aurora Theme (A modern browser theme built with Vite and Tailwind CSS)
|
||||
LUCI_DEPENDS:=+luci-base
|
||||
|
||||
PKG_VERSION:=0.12.4
|
||||
PKG_RELEASE:=21
|
||||
PKG_VERSION:=0.12.5
|
||||
PKG_RELEASE:=22
|
||||
PKG_LICENSE:=Apache-2.0
|
||||
|
||||
LUCI_MINIFY_CSS:=
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -175,17 +175,20 @@
|
||||
{% if (!blank_page): %}
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<a class="brand" href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a>
|
||||
<ul class="nav" id="topmenu" style="display:none"></ul>
|
||||
<div class="mobile-controls">
|
||||
<div class="mobile-menu-toggle" id="mobile-menu-btn" title="{{ _('Menu') }}">
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M195.75 162H767.25C771.41 161.987 775.532 162.99 779.38 164.954C783.227 166.917 786.726 169.802 789.674 173.442C792.623 177.083 794.964 181.409 796.564 186.172C798.164 190.935 798.992 196.043 799 201.204V208.667C798.992 213.333 798.164 218 796.564 222.667C794.964 227.333 792.623 231.067 789.674 234.707C786.726 238.347 783.227 241.24 779.38 243.2C775.532 245.16 771.41 246 767.25 246H195.75C191.59 246 187.468 245.16 183.62 243.2C179.773 241.24 176.275 238.347 173.326 234.707C170.378 231.067 168.036 227.333 166.436 222.667C164.836 218 164.008 213.333 164 208.667V201.204C164.008 196.043 164.836 190.935 166.436 186.172C168.036 181.409 170.378 177.083 173.326 173.442C176.275 169.802 179.773 166.917 183.62 164.954C187.468 162.99 191.59 161.987 195.75 162Z" fill="currentColor"/>
|
||||
<path d="M354.733 458H767.267C771.424 457.987 775.544 459.001 779.39 460.987C783.235 462.972 786.732 465.888 789.679 469.57C792.626 473.25 794.966 477.624 796.565 482.441C798.164 487.256 798.992 492.421 799 497.639V504.252C798.992 508.971 798.164 513.689 796.565 518.408C794.966 523.126 792.626 526.901 789.679 530.581C786.732 534.262 783.235 537.187 779.39 539.169C775.544 541.151 771.424 542 767.267 542H354.733C350.577 542 346.459 541.151 342.615 539.169C338.771 537.187 335.276 534.262 332.328 530.581C329.382 526.901 327.041 523.126 325.441 518.408C323.841 513.689 323.011 508.971 323 504.252V497.639C323.008 492.421 323.836 487.256 325.435 482.441C327.034 477.624 329.375 473.25 332.321 469.57C335.269 465.888 338.765 462.972 342.61 460.987C346.456 459.001 350.576 457.987 354.733 458Z" fill="currentColor"/>
|
||||
<path d="M195.75 758H767.25C771.41 758 775.534 758.933 779.381 760.941C783.229 762.907 786.727 765.793 789.675 769.436C792.624 773.079 794.964 777.407 796.564 782.171C798.164 786.936 798.992 792.045 799 797.207V804.667C798.989 809.333 798.16 814 796.558 818.667C794.957 823.333 792.615 827.067 789.667 830.707C786.718 834.347 783.221 837.24 779.375 839.2C775.529 841.067 771.409 842 767.25 842H195.75C191.59 842 187.468 841.067 183.62 839.2C179.773 837.24 176.275 834.347 173.326 830.707C170.378 827.067 168.036 823.333 166.436 818.667C164.836 814 164.008 809.333 164 804.667V797.207C164.008 792.047 164.836 786.939 166.436 782.175C168.036 777.411 170.378 773.086 173.326 769.445C176.275 765.805 179.773 762.921 183.62 760.957C187.468 758.994 191.59 758 195.75 758Z" fill="currentColor"/>
|
||||
<div class="navigation-controls">
|
||||
<div class="navigation-toggle" id="navigation-toggle" title="{{ _('Menu') }}" role="button" aria-expanded="false">
|
||||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<line class="navigation-toggle-line navigation-toggle-line-top" x1="2.5" y1="5" x2="17.5" y2="5"/>
|
||||
<line class="navigation-toggle-line navigation-toggle-line-middle" x1="2.5" y1="10" x2="17.5" y2="10"/>
|
||||
<line class="navigation-toggle-line navigation-toggle-line-bottom" x1="2.5" y1="15" x2="10" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<a class="brand" href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a>
|
||||
<ul class="nav" id="topmenu" style="display:none"></ul>
|
||||
{% if (nav_submenu_type == 'sidebar'): %}
|
||||
<ol class="header-crumb" id="header-crumb"></ol>
|
||||
{% endif %}
|
||||
<div id="indicators" class="pull-right"></div>
|
||||
</div>
|
||||
|
||||
@ -198,9 +201,29 @@
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
{% if (nav_submenu_type == 'sidebar'): %}
|
||||
<aside class="sidebar-panel" aria-label="{{ _('Navigation') }}">
|
||||
<nav class="sidebar-panel-inner">
|
||||
<ul class="sidebar-list" id="sidebar-list"></ul>
|
||||
<div class="sidebar-footer" id="sidebar-footer"></div>
|
||||
</nav>
|
||||
</aside>
|
||||
<script>
|
||||
if (localStorage.getItem('aurora.sidebarCollapsed') === 'true') {
|
||||
document.body.classList.add('sidebar-collapsed');
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<div class="mobile-menu-overlay" id="mobile-menu-overlay">
|
||||
<nav class="mobile-nav">
|
||||
<div class="mobile-nav-header">
|
||||
<div class="mobile-nav-body">
|
||||
<div class="mobile-nav-label">{{ _('Navigation') }}</div>
|
||||
<ul class="mobile-nav-list" id="mobile-nav-list">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mobile-nav-footer">
|
||||
<div class="mobile-nav-footer-action" id="mobile-nav-footer-action"></div>
|
||||
<div class="theme-switcher mobile">
|
||||
<label class="theme-option active" data-theme="device">
|
||||
<input type="radio" name="mobile-theme" value="device" checked>
|
||||
@ -221,17 +244,7 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mobile-nav-close" id="mobile-nav-close">
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M788.425 758H210.575C193.137 758 179 774.691 179 795.281V804.719C179 825.309 193.137 842 210.575 842H788.425C805.863 842 820 825.309 820 804.719V795.281C820 774.691 805.863 758 788.425 758Z" fill="currentColor"/>
|
||||
<path d="M474.439 458H210.561C193.131 458 179 474.552 179 494.969V505.031C179 525.448 193.131 542 210.561 542H474.439C491.869 542 506 525.448 506 505.031V494.969C506 474.552 491.869 458 474.439 458Z" fill="currentColor"/>
|
||||
<path d="M474.439 162H210.561C193.131 162 179 178.529 179 198.918V209.082C179 229.471 193.131 246 210.561 246H474.439C491.869 246 506 229.471 506 209.082V198.918C506 178.529 491.869 162 474.439 162Z" fill="currentColor"/>
|
||||
<path d="M869.193 312.212L713.513 135.652C695.095 114.783 665.231 114.783 646.813 135.652C628.396 156.521 628.396 190.413 646.813 211.282L769.096 350L646.813 488.718C628.396 509.64 628.396 543.479 646.813 564.348C665.231 585.217 695.095 585.217 713.513 564.348L869.145 387.842C887.61 366.973 887.61 333.081 869.193 312.212Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="mobile-nav-list" id="mobile-nav-list">
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
2
quectel_MHI/Makefile
Executable file → Normal file
2
quectel_MHI/Makefile
Executable file → Normal file
@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk
|
||||
|
||||
PKG_NAME:=pcie_mhi
|
||||
PKG_VERSION:=1.3.8
|
||||
PKG_RELEASE:=12
|
||||
PKG_RELEASE:=13
|
||||
|
||||
include $(INCLUDE_DIR)/kernel.mk
|
||||
include $(INCLUDE_DIR)/package.mk
|
||||
|
||||
Loading…
Reference in New Issue
Block a user