···

       
24
       
 
       
  return (

     

       
25
       
 
       
    <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">

     

       
26
       
 
       
      {/* PDS Level */}

     

       
27
       
-
       
      <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
28
       
 
       
        <div class="flex min-h-5 basis-full items-center gap-1.5 sm:min-h-6">

     

       
29
       
 
       
          <Tooltip text="PDS">

     

       
30
       
 
       
            <span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
31
       
 
       
          </Tooltip>

     

       
32
       
 
       
          <Show when={pds()}>

     

       
33
       
-
       
            <Show when={props.params.repo} fallback={<span class="font-medium">{pds()}</span>}>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
34
       
 
       
              <A

     

       
35
       
 
       
                end

     

       
36
       
 
       
                href={pds()!}

     

       
37
       
-
       
                inactiveClass="text-blue-400 w-full font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
38
       
 
       
              >

     

       
39
       
 
       
                {pds()}

     

       
40
       
 
       
              </A>

     
···

       
64
       
 
       
      <div class="flex flex-col">

     

       
65
       
 
       
        <Show when={props.params.repo}>

     

       
66
       
 
       
          {/* Repository Level */}

     

       
67
       
-
       
          <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
68
       
 
       
            <div class="flex basis-full items-center gap-1.5">

     

       
69
       
 
       
              <Tooltip text="Repository">

     

       
70
       
 
       
                <span class="iconify lucide--book-user text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     
···

       
73
       
 
       
                <A

     

       
74
       
 
       
                  end

     

       
75
       
 
       
                  href={`/at://${props.params.repo}`}

     

       
76
       
-
       
                  inactiveClass="text-blue-400 w-full font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
77
       
 
       
                >

     

       
78
       
 
       
                  {showHandle() ? handle() : props.params.repo}

     

       
79
       
 
       
                </A>

     

       
80
       
-
       
              : <span class="font-medium">{showHandle() ? handle() : props.params.repo}</span>}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
81
       
 
       
            </div>

     

       
82
       
 
       
            <Tooltip text={showHandle() ? "Show DID" : "Show handle"}>

     

       
83
       
 
       
              <button

     
···

       
102
       
 
       
            (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       
103
       
 
       
          }

     

       
104
       
 
       
        >

     

       
105
       
-
       
          <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
106
       
 
       
            <span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
107
       
 
       
            <A

     

       
108
       
 
       
              end

     

       
109
       
 
       
              href={`/at://${props.params.repo}/labels`}

     

       
0
       
 
       

     

       
110
       
 
       
              inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
111
       
 
       
            >

     

       
112
       
 
       
              labels

     
···

       
116
       
 
       


     

       
117
       
 
       
        {/* Collection Level */}

     

       
118
       
 
       
        <Show when={props.params.collection}>

     

       
119
       
-
       
          <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 py-0.5 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
120
       
 
       
            <Tooltip text="Collection">

     

       
121
       
 
       
              <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
122
       
 
       
            </Tooltip>

     

       
123
       
 
       
            <Show

     

       
124
       
 
       
              when={props.params.rkey}

     

       
125
       
-
       
              fallback={<span class="font-medium">{props.params.collection}</span>}

     

       
126
       
 
       
            >

     

       
127
       
 
       
              <A

     

       
128
       
 
       
                end

     

       
129
       
 
       
                href={`/at://${props.params.repo}/${props.params.collection}`}

     

       
130
       
-
       
                inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
131
       
 
       
              >

     

       
132
       
 
       
                {props.params.collection}

     

       
133
       
 
       
              </A>

     

···

       
24
       
 
       
  return (

     

       
25
       
 
       
    <nav class="flex w-full flex-col text-sm wrap-anywhere sm:text-base">

     

       
26
       
 
       
      {/* PDS Level */}

     

       
27
       
+
       
      <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
28
       
 
       
        <div class="flex min-h-5 basis-full items-center gap-1.5 sm:min-h-6">

     

       
29
       
 
       
          <Tooltip text="PDS">

     

       
30
       
 
       
            <span class="iconify lucide--hard-drive shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
31
       
 
       
          </Tooltip>

     

       
32
       
 
       
          <Show when={pds()}>

     

       
33
       
+
       
            <Show

     

       
34
       
+
       
              when={props.params.repo}

     

       
35
       
+
       
              fallback={<span class="py-0.5 font-medium">{pds()}</span>}

     

       
36
       
+
       
            >

     

       
37
       
 
       
              <A

     

       
38
       
 
       
                end

     

       
39
       
 
       
                href={pds()!}

     

       
40
       
+
       
                inactiveClass="text-blue-400 py-0.5 w-full font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
41
       
 
       
              >

     

       
42
       
 
       
                {pds()}

     

       
43
       
 
       
              </A>

     
···

       
67
       
 
       
      <div class="flex flex-col">

     

       
68
       
 
       
        <Show when={props.params.repo}>

     

       
69
       
 
       
          {/* Repository Level */}

     

       
70
       
+
       
          <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
71
       
 
       
            <div class="flex basis-full items-center gap-1.5">

     

       
72
       
 
       
              <Tooltip text="Repository">

     

       
73
       
 
       
                <span class="iconify lucide--book-user text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     
···

       
76
       
 
       
                <A

     

       
77
       
 
       
                  end

     

       
78
       
 
       
                  href={`/at://${props.params.repo}`}

     

       
79
       
+
       
                  inactiveClass="text-blue-400 w-full py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
80
       
 
       
                >

     

       
81
       
 
       
                  {showHandle() ? handle() : props.params.repo}

     

       
82
       
 
       
                </A>

     

       
83
       
+
       
              : <span class="py-0.5 font-medium">

     

       
84
       
+
       
                  {showHandle() ? handle() : props.params.repo}

     

       
85
       
+
       
                </span>

     

       
86
       
+
       
              }

     

       
87
       
 
       
            </div>

     

       
88
       
 
       
            <Tooltip text={showHandle() ? "Show DID" : "Show handle"}>

     

       
89
       
 
       
              <button

     
···

       
108
       
 
       
            (props.params.repo in labelerCache || location.pathname.endsWith("/labels"))

     

       
109
       
 
       
          }

     

       
110
       
 
       
        >

     

       
111
       
+
       
          <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
112
       
 
       
            <span class="iconify lucide--tag text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
113
       
 
       
            <A

     

       
114
       
 
       
              end

     

       
115
       
 
       
              href={`/at://${props.params.repo}/labels`}

     

       
116
       
+
       
              class="py-0.5"

     

       
117
       
 
       
              inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
118
       
 
       
            >

     

       
119
       
 
       
              labels

     
···

       
123
       
 
       


     

       
124
       
 
       
        {/* Collection Level */}

     

       
125
       
 
       
        <Show when={props.params.collection}>

     

       
126
       
+
       
          <div class="group flex items-center gap-1.5 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40">

     

       
127
       
 
       
            <Tooltip text="Collection">

     

       
128
       
 
       
              <span class="iconify lucide--folder-open text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span>

     

       
129
       
 
       
            </Tooltip>

     

       
130
       
 
       
            <Show

     

       
131
       
 
       
              when={props.params.rkey}

     

       
132
       
+
       
              fallback={<span class="py-0.5 font-medium">{props.params.collection}</span>}

     

       
133
       
 
       
            >

     

       
134
       
 
       
              <A

     

       
135
       
 
       
                end

     

       
136
       
 
       
                href={`/at://${props.params.repo}/${props.params.collection}`}

     

       
137
       
+
       
                inactiveClass="text-blue-400 grow py-0.5 font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300"

     

       
138
       
 
       
              >

     

       
139
       
 
       
                {props.params.collection}

     

       
140
       
 
       
              </A>