qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🎨 Update navbar & sidebar styles + create global sidebar items

Browse Source
This commit is contained in:
pheralb 2024-04-20 21:24:10 +01:00
parent 8152eabfe4
commit 091a23a137
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/navbar.svelte
View File

@ -9,15 +9,6 @@
import XIcon from './xIcon.svelte'; import XIcon from './xIcon.svelte';
import GithubIcon from './githubIcon.svelte'; import GithubIcon from './githubIcon.svelte';
// Se le pusieron aria-labels a los links
const socials = [
{
name: 'GitHub',
url: 'https://github.com/pheralb/svgl',
icon: GithubIcon
}
];
const externalLinks = [ const externalLinks = [
{ {
name: 'API', name: 'API',
@ -58,7 +49,7 @@
<div class="flex items-center space-x-2 opacity-80 hover:opacity-100 transition-opacity"> <div class="flex items-center space-x-2 opacity-80 hover:opacity-100 transition-opacity">
<svelte:component this={Logo} /> <svelte:component this={Logo} />
<span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span> <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
<p class="text-neutral-400 hidden md:block font-mono">v4.1</p> <p class="text-neutral-400 hidden md:block font-mono">v4.2</p>
</div> </div>
</a> </a>
</div> </div>

10
src/routes/+layout.svelte
View File

@ -22,6 +22,7 @@
// Layout: // Layout:
import Navbar from '@/components/navbar.svelte'; import Navbar from '@/components/navbar.svelte';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import { sidebarItemStyles } from '@/ui/styles';
</script> </script>
<ModeWatcher /> <ModeWatcher />
@ -42,11 +43,12 @@
> >
<a <a
href="/" href="/"
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${ class={cn(
data.pathname === `/` sidebarItemStyles,
data.pathname === '/'
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark' ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
: '' : ''
}`} )}
data-sveltekit-preload-data>All</a data-sveltekit-preload-data>All</a
> >
<!-- Order alfabetically: --> <!-- Order alfabetically: -->
@ -54,7 +56,7 @@
<a <a
href={`/directory/${category.toLowerCase()}`} href={`/directory/${category.toLowerCase()}`}
class={cn( class={cn(
'flex w-full items-center justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40', sidebarItemStyles,
data.pathname === `/directory/${category.toLowerCase()}` data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark' ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
: '' : ''

3
src/ui/styles.ts
View File

@ -6,3 +6,6 @@ export const inputStyles =
export const badgeStyles = export const badgeStyles =
'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100'; 'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100';
export const sidebarItemStyles =
'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';