brooke.ec / luminary
A focused Docker Compose management web application.
0
fork

Configure Feed

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

feat: long navbar labels on mobile

Brooke f5837314 73f7203a

+26 -8
+26 -8
packages/panel/src/routes/(authenticated)/Navbar.svelte
··· 30 30 31 31 const PAGES = [ 32 32 { icon: faLayerGroup, label: "Projects", href: "/projects" }, 33 - { icon: faPlusCircle, label: "Create", href: "/create" }, 33 + { icon: faPlusCircle, label: "Create", long: "Create Project", href: "/create" }, 34 34 "search", 35 - { icon: faServer, label: "Server", href: "/server" }, 36 - { icon: faGear, label: "Settings", href: "/settings" }, 37 - ] satisfies ({ icon: any; label: string; href: string } | "search")[]; 35 + { icon: faServer, label: "Server", long: "Server Settings", href: "/server" }, 36 + { icon: faGear, label: "Settings", long: "user Settings", href: "/settings" }, 37 + ] satisfies ({ icon: any; label: string; href: string; long?: string } | "search")[]; 38 38 39 39 let { children }: { children: Snippet<[]> } = $props(); 40 40 ··· 77 77 <div class="icon"> 78 78 <Fa icon={faMagnifyingGlass} /> 79 79 </div> 80 - <div class="label"><span class="keybind">ctrl + /</span></div> 80 + <div class="label"> 81 + {#if isMobile()} 82 + Search 83 + {:else} 84 + <span class="keybind">ctrl + /</span> 85 + {/if} 86 + </div> 81 87 </button> 82 88 {:else} 83 - {@const { icon, label, href } = entry} 89 + {@const { icon, label, href, long } = entry} 84 90 85 91 <a class="entry" {href} class:current={page.url.pathname.startsWith(href)}> 86 92 <div class="icon"> 87 93 <Fa {icon} /> 88 94 </div> 89 - <div class="label">{label}</div> 95 + <div class="label"> 96 + {#if isMobile()} 97 + {long ?? label} 98 + {:else} 99 + {label} 100 + {/if} 101 + </div> 90 102 </a> 91 103 {/if} 92 104 {/each} ··· 239 251 } 240 252 241 253 .expanded .label { 242 - flex-basis: #{$navbar-width - 48px}; 254 + @media (min-width: 426px) { 255 + flex-basis: #{$navbar-width - 48px}; 256 + } 243 257 } 244 258 245 259 .icon { ··· 260 274 261 275 white-space: nowrap; 262 276 font-size: 14px; 277 + 278 + @media (max-width: 425px) { 279 + flex-basis: auto; 280 + } 263 281 } 264 282 </style>