retr0.id / pdsls
forked from pds.ls/pdsls
atproto explorer
fork atom

restyle navbar

juli.ee c440ce3a 1cf8db5f

verified
+40 -28
unified split
+38 -26
src/components/navbar.tsx
··· 22 22 }); 23 23 24 24 return ( 25 - <nav class="flex w-full flex-col px-2 text-sm wrap-anywhere sm:text-base"> 26 - <div class="relative flex items-center justify-between gap-1"> 27 - <div class="flex min-h-5 basis-full items-center gap-2 sm:min-h-6"> 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"> 28 29 <Tooltip text="PDS"> 29 - <span class="iconify lucide--hard-drive shrink-0"></span> 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> 30 31 </Tooltip> 31 32 <Show when={pds()}> 32 - <Show when={props.params.repo} fallback={<span>{pds()}</span>}> 33 + <Show when={props.params.repo} fallback={<span class="font-medium">{pds()}</span>}> 33 34 <A 34 35 end 35 36 href={pds()!} 36 - inactiveClass="text-blue-400 w-full hover:underline active:underline" 37 + inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 37 38 > 38 39 {pds()} 39 40 </A> ··· 44 45 <MenuProvider> 45 46 <DropdownMenu 46 47 icon="lucide--copy" 47 - buttonClass="rounded p-0.5 sm:p-1 text-base" 48 - menuClass="top-6 p-2 text-xs" 48 + buttonClass="rounded p-1 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70" 49 + menuClass="top-7 p-2 text-xs" 49 50 > 50 51 <Show when={pds()}> 51 52 <CopyMenu copyContent={pds()!} label="Copy PDS" /> ··· 59 60 </MenuProvider> 60 61 </Show> 61 62 </div> 62 - <div class="flex flex-col flex-wrap"> 63 + 64 + <div class="flex flex-col"> 63 65 <Show when={props.params.repo}> 64 - <div class="relative flex items-center justify-between gap-1"> 65 - <div class="flex basis-full items-center gap-2"> 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"> 66 69 <Tooltip text="Repository"> 67 - <span class="iconify lucide--book-user"></span> 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> 68 71 </Tooltip> 69 72 {props.params.collection || location.pathname.includes("/labels") ? 70 73 <A 71 74 end 72 75 href={`/at://${props.params.repo}`} 73 - inactiveClass="text-blue-400 hover:underline active:underline w-full" 76 + inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 74 77 > 75 78 {showHandle() ? handle() : props.params.repo} 76 79 </A> 77 - : <span>{showHandle() ? handle() : props.params.repo}</span>} 80 + : <span class="font-medium">{showHandle() ? handle() : props.params.repo}</span>} 78 81 </div> 79 82 <Tooltip text={showHandle() ? "Show DID" : "Show handle"}> 80 83 <button 81 - class="flex items-center rounded p-0.5 text-base hover:bg-neutral-200 active:bg-neutral-300 sm:p-1 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 84 + class="flex items-center rounded p-1 text-base transition-all duration-200 hover:bg-neutral-200/70 active:bg-neutral-300/70 dark:hover:bg-neutral-700/70 dark:active:bg-neutral-600/70" 82 85 onclick={() => { 83 86 localStorage.showHandle = !showHandle(); 84 87 setShowHandle(!showHandle()); 85 88 }} 86 89 > 87 90 <span 88 - class={`iconify shrink-0 transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 91 + class={`iconify shrink-0 transition-transform duration-300 ease-in-out ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`} 89 92 ></span> 90 93 </button> 91 94 </Tooltip> 92 95 </div> 93 96 </Show> 97 + 98 + {/* Labels Level */} 94 99 <Show 95 100 when={ 96 101 !props.params.collection && 97 102 (props.params.repo in labelerCache || location.pathname.endsWith("/labels")) 98 103 } 99 104 > 100 - <div class="flex items-center gap-2"> 101 - <span class="iconify lucide--tag"></span> 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> 102 107 <A 103 108 end 104 109 href={`/at://${props.params.repo}/labels`} 105 - inactiveClass="text-blue-400 grow hover:underline active:underline" 110 + inactiveClass="text-blue-500 grow font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 106 111 > 107 112 labels 108 113 </A> 109 114 </div> 110 115 </Show> 116 + 117 + {/* Collection Level */} 111 118 <Show when={props.params.collection}> 112 - <div class="flex items-center gap-2"> 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"> 113 120 <Tooltip text="Collection"> 114 - <span class="iconify lucide--folder-open"></span> 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> 115 122 </Tooltip> 116 - <Show when={props.params.rkey} fallback={<span>{props.params.collection}</span>}> 123 + <Show 124 + when={props.params.rkey} 125 + fallback={<span class="font-medium">{props.params.collection}</span>} 126 + > 117 127 <A 118 128 end 119 129 href={`/at://${props.params.repo}/${props.params.collection}`} 120 - inactiveClass="text-blue-400 w-full hover:underline active:underline" 130 + inactiveClass="text-blue-500 w-full font-medium hover:text-blue-600 transition-colors duration-150 dark:text-blue-400 dark:hover:text-blue-300" 121 131 > 122 132 {props.params.collection} 123 133 </A> 124 134 </Show> 125 135 </div> 126 136 </Show> 137 + 138 + {/* Record Level */} 127 139 <Show when={props.params.rkey}> 128 - <div class="flex items-center gap-2"> 140 + <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"> 129 141 <Tooltip text="Record"> 130 - <span class="iconify lucide--file-json"></span> 142 + <span class="iconify lucide--file-json text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 131 143 </Tooltip> 132 - <span>{props.params.rkey}</span> 144 + <span class="font-medium">{props.params.rkey}</span> 133 145 </div> 134 146 </Show> 135 147 </div>
+2 -2
src/layout.tsx
··· 66 66 </Show> 67 67 </MetaProvider> 68 68 <header 69 - class={`dark:shadow-dark-700 dark:bg-dark-300 mb-4 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`} 69 + class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`} 70 70 style={{ 71 71 "background-image": 72 72 props.params.repo in headers ? ··· 104 104 </MenuProvider> 105 105 </div> 106 106 </header> 107 - <div class="flex w-full flex-col items-center gap-4 text-pretty"> 107 + <div class="flex w-full flex-col items-center gap-3 text-pretty"> 108 108 <Show when={showSearch() || location.pathname === "/"}> 109 109 <Search /> 110 110 </Show>