futur.blue / pdsls
forked from pds.ls/pdsls
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

navbar padding

Juliet a954c559 82c0f4b1

+17 -10
+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 - <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 + <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 - <Show when={props.params.repo} fallback={<span class="font-medium">{pds()}</span>}> 33 + <Show 34 + when={props.params.repo} 35 + fallback={<span class="py-0.5 font-medium">{pds()}</span>} 36 + > 34 37 <A 35 38 end 36 39 href={pds()!} 37 - inactiveClass="text-blue-400 w-full font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 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 - <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 + <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 - inactiveClass="text-blue-400 w-full font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 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 - : <span class="font-medium">{showHandle() ? handle() : props.params.repo}</span>} 83 + : <span class="py-0.5 font-medium"> 84 + {showHandle() ? handle() : props.params.repo} 85 + </span> 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 - <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 + <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 + 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 - <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 + <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 - fallback={<span class="font-medium">{props.params.collection}</span>} 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 - inactiveClass="text-blue-400 grow font-medium hover:text-blue-500 transition-colors duration-150 dark:hover:text-blue-300" 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>