@operato/menu 10.7.0 → 10.8.0

package/dist/src/ox-menu-portrait.js

@@ -1,31 +1,191 @@
+var OxMenuPortrait_1;
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { navigate } from '@operato/shell';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { i18next, localize } from '@operato/i18n';
+import { navigate, store } from '@operato/shell';
 import { ScrollbarStyles } from '@operato/styles';
 import { MenuPortraitStyles } from './menu-portrait-styles.js';
-let OxMenuPortrait = class OxMenuPortrait extends LitElement {
-    renderMenus(menus, activeTopLevel, activeMenu) {
+import { childrenOpenAs, menuMode, showsLabels, topNavigates } from './menu-mode.js';
+/**
+ * 시스템 항목을 담는 가짜 최상위.
+ *
+ * 팝업이 「어느 최상위에서 열렸나」를 하나의 값(`popped`)으로 들고 있어서, 시스템도 최상위인
+ * 것처럼 다룬다. 그래야 노브와 자리 계산이 한 벌로 남는다.
+ */
+const SYSTEM = { name: 'ox-menu-system' };
+let OxMenuPortrait = OxMenuPortrait_1 = class OxMenuPortrait extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.
+         *
+         * **옵트인이다.** 켜지 않은 앱은 지금과 한 글자도 다르지 않다. 모양이 함께 바뀌는 것은 취향이
+         * 아니라 요건이다 — 기존 모양은 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라 56px
+         * 에서 무너진다(§`menu-rail-styles.ts`).
+         */
+        this.rail = false;
+        /**
+         * 접힘 — 아이콘만.
+         *
+         * **주인은 이 컴포넌트가 아니다.** 폭을 정하는 요소는 `ox-menu-part` 이고(그쪽에 `min-width`
+         * 가 있다), 셸의 리사이즈 손잡이도 그 요소에 인라인 폭을 쓴다. 그래서 상태와 저장은 그쪽이
+         * 갖고 여기는 받아서 그린다.
+         */
+        this.collapsed = false;
+        /**
+         * 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.
+         *
+         * 그때 최상위는 **펼치기만** 한다. 누르는 순간 서랍이 닫히면 그 묶음의 나머지 하위를 볼
+         * 기회가 없다(§`ox-menu-part` 의 `drawer`).
+         */
+        this.drawer = false;
+        /**
+         * 시스템 항목 — 프로필 · 로그아웃 · 설정처럼 **앱이 아니라 프레임워크가 붙이는 것**들.
+         *
+         * 하드코딩하지 않는다. 각 패키지가 부팅할 때 `ADD_MORENDA` 로 등록하고(권한이 없으면 등록
+         * 자체를 안 한다), 우리는 그 목록을 그대로 그린다. 그래서 목록이 비면 이 자리도 없다.
+         */
+        /*
+         * private 을 두지 않는다 — 시험이 이 목록을 넣어 보고 「항목이 없으면 자리도 없다」를 확인한다.
+         * 앱에서는 store 가 채운다(아래 connectedCallback).
+         */
+        this.morendas = [];
+        /** 팝업 자리 — 누른 항목의 오른쪽. 세로는 그린 뒤 재서 맞춘다(§`fitPopup`). */
+        this._popLeft = 0;
+        this._popTop = 0;
+        /** 누른 항목의 윗선. 화면에 들어가면 이 자리를 쓴다. */
+        this._popPrefer = 0;
+        /**
+         * 팝업 밖을 누르면 닫는다.
+         *
+         * ── 팝업 안의 클릭을 막지 않는다 ────────────────────────────────────────
+         * 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 팝업 안을 눌러도 이 처리기가 받아
+         * 곧바로 닫히던 것을 막으려던 것인데, 그것이 **셸의 라우터까지 막았다.**
+         *
+         * 라우터는 document.body 에서 클릭을 받아 composedPath 로 A 를 찾고 preventDefault 한 뒤
+         * 화면만 바꾼다(@operato/shell 의 installRouter). 클릭이 거기까지 못 가면 브라우저의 기본
+         * 이동이 그대로 일어나 **페이지 전체가 다시 읽혔다.**
+         *
+         * 그래서 막지 않고, 여기서 「팝업 안이면 닫지 않는다」로 가른다. 줄을 누를 때 닫는 일은 그
+         * 줄의 처리기가 한다.
+         */
+        this._onDocClick = (e) => {
+            var _a, _b;
+            if (!this.popped) {
+                return;
+            }
+            const pop = (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, '.railpop');
+            if (pop && e.composedPath().includes(pop)) {
+                return;
+            }
+            this.popped = undefined;
+        };
+    }
+    /**
+     * 지금 어떤 모양으로 서 있나 — 세 플래그에서 하나로 모은다.
+     *
+     * 이 값과 그에 딸린 두 답(`하위를 어디에` · `최상위가 이동하나`)은 `menu-mode.ts` 에 있고
+     * 시험으로 못박혀 있다. 여기서 그때그때 판단하지 않는다 — 그렇게 하다가 네 번 깨졌다.
+     */
+    get mode() {
+        return menuMode({ rail: this.rail, collapsed: this.collapsed, drawer: this.drawer });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._onDocClick);
+        /*
+         * morenda 는 각 패키지의 부팅에서 **비동기로** 등록된다. 한 번 읽고 끝내면 늦게 붙는 것이
+         * 빠진다. 길이가 바뀔 때만 다시 그린다 — 이 목록은 늘어나기만 한다.
+         */
+        const read = () => { var _a, _b; return (((_b = (_a = store.getState()) === null || _a === void 0 ? void 0 : _a.more) === null || _b === void 0 ? void 0 : _b.morendas) || []); };
+        this.morendas = read();
+        this._unsubscribeStore = store.subscribe(() => {
+            const next = read();
+            if (next.length !== this.morendas.length) {
+                this.morendas = next;
+            }
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._onDocClick);
+        (_a = this._unsubscribeStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    /**
+     * 마우스를 올렸을 때 뜨는 글.
+     *
+     * ── 접혔을 때는 이름이 먼저다 ───────────────────────────────────────────
+     * 접히면 아이콘만 남으므로 **이름을 모른다.** 그때는 이름을 윗줄에 얹고 설명을 아랫줄에 둔다.
+     * 펼쳐져 있으면 이름은 이미 옆에 있으니 설명만 낸다.
+     *
+     * 줄바꿈으로 잇는다 — 대시로 이으면 설명 안의 대시와 겹쳐 「A — B — C」가 된다.
+     *
+     * 설명도 없고 이름도 안 보이는 경우가 아니면 아무것도 내지 않는다. 이름을 그대로 되풀이하는
+     * 툴팁은 소음이다.
+     */
+    hoverText(label, description) {
+        const name = typeof label === 'string' ? label : undefined;
+        if (showsLabels(this.mode)) {
+            return description || undefined;
+        }
+        return description && name ? `${name}\n${description}` : description || name;
+    }
+    /**
+     * @param depth 0 이면 최상위다. **하위도 `active` 를 달기 때문에** 깊이를 값으로 넘긴다 —
+     *   CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이
+     *   한 번 더 생각해야 하는 선택자다.
+     */
+    renderMenus(menus, activeTopLevel, activeMenu, depth = 0) {
         if (menus.length == 0) {
             return nothing;
         }
         return html `
       <ul>
         ${menus.map(menu => {
-            var { type, name, active, path, label = name, badge, icon, menus = [] } = menu;
+            var _a;
+            var { type, name, active, path, label = name, icon, menus = [], description } = menu;
             active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false;
-            badge = typeof badge === 'function' ? badge.call(menu) : (badge !== null && badge !== void 0 ? badge : false);
+            /*
+             * 건수는 값이거나 값을 내는 함수다. 함수의 반환은 화면에 그릴 수 있는 무엇이든 온다 —
+             * 숫자이거나, 갱신될 때마다 바뀌는 Lit 디렉티브다. 그래서 따로 담는다.
+             */
+            const badge = typeof menu.badge === 'function' ? menu.badge.call(menu) : ((_a = menu.badge) !== null && _a !== void 0 ? _a : false);
             return type == 'group'
                 ? html `<li group-label>${label}</li>`
                 : html `
-                <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
-                  <a href=${path || '#'}>
+                <!--
+                  popped — **지금 팝업을 연 항목**이다. active(지금 페이지)와 다른 뜻이라
+                  다른 표시를 준다. 접힌 레일에서 강조된 아이콘은 「지금 페이지」만 뜻하므로,
+                  이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.
+                -->
+                <!--
+                  active 와 current 는 뜻이 다르다.
+
+                    최상위의 active   하위가 펼쳐져 있다 (여닫힘)
+                    하위의 active     이것이 지금 페이지다
+                    current           이것이 지금 페이지다 — 어느 층이든
+
+                  active 하나로 두면 「펼쳐져 있다」와 「지금 페이지다」에 같은 강조가 걸려,
+                  최상위와 그 안의 한 줄이 나란히 강조된다.
+                -->
+                <li
+                  ?active=${activeTopLevel ? menu === activeTopLevel : active}
+                  ?current=${!!activeMenu && menu === activeMenu}
+                  ?popped=${this.popped === menu}
+                  ?top=${depth === 0}
+                  .menu=${menu}
+                  menu
+                >
+                  <a href=${path || '#'} title=${ifDefined(this.hoverText(label, description))}>
                     <md-icon filled>${icon || 'fiber_manual_record'}</md-icon>
                     <span>${label}</span>${badge !== false ? html `<div badge>${badge}</div>` : html ``}
                     ${menus.length > 0 ? html ` <md-icon filled submenu-button></md-icon> ` : html ``}
                   </a>
-                  ${menus && this.renderMenus(menus || [], activeMenu)}
+                  ${menus && this.renderMenus(menus || [], activeMenu, activeMenu, depth + 1)}
                 </li>
               `;
         })}
@@ -34,16 +194,337 @@ let OxMenuPortrait = class OxMenuPortrait extends LitElement {
     }
     render() {
         const { menus, activeTopLevel, activeMenu } = this;
-        return this.renderMenus(menus || [], activeTopLevel, activeMenu);
+        /*
+         * 레일이 아니어도 시스템 자리는 그린다.
+         *
+         * 한때 이것을 레일 가지 안에만 두었다. 그래서 **메뉴 감추기를 켜면 「관리」 한 줄이
+         * 사라졌다** — 그 설정이 레일을 끄기 때문이다.
+         *
+         * 레일을 감추기와 배타로 둔 것은 **접기** 때문이다. 이미 숨은 것을 접을 수는 없다. 그 판단은
+         * 접기에만 맞고, 시스템 자리는 접기와 아무 상관이 없다. 관계없는 것을 한 플래그에 묶었다.
+         */
+        if (!this.rail) {
+            return html `${this.renderMenus(menus || [], activeTopLevel, activeMenu)} ${this.renderSystem()}
+      ${this.renderPopped()}`;
+        }
+        return html `
+      <!--
+        접기 단추 — 맨 위에 둔다. 접힌 뒤 다시 펼치는 길이 같은 자리에 있어야 한다.
+      -->
+      <button
+        class="railtoggle"
+        title=${i18next.t(this.collapsed ? 'text.expand-menu' : 'text.collapse-menu')}
+        @click=${(e) => this.toggleCollapsed(e)}
+      >
+        <md-icon>${this.collapsed ? 'menu' : 'menu_open'}</md-icon>
+        <span>${i18next.t('text.collapse-menu')}</span>
+      </button>
+      ${this.renderMenus(menus || [], activeTopLevel, activeMenu)} ${this.renderSystem()} ${this.renderPopped()}
+    `;
+    }
+    /**
+     * 시스템 항목 — **바닥에 붙는다.**
+     *
+     * 프로필 · 로그아웃 · 설정은 하루에 한 번 여는 것이고, 일하는 화면들과 같은 깊이에 있으면
+     * 자주 여는 것을 밀어낸다. 그래서 메뉴 끝에 두고 사이를 빈 자리로 벌린다.
+     *
+     * 목록이 비면 이 자리도 없다 — 각 패키지가 권한이 없으면 등록 자체를 안 하므로, 비어 있는
+     * 것은 「볼 것이 없다」는 뜻이다. 빈 묶음 이름만 남겨 두면 눌러도 아무 일이 없다.
+     *
+     * 펼친 상태에서도 팝업으로 연다. 이 항목들은 **주소가 아니라 함수**라, 그 자리에서 펼치면
+     * 옆의 하위 메뉴들과 같은 모양이 되어 「눌러도 화면이 안 바뀌는 메뉴」로 읽힌다.
+     */
+    renderSystem() {
+        if (!this.morendas.length) {
+            return nothing;
+        }
+        /*
+         * **보통 메뉴 줄과 같은 모양으로 그린다.**
+         *
+         * 전에는 button.railitem 으로 따로 그렸고, 그 스타일이 레일에만 있어서 다른 모양에서는
+         * 꾸밈이 없었다. ul > li > a 로 두면 레일과 기존 모양이 각자 가진 규칙이 그대로 붙는다 —
+         * 여백 · 색 · hover · 접힘 · 화살표 · 팝업 표시까지.
+         *
+         * `li` 에 `menu` 를 달아도 `.menu` 속성은 주지 않는다. `renderMenus` 의 클릭 처리기가
+         * `menuElement?.menu` 로 가르므로, 그것이 없으면 이 줄을 건드리지 않고 아래 `@click` 이 받는다.
+         */
+        /* 팝업으로 열리는 모양에서는 팝업 상태로, 그 밖에서는 다른 최상위와 같은 상태로. */
+        const open = childrenOpenAs(this.mode) === 'popup' ? this.popped === SYSTEM : this.activeTopLevel === SYSTEM;
+        return html `
+      <div class="railspacer"></div>
+      <div group-label>${i18next.t('text.system')}</div>
+      <ul>
+        <li menu ?active=${open} ?popped=${childrenOpenAs(this.mode) === 'popup' && open} ?top=${true}>
+          <a href="#" title=${i18next.t('text.manage')} @click=${(e) => this.openSystem(e)}>
+            <md-icon filled>admin_panel_settings</md-icon>
+            <span>${i18next.t('text.manage')}</span>
+            <md-icon filled submenu-button></md-icon>
+          </a>
+          <!--
+            하위를 **그 자리에** 둔다 — 다른 최상위와 같은 규칙이다.
+
+            펼친 상태에서 팝업으로 열면 이 줄만 다르게 굴고, 특히 메뉴를 감추는 모드(모바일에서
+            쓴다)에서는 화면 어딘가에 고정된 팝업이 뜰 자리가 없다.
+
+            접힌 레일에서는 이 목록이 감춰지고(56px 안에 들어가지 않는다) 팝업이 대신 뜬다 —
+            그것도 다른 최상위와 같다.
+          -->
+          <ul>
+            ${this.morendas.map(morenda => html `<li>
+                <a href="#" @click=${(e) => this.runMorenda(e, morenda)}>
+                  ${morenda.icon}<span>${morenda.name}</span>
+                </a>
+              </li>`)}
+          </ul>
+        </li>
+      </ul>
+    `;
+    }
+    /** 시스템 항목은 주소가 아니라 함수다. 이동을 막고 부른다. */
+    runMorenda(e, morenda) {
+        var _a;
+        e.preventDefault();
+        this.popped = undefined;
+        (_a = morenda.action) === null || _a === void 0 ? void 0 : _a.call(morenda);
+    }
+    /**
+     * 시스템 줄을 누른다 — **다른 최상위와 똑같은 두 갈래다.**
+     *
+     * 한때 시스템만 자기 상태(`popped`)를 따로 썼다. 다른 최상위는 `activeTopLevel` 하나를 나눠
+     * 쓰는데 시스템만 그 밖에 있었으니, **다른 묶음이 열려 있어도 시스템이 함께 열렸다.** 한 번에
+     * 하나만 열리는 규칙에서 이 줄만 빠져 있었다.
+     *
+     * 이제 같은 상태를 쓴다. 접힌 레일에서만 팝업이고, 그때는 다른 최상위도 팝업이다.
+     */
+    openSystem(e) {
+        e.preventDefault();
+        /* 이 클릭이 document 로 올라가면 팝업이 바로 닫힌다. */
+        e.stopPropagation();
+        if (childrenOpenAs(this.mode) === 'popup') {
+            const rect = e.currentTarget.getBoundingClientRect();
+            this._popLeft = this.getBoundingClientRect().right + 8;
+            this._popPrefer = rect.top;
+            this._popTop = rect.top;
+            this.popped = this.popped === SYSTEM ? undefined : SYSTEM;
+            return;
+        }
+        /* 그 자리에서 열린다 — 하나만 열리는 규칙을 함께 쓴다. */
+        this.popped = undefined;
+        this.dispatchEvent(new CustomEvent('active-toplevel', {
+            bubbles: true,
+            detail: this.activeTopLevel === SYSTEM ? undefined : SYSTEM
+        }));
+    }
+    /**
+     * 접힌 상태에서 하위 메뉴를 팝업으로 낸다.
+     *
+     * 그 자리에서 열지 않는 이유는 56px 안에 들여쓴 목록이 들어가지 않기 때문이다. 접힌 레일에서
+     * 하위를 열 길이 없으면 **접는 순간 화면의 절반에 갈 수 없게 된다** — 접기가 기능이 아니라
+     * 함정이 된다.
+     */
+    renderPopped() {
+        const menu = this.popped;
+        if (!menu || childrenOpenAs(this.mode) !== 'popup') {
+            return nothing;
+        }
+        const system = menu === SYSTEM;
+        return html `
+      <!--
+        노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.
+
+        **팝업 안에 두면 안 보인다.** 팝업은 목록이 길 때 스크롤해야 해서 overflow-y: auto 인데,
+        그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의 왼쪽 선 밖으로 나가야
+        하므로 그 스크롤 박스에 잘린다. 그래서 형제로 두고 화면 좌표로 세운다.
+      -->
+      <div class="railknob" hidden></div>
+      <div class="railpop" style="left:${this._popLeft}px; top:${this._popTop}px">
+        <div class="phead">${system ? i18next.t('text.manage') : menu.label || menu.name}</div>
+        <!--
+          하위를 **레일 안쪽과 똑같이 그린다.**
+
+          한때 팝업 줄을 따로 만들었다(PopRow). 그래서 옮겨 적을 것을 세 번 빠뜨렸다 — 건수 ·
+          지금 페이지 · 그리고 처음에 이름과 아이콘. 빠뜨려도 오류가 나지 않아 화면을 보고서야
+          알았다.
+
+          같은 함수로 그리면 옮겨 적을 것이 없다. 앞으로 하위에 무엇을 더해도 팝업이 따라온다.
+        -->
+        ${system ? this.renderSystemRows() : this.renderMenus(menu.menus || [], this.activeMenu, this.activeMenu, 1)}
+      </div>
+    `;
+    }
+    /**
+     * 시스템 항목 줄들 — **이것만 따로 그린다.**
+     *
+     * morenda 는 주소가 아니라 함수를 갖는다(`action`). 아이콘과 이름도 Lit 템플릿이라 `Menu` 모양이
+     * 아니다. 억지로 `Menu` 로 바꿔 넘기면 그 변환이 또 옮겨 적는 자리가 된다.
+     */
+    renderSystemRows() {
+        return html `
+      <ul>
+        ${this.morendas.map(morenda => html `<li>
+            <a href="#" @click=${(e) => this.runMorenda(e, morenda)}>${morenda.icon}<span>${morenda.name}</span></a>
+          </li>`)}
+      </ul>
+    `;
+    }
+    /**
+     * 팝업이 화면 안에 들어가게 세로 자리를 맞춘다.
+     *
+     * ── 왜 그린 뒤에 하나 ───────────────────────────────────────────────────
+     * 높이를 알아야 맞출 수 있고, 높이는 그려 봐야 안다. 항목마다 하위 수가 다르다 — 「기준정보」는
+     * 열여섯 줄이고 「배우기」는 한 줄이다.
+     *
+     * ── 규칙 ────────────────────────────────────────────────────────────────
+     * 누른 항목의 윗선에서 시작하는 것이 바람이다. 그대로 두면 아래쪽 항목에서 팝업이 화면 밖으로
+     * 나간다. 그래서 **아래로 넘치는 만큼 위로 올린다.** 그래도 안 들어가면 위 여백에 붙이고
+     * 그때만 스크롤한다.
+     *
+     * 자리를 반응 상태로 두지 않고 style 에 바로 쓴다 — 값이 바뀔 때마다 다시 그리면 그 렌더에서
+     * 또 재게 되고, 재는 값이 그리기에 달려 있으므로 서로 물린다.
+     */
+    fitPopup() {
+        var _a, _b;
+        const pop = (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, '.railpop');
+        if (!pop) {
+            return;
+        }
+        const margin = OxMenuPortrait_1.POP_MARGIN;
+        const height = pop.offsetHeight;
+        const room = window.innerHeight - margin * 2;
+        /* 화면보다 크면 위에 붙이고 스크롤한다. 그 아래 다시 재지 않는다. */
+        const top = height >= room ? margin : Math.max(margin, Math.min(this._popPrefer, window.innerHeight - margin - height));
+        if (Math.round(top) !== Math.round(this._popTop)) {
+            this._popTop = top;
+        }
+        pop.style.top = `${top}px`;
+        this.fitKnob(pop, top);
+    }
+    /**
+     * 노브를 그 항목의 가운데 높이에 둔다.
+     *
+     * ── 범위를 벗어나면 감추지 않고 끝에 붙인다 ──────────────────────────────
+     * 팝업이 위로 밀리는 것은 **아래에 자리가 없어서**이고, 그만큼만 밀린다. 그래서 그 항목은
+     * 거의 항상 팝업의 세로 범위 안으로 들어온다. 벗어나는 것은 라운드 모서리에 걸치는 몇 px
+     * 뿐이다. 그때 감추면 **자리가 좁을 때만 표시가 사라진다** — 가장 필요한 순간이다.
+     *
+     * 그래서 모서리 안쪽으로 붙인다. 정확히 그 줄을 가리키지 못해도 「위쪽」·「아래쪽」은
+     * 가리키고, 어느 항목인지는 그 항목의 popped 표시가 말한다.
+     */
+    fitKnob(pop, popTop) {
+        var _a, _b, _c, _d;
+        const knob = (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, '.railknob');
+        /* 최상위 항목이거나 시스템 단추다 — 둘 다 popped 를 단다. */
+        const item = (_d = (_c = this.renderRoot) === null || _c === void 0 ? void 0 : _c.querySelector) === null || _d === void 0 ? void 0 : _d.call(_c, '[popped]');
+        if (!knob) {
+            return;
+        }
+        if (!item) {
+            knob.hidden = true;
+            return;
+        }
+        const rect = item.getBoundingClientRect();
+        const centre = rect.top + rect.height / 2 - popTop;
+        /* 라운드 모서리에 걸치면 반쪽만 보인다. 그 안쪽까지만 간다. */
+        const inset = 14;
+        const within = Math.max(inset, Math.min(centre, pop.offsetHeight - inset));
+        /* 정사각의 반. 가운데가 그 줄의 가운데에 오게 한다. */
+        const half = knob.offsetHeight / 2 || 5;
+        knob.hidden = false;
+        /* 팝업의 왼쪽 선에 반쯤 물리게 — 선이 그 자리에서 끊긴 것처럼 보인다. */
+        knob.style.left = `${this._popLeft - half}px`;
+        knob.style.top = `${popTop + within - half}px`;
+    }
+    updated() {
+        this.fitPopup();
+    }
+    /** 접기/펼치기는 `ox-menu-part` 가 한다 — 폭과 저장이 그쪽 것이다. 여기서는 뜻만 올린다. */
+    toggleCollapsed(e) {
+        e.stopPropagation();
+        this.popped = undefined;
+        this.dispatchEvent(new CustomEvent('collapse-toggle', { bubbles: true, composed: true }));
     }
     firstUpdated() {
         this.renderRoot.addEventListener('click', (e) => {
+            var _a, _b, _c, _d;
             const menuElement = e.target.closest('[menu]');
+            /*
+             * 팝업 안을 눌렀으면 팝업을 닫는다 — 이동은 라우터가 한다(막지 않는다).
+             *
+             * 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 그러면 라우터까지 막혀 **페이지
+             * 전체가 다시 읽혔다.** 막지 않고 닫기만 한다.
+             */
+            if (e.target.closest('.railpop')) {
+                this.popped = undefined;
+            }
+            /*
+             * `active-toplevel` 은 **최상위에서만** 나간다.
+             *
+             * `closest('[menu]')` 는 가장 가까운 줄을 집으므로 하위를 누르면 하위가 잡힌다. 그것을
+             * 그대로 올리면 「열린 묶음」이 하위로 바뀌어, 그 묶음이 닫힌 것처럼 된다. 지금까지는 하위
+             * 클릭이 곧 이동이라 주소가 바뀌며 저절로 나았지만, 나을 이유가 없는 자리다.
+             */
             //@ts-ignore
-            if (menuElement === null || menuElement === void 0 ? void 0 : menuElement.menu) {
+            if ((menuElement === null || menuElement === void 0 ? void 0 : menuElement.menu) && menuElement.hasAttribute('top')) {
                 //@ts-ignore
                 let menu = menuElement.menu;
-                if (!menu.path) {
+                /*
+                 * 접힌 레일에서 하위가 있는 항목은 **팝업으로 연다.**
+                 *
+                 * 이 자리에서 갈라야 한다 — 아래로 흘려 보내면 `active-toplevel` 이 나가고, 그러면
+                 * 56px 안에서 아무것도 안 보이는 채로 「열렸다」가 된다. 팝업이 접힌 레일에서 하위로
+                 * 가는 유일한 길이다.
+                 */
+                /*
+                 * 하위가 있는 최상위를 눌렀다. 무엇을 할지는 **모양이 정한다**(§`menu-mode.ts`).
+                 *
+                 *   팝업으로 열리는 모양   팝업을 띄운다 (접힌 레일)
+                 *   이동하지 않는 모양     그 자리에서 펼치기만 한다 (서랍)
+                 *   나머지               이동하면서 펼친다 — 아래로 흘려 보낸다
+                 */
+                if (((_a = menu.menus) === null || _a === void 0 ? void 0 : _a.length) && !topNavigates(this.mode) && childrenOpenAs(this.mode) === 'inline') {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.dispatchEvent(new CustomEvent('active-toplevel', {
+                        bubbles: true,
+                        detail: this.activeTopLevel === menu ? undefined : menu
+                    }));
+                    return;
+                }
+                if (((_b = menu.menus) === null || _b === void 0 ? void 0 : _b.length) && childrenOpenAs(this.mode) === 'popup') {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const rect = menuElement.getBoundingClientRect();
+                    /*
+                     * **레일의 오른쪽을 기준으로 띄운다** — 누른 항목의 오른쪽이 아니다.
+                     *
+                     * 항목은 레일 안쪽 여백만큼 들어가 있어서, 항목 기준으로 재면 팝업이 레일 끝에 정확히
+                     * 붙는다(56px 레일에서 left 가 56 이 됐다). 붙으면 레일을 덮은 것처럼 보인다.
+                     *
+                     * 틈은 8px 이다. 16px 은 떨어져 떠 있는 것처럼 보였고, 0 은 레일에 얹힌 것처럼
+                     * 보였다. 8px 이 「레일에서 열린 다른 면」으로 읽히는 자리다.
+                     */
+                    this._popLeft = this.getBoundingClientRect().right + 8;
+                    /*
+                     * 누른 항목의 윗선에서 시작하는 것은 **바람**일 뿐이다. 실제 자리는 그린 뒤 높이를
+                     * 재서 정한다(`fitPopup`) — 여기서 고정하면 항목이 아래쪽일 때 팝업이 화면 밖으로
+                     * 나가거나 열여섯 줄짜리 목록에 스크롤이 생긴다.
+                     */
+                    this._popPrefer = rect.top;
+                    this._popTop = rect.top;
+                    this.popped = this.popped === menu ? undefined : menu;
+                    return;
+                }
+                /*
+                 * ── 화살표가 토글이고, 글자가 이동이다 ────────────────────────────
+                 * 최상위 항목은 두 일을 한다 — 자기 화면으로 가고, 하위를 펼친다. 글자를 누르면 링크가
+                 * 주소를 바꾸므로 **접기가 살아남을 수 없다** — 주소가 바뀌면 그 주소의 메뉴가 다시
+                 * 열린다(§`ox-menu-part` 의 `_closedByUser`).
+                 *
+                 * 그래서 접는 자리를 화살표로 옮긴다. 화살표는 이미 「펼침」을 그리고 있어서 사람이 그것을
+                 * 누르려 한다. 누르면 이동하지 않고 접기만 한다.
+                 */
+                const onCaret = !!((_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.closest) === null || _d === void 0 ? void 0 : _d.call(_c, '[submenu-button]'));
+                if (!menu.path || onCaret) {
                     /* protect to act move to href. */
                     e.stopPropagation();
                     e.preventDefault();
@@ -69,6 +550,8 @@ let OxMenuPortrait = class OxMenuPortrait extends LitElement {
     }
 };
 OxMenuPortrait.styles = [ScrollbarStyles, MenuPortraitStyles];
+/** 팝업이 화면 안에 들어가게 세로 자리를 맞춘다. 팝업 밖 여백. */
+OxMenuPortrait.POP_MARGIN = 8;
 __decorate([
     property({ type: Array })
 ], OxMenuPortrait.prototype, "menus", void 0);
@@ -81,7 +564,22 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxMenuPortrait.prototype, "path", void 0);
-OxMenuPortrait = __decorate([
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxMenuPortrait.prototype, "rail", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxMenuPortrait.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxMenuPortrait.prototype, "drawer", void 0);
+__decorate([
+    state()
+], OxMenuPortrait.prototype, "popped", void 0);
+__decorate([
+    state()
+], OxMenuPortrait.prototype, "morendas", void 0);
+OxMenuPortrait = OxMenuPortrait_1 = __decorate([
     customElement('ox-menu-portrait')
 ], OxMenuPortrait);
 export { OxMenuPortrait };