From 7fd7553b85c2ff3cdea3a443f5925ae867275d0c Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Wed, 16 Oct 2024 14:58:23 +1300
Subject: [PATCH] Move fallback into the same place

---
 src/components/navigation/navigation.svelte   | 17 ++++++++++++++++
 .../navigation/navigationItem.svelte          | 20 ++++---------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/navigation/navigation.svelte b/src/components/navigation/navigation.svelte
index 1e04732c6..04520a81c 100644
--- a/src/components/navigation/navigation.svelte
+++ b/src/components/navigation/navigation.svelte
@@ -48,6 +48,23 @@
     }
   }
 
+  // Fallback active indicator for when the browser doesn't support anchor positioning
+  @supports (not (anchor-name: --active-indicator)) {
+    :global(leo-navigation [data-selected=true]::before), .leo-navigation [data-selected=true]::before {
+      content: '';
+      width: 4px;
+      height: calc(100% - var(--anchor-padding) * 2);
+      border-top-right-radius: var(--leo-radius-xs);
+      border-bottom-right-radius: var(--leo-radius-xs);
+      background: var(--leo-color-text-interactive);
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
+  }
+
   .leo-navigation {
     --nav-direction: row;
     --leo-icon-size: var(--leo-icon-s);
diff --git a/src/components/navigation/navigationItem.svelte b/src/components/navigation/navigationItem.svelte
index f476409b1..e685a76d3 100644
--- a/src/components/navigation/navigationItem.svelte
+++ b/src/components/navigation/navigationItem.svelte
@@ -116,6 +116,10 @@
     anchor-name: --active-indicator;
   }
 
+  :host {
+    position: relative;
+  }
+
   .leo-navigation-item {
     --nav-item-color: var(--leo-color-text-secondary);
     --leo-icon-color: var(--leo-color-icon-default);
@@ -126,22 +130,6 @@
     &[data-selected='true'] {
       --nav-item-color: var(--leo-color-text-interactive);
       --leo-icon-color: var(--leo-color-icon-interactive);
-
-      // Fallback active indicator for when the browser doesn't support anchor positioning
-      @supports (not (anchor-name: --active-indicator)) {
-        &::before {
-          content: '';
-          width: 4px;
-          height: calc(100% - var(--anchor-padding) * 2);
-          border-top-right-radius: var(--leo-radius-xs);
-          border-bottom-right-radius: var(--leo-radius-xs);
-          background: var(--leo-color-text-interactive);
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
     }
 
     // If a parent is selected, change the nav item color to unselected