commit db02e547d4675b52733c2937469cb1ff64f54cf0 · pdsls.dev/pdsls

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

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

     

       71
       71
        
                 {/* Repository Level */}

     

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

     

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

     

       74
       74
       -
                     <Tooltip text="Repository">

     

       75
       75
       -
                       <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
       73
       +
                   <div class="-ml-0.5 flex basis-full items-center gap-1 sm:-ml-1 sm:gap-0.5">

     

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

     

       75
       75
       +
                       <button

     

       76
       76
       +
                         type="button"

     

       77
       77
       +
                         class="relative flex items-center rounded p-0.5 text-neutral-500 transition-all duration-200 hover:bg-neutral-200/70 hover:text-neutral-700 active:bg-neutral-300/70 sm:p-1 dark:text-neutral-400 dark:hover:bg-neutral-700/70 dark:hover:text-neutral-200 dark:active:bg-neutral-600/70"

     

       78
       78
       +
                         onclick={() => {

     

       79
       79
       +
                           localStorage.showHandle = !showHandle();

     

       80
       80
       +
                           setShowHandle(!showHandle());

     

       81
       81
       +
                         }}

     

       82
       82
       +
                         aria-label="Switch DID/Handle"

     

       83
       83
       +
                       >

     

       84
       84
       +
                         <span class="iconify lucide--book-user shrink-0 transition-opacity duration-200 group-hover:opacity-0"></span>

     

       85
       85
       +
                         <span

     

       86
       86
       +
                           class={`iconify absolute shrink-0 opacity-0 transition-all duration-200 group-hover:opacity-100 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       87
       87
       +
                         ></span>

     

       88
       88
       +
                       </button>

     

       76
       89
        
                     </Tooltip>

     

       77
       90
        
                     {props.params.collection || location.pathname.includes("/labels") ?

     

       78
       91
        
                       <A

     
···

       87
       100
        
                       </span>

     

       88
       101
        
                     }

     

       89
       102
        
                   </div>

     

       90
       90
       -
                   <div class="flex items-center gap-0.5">

     

       91
       91
       -
                     <CopyButton content={`at://${props.params.repo}`} />

     

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

     

       93
       93
       -
                       <button

     

       94
       94
       -
                         class="flex items-center rounded p-0.5 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 sm:p-1 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70"

     

       95
       95
       -
                         onclick={() => {

     

       96
       96
       -
                           localStorage.showHandle = !showHandle();

     

       97
       97
       -
                           setShowHandle(!showHandle());

     

       98
       98
       -
                         }}

     

       99
       99
       -
                       >

     

       100
       100
       -
                         <span

     

       101
       101
       -
                           class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}

     

       102
       102
       -
                         ></span>

     

       103
       103
       -
                       </button>

     

       104
       104
       -
                     </Tooltip>

     

       105
       105
       -
                   </div>

     

       103
       103
       +
                   <CopyButton content={props.params.repo} />

     

       106
       104
        
                 </div>

     

       107
       105
        
               </Show>

     

       108
       106