Просмотр исходного кода

render GroundGlassBar without Sticky

Yuki Takei 3 месяцев назад
Родитель
Сommit
b006ff3236

+ 10 - 6
.serena/memories/apps-app-page-path-nav-and-sub-navigation-layering.md

@@ -31,7 +31,7 @@ PageControls が PagePathNav より下層にいたため、sticky 境界付近
 
 ### ファイル構成
 
-- `GrowiContextualSubNavigation.tsx` - 2つの Sticky に分離
+- `GrowiContextualSubNavigation.tsx` - GroundGlassBar を分離してレンダリング
   - 1つ目: GroundGlassBar のみ(`position-fixed`, `z-1`)
   - 2つ目: nav 要素(`z-3`)
 - `PagePathNavSticky.tsx` - z-index を動的に切り替え
@@ -40,17 +40,13 @@ PageControls が PagePathNav より下層にいたため、sticky 境界付近
 
 ## 実装のポイント
 
-### GroundGlassBar を別の Sticky に分離した理由
+### GroundGlassBar を分離した理由
 GroundGlassBar を `position-fixed` で常に固定表示にすることで、
 PageControls と切り離して独立した z-index 層として扱えるようにした。
 
 これにより、GroundGlassBar → PagePathNav → PageControls という
 理想的なレイヤー構造を実現できた。
 
-### 代替手段の検討
-現在の「2つの Sticky に分離する」実装は動作するが、
-よりクリーンな代替手段があれば検討の余地がある。
-
 ## 未解決の問題(要調査)
 
 ### CopyDropdown が z-2 で動作しない問題
@@ -81,6 +77,14 @@ innerActiveClass="active z-3 mt-1"
 - `apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.module.scss`
 - `apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx`(CopyDropdown を含む)
 
+## ライブラリの注意事項
+
+### react-stickynode の deprecation
+`react-stickynode` は **2025-12-31 で deprecated** となる予定。
+https://github.com/yahoo/react-stickynode
+
+将来的には CSS `position: sticky` + `IntersectionObserver` への移行を検討する必要がある。
+
 ## 注意事項
 
 - z-index の値を変更する際は、上記のレイヤー構造を壊さないよう注意

+ 3 - 7
apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -386,15 +386,11 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   return (
     <>
+      {/* for App Title for mobile */}
       <GroundGlassBar className="py-4 d-block d-md-none d-print-none border-bottom" />
 
-      <Sticky
-        className="z-1 position-fixed d-print-none"
-        enabled={!isPrinting}
-        innerActiveClass="w-100 end-0"
-      >
-        <GroundGlassBar className={minHeightSubNavigation} />
-      </Sticky>
+      {/* for Sub Navigation */}
+      <GroundGlassBar className={`position-fixed z-1 d-print-none w-100 end-0 ${minHeightSubNavigation}`} />
 
       <Sticky
         className="z-3"