bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-04-27 15:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: delete unused navigation components and update site footer

Browse source
This commit is contained in:
Bart van der Braak 2024-02-19 01:09:40 +01:00
parent 5343f769fc
commit 1293bf6ad5
9 changed files with 8 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/site/index.ts
View file

@ -1,9 +1,9 @@
export { default as Metadata } from './metadata.svelte';
export { default as SiteFooter } from './site-footer.svelte';
export { default as UserNav } from './user-nav.svelte';
export { default as SiteNavBar } from './site-navbar.svelte';
export { default as TailwindIndicator } from './tailwind-indicator.svelte';
export { default as ModeToggle } from './mode-toggle.svelte';
export { default as Particles } from './particles.svelte';
export * from './icons';
export * from './nav';
export * from './icons';

2
src/lib/components/site/nav/index.ts
View file

@ -1,2 +0,0 @@
export { default as MainNav } from './main-nav.svelte';
export { default as MobileNav } from './mobile-nav.svelte';

25
src/lib/components/site/nav/main-nav.svelte
View file

@ -1,25 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { cn } from '$lib/utils';
import { navConfig } from '$lib/config/nav';
export let authenticated = false;
</script>
<div class="mr-4 hidden md:flex">
<nav class="flex items-center space-x-6 text-sm font-medium">
{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
<a
href={navItem.href}
class={cn(
'transition-colors hover:text-foreground/80',
$page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
)}
>
{navItem.title}
</a>
{/if}
{/each}
</nav>
</div>

23
src/lib/components/site/nav/mobile-link.svelte
View file

@ -1,23 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { cn } from '$lib/utils';
export let href: string;
export let open: boolean;
let className: string | undefined | null = undefined;
export { className as class };
</script>
<a
{href}
on:click={() => (open = false)}
class={cn(
$page.url.pathname === href ? 'text-foreground' : 'text-foreground/60',
'hover:text-foreground',
className
)}
{...$$restProps}
>
<slot />
</a>

68
src/lib/components/site/nav/mobile-nav.svelte
View file

@ -1,68 +0,0 @@
<script lang="ts">
import * as Sheet from '$lib/components/ui/sheet/';
import { HamburgerMenu } from 'radix-icons-svelte';
import { Button } from '$lib/components/ui/button';
import { navConfig } from '$lib/config/nav';
import { siteConfig } from '$lib/config/site';
import { Icons } from '../icons';
import MobileLink from './mobile-link.svelte';
let open = false;
export let authenticated = false;
</script>
<Sheet.Root bind:open>
<Sheet.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="ghost"
class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
>
<HamburgerMenu class="h-5 w-5" />
<span class="sr-only">Toggle Menu</span>
</Button>
</Sheet.Trigger>
<Sheet.Content side="right" class="pr-0">
<MobileLink href="/" class="flex items-center" bind:open>
<span class="sr-only">Logo icon (return home)</span>
<div class="mr-4 rounded-sm bg-gray-950 p-0.5 dark:bg-transparent">
<Icons.logo />
</div>
<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
</MobileLink>
<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pl-1 pt-10">
<div class="flex flex-col space-y-3">
{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
<MobileLink href={navItem.href} bind:open class="pt-2 text-5xl font-bold">
{navItem.title}
</MobileLink>
{/if}
{/each}
</div>
<div class="flex flex-col space-y-2">
{#each navConfig.sidebarNav as navItem, index (index)}
<div class="flex flex-col space-y-3 pt-6">
<h4 class="font-medium">{navItem.title}</h4>
{#if navItem?.items?.length}
{#each navItem.items as item}
{#if !item.disabled && item.href}
<MobileLink href={item.href} bind:open class="text-muted-foreground">
{item.title}
{#if item.label}
<span
class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000]"
>
{item.label}
</span>
{/if}
</MobileLink>
{/if}
{/each}
{/if}
</div>
{/each}
</div>
</div>
</Sheet.Content>
</Sheet.Root>

3
src/lib/components/site/site-footer.svelte
View file

@ -5,8 +5,7 @@
<footer class="container py-6">
<div class="space-y-1">
<p class="text-center text-sm text-muted-foreground">
&copy; {new Date().getFullYear()} &mdash; {siteConfig.name} by {siteConfig.author}. Licensed
under GPL-3.0.
&copy; {new Date().getFullYear()} &mdash; <a href={siteConfig.links.gitHubProject} target="_blank">{siteConfig.name}</a> by <a href={siteConfig.links.gitHubProfile} target="_blank">{siteConfig.author}</a>. Licensed GPL-3.0.
</p>
</div>
</footer>

9
src/lib/components/site/site-navbar.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
import { Icons, ModeToggle, UserNav } from '$lib/components/site';
import { siteConfig } from '$lib/config/site';
import UserNav from './nav/user-nav.svelte';
export let authenticated = false;
export let user: object | null = null;
@ -18,11 +17,11 @@
</div>
<span class="text-xl font-bold tracking-tight">{siteConfig.name}</span>
</a>
<MainNav {authenticated} />
<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
<ModeToggle />
{#if !authenticated}
<ModeToggle />
{/if}
<UserNav {authenticated} {user} />
<MobileNav {authenticated} />
</div>
</div>
</header>

2
src/lib/components/site/nav/user-nav.svelte → src/lib/components/site/user-nav.svelte
View file

@ -26,7 +26,7 @@
</div>
</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Dashboards</DropdownMenu.Item>
<DropdownMenu.Item href="/dashboard">Dashboards</DropdownMenu.Item>
<DropdownMenu.Item>Connectors</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Label class="text-xs leading-none text-muted-foreground">

17
src/lib/config/nav.ts
View file

@ -1,17 +0,0 @@
import type { NavItem, SidebarNavItem } from '$lib/types/nav';
interface NavConfig {
mainNav: NavItem[];
sidebarNav: SidebarNavItem[];
}
export const navConfig: NavConfig = {
mainNav: [
{
title: 'Dashboard',
href: '/dashboard',
auth: true
}
],
sidebarNav: []
};