commit a954c55969ce18b82ee41360145ef8f507901073 · pdsls.dev/pdsls

+17 -10
src/components/navbar.tsx
···

       24
       24
        
         return (

     

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

     

       26
       26
        
             {/* PDS Level */}

     

       27
       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">

     

       27
       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
       28
        
               <div class="flex min-h-5 basis-full items-center gap-1.5 sm:min-h-6">

     

       29
       29
        
                 <Tooltip text="PDS">

     

       30
       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
       31
        
                 </Tooltip>

     

       32
       32
        
                 <Show when={pds()}>

     

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

     

       33
       33
       +
                   <Show

     

       34
       34
       +
                     when={props.params.repo}

     

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

     

       36
       36
       +
                   >

     

       34
       37
        
                     <A

     

       35
       38
        
                       end

     

       36
       39
        
                       href={pds()!}

     

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

     

       40
       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"

     

       38
       41
        
                     >

     

       39
       42
        
                       {pds()}

     

       40
       43
        
                     </A>

     
···

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

     

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

     

       66
       69
        
                 {/* Repository Level */}

     

       67
       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">

     

       70
       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">

     

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

     

       69
       72
        
                     <Tooltip text="Repository">

     

       70
       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>

     
···

       73
       76
        
                       <A

     

       74
       77
        
                         end

     

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

     

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

     

       79
       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"

     

       77
       80
        
                       >

     

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

     

       79
       82
        
                       </A>

     

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

     

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

     

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

     

       85
       85
       +
                       </span>

     

       86
       86
       +
                     }

     

       81
       87
        
                   </div>

     

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

     

       83
       89
        
                     <button

     
···

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

     

       103
       109
        
                 }

     

       104
       110
        
               >

     

       105
       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">

     

       111
       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">

     

       106
       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>

     

       107
       113
        
                   <A

     

       108
       114
        
                     end

     

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

     

       116
       116
       +
                     class="py-0.5"

     

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

     

       111
       118
        
                   >

     

       112
       119
        
                     labels

     
···

       116
       123
        
       

     

       117
       124
        
               {/* Collection Level */}

     

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

     

       119
       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">

     

       126
       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">

     

       120
       127
        
                   <Tooltip text="Collection">

     

       121
       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>

     

       122
       129
        
                   </Tooltip>

     

       123
       130
        
                   <Show

     

       124
       131
        
                     when={props.params.rkey}

     

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

     

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

     

       126
       133
        
                   >

     

       127
       134
        
                     <A

     

       128
       135
        
                       end

     

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

     

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

     

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

     

       131
       138
        
                     >

     

       132
       139
        
                       {props.params.collection}

     

       133
       140
        
                     </A>