From 1f8dd0d6a46693939e5e45554fdabf9c245a00c4 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 15:46:55 +0000 Subject: [PATCH 1/5] Get anchor positioning working --- resources/css/core/layout.css | 75 +++++++++++++++++++++++++---------- 1 file changed, 55 insertions(+), 20 deletions(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 5fa570b8d7..0250332e64 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -1,6 +1,5 @@ -/* ========================================================================== - THE MAIN NAV (LEFT SIDEBAR) - ========================================================================== */ +/* GROUP THE MAIN NAV (LEFT SIDEBAR) +=================================================== */ .nav-main { @apply flex flex-col gap-6 py-6 px-2 sm:px-3 text-sm antialiased select-none; /* Same as the main element, accounting for the header with a class of h-14, which is the same as 3.5rem */ @@ -39,36 +38,72 @@ ul li ul li a.active { @apply text-gray-925 dark:text-white font-medium bg-transparent; } - ul li ul li { - a.active { - /* [1] Add a little vertical line to indicate the "active" subnav item */ - &::before { + + .section-title { + @apply text-sm px-2 text-gray-925 font-medium mb-1 dark:text-gray-200; + } +} + +/* GROUP THE MAIN NAV (LEFT SIDEBAR) / ACTIVE STATES +=================================================== */ +.nav-main { + @supports not (anchor-name: --my-anchor) { + ul li ul li { + a.active { + /* [1] Add a little vertical line to indicate the "active" subnav item */ + &::before { + content: ''; + position: absolute; + left: -1px; + @apply h-4 border-s border-s-black; + } + :where(.dark) &::before { + @apply border-s-gray-400; + } + } + &:only-child a.active { + /* [/2] Make the "active" subnav item less distracting for single-subnav items such as Assets/assets */ + &::before { + @apply border-s-gray-400; + } + :where(.dark) &::before { + @apply border-s-gray-500; + } + } + } + } + + @supports (anchor-name: --my-anchor) { + ul:not(ul ul):has(.active) { + &::after { content: ''; position: absolute; - left: -1px; + width: anchor-size(height); + height: anchor-size(height); @apply h-4 border-s border-s-black; + translate: -100% 0; + position-anchor: --active; + left: calc(anchor(left) + 0.25rem); + top: anchor(top); + transition-property: top, left, opacity; + transition-duration: 0.25s; + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); } :where(.dark) &::before { @apply border-s-gray-400; } - } - &:only-child a.active { - /* [/2] Make the "active" subnav item less distracting for single-subnav items such as Assets/assets */ - &::before { - @apply border-s-gray-400; - } - :where(.dark) &::before { - @apply border-s-gray-500; + li ul li { + a.active { + anchor-name: --active; + } } } } - - .section-title { - @apply text-sm px-2 text-gray-925 font-medium mb-1 dark:text-gray-200; - } } + + /* Mobile nav behavior */ @media (width < theme(--breakpoint-lg)) { .nav-main { From c3900d320324fd7f78027f2110221b78606d0cf3 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 15:48:46 +0000 Subject: [PATCH 2/5] Fix selector --- resources/css/core/layout.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 0250332e64..890da495bb 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -74,7 +74,7 @@ } @supports (anchor-name: --my-anchor) { - ul:not(ul ul):has(.active) { + ul ul:has(.active) { &::after { content: ''; position: absolute; @@ -92,10 +92,8 @@ :where(.dark) &::before { @apply border-s-gray-400; } - li ul li { - a.active { - anchor-name: --active; - } + a.active { + anchor-name: --active; } } } From 170a30ebf23550d516a41188f0816b624266d1aa Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 16:00:10 +0000 Subject: [PATCH 3/5] Tidy --- resources/css/core/layout.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 890da495bb..2907f9febf 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -75,7 +75,8 @@ @supports (anchor-name: --my-anchor) { ul ul:has(.active) { - &::after { + /* [1] Add a little vertical line to indicate the "active" subnav item that moves with anchor positioning */ + &::before { content: ''; position: absolute; width: anchor-size(height); @@ -92,6 +93,15 @@ :where(.dark) &::before { @apply border-s-gray-400; } + &:has(li:only-child) { + /* [/2] Make the "active" subnav item less distracting for single-subnav items such as Assets/assets */ + &::before { + @apply border-s-gray-400; + } + :where(.dark) &::before { + @apply border-s-gray-500; + } + } a.active { anchor-name: --active; } From 1188a8367dabba38e58b85c4195481af62c1388f Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 16:12:33 +0000 Subject: [PATCH 4/5] Make it a little swifter --- resources/css/core/layout.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 2907f9febf..7670f363d6 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -86,8 +86,8 @@ position-anchor: --active; left: calc(anchor(left) + 0.25rem); top: anchor(top); - transition-property: top, left, opacity; - transition-duration: 0.25s; + transition-property: top, left; + transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); } :where(.dark) &::before { From e55fe91e2be8ebb5bede060238dcdd62616f9a4a Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 16:46:46 +0000 Subject: [PATCH 5/5] Tweak --- resources/css/core/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 7670f363d6..4a21c0f88e 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -87,7 +87,7 @@ left: calc(anchor(left) + 0.25rem); top: anchor(top); transition-property: top, left; - transition-duration: 0.15s; + transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); } :where(.dark) &::before {