@valerius_petrini/corekit-ui 0.1.60 → 0.1.61

package/dist/components/SideNavbar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { SideNavbarProps } from "../types/Navbar.js";
+    import { twMerge } from "tailwind-merge";
+    import Button from "./Button.svelte";
+    import Text from "./Text.svelte";
+    import { page } from '$app/state';
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        items = [],
+        ...restProps
+    }: SideNavbarProps = $props();
+
+    let expanded = $state(false);
+
+    const defaultClass = "transition-[width] duration-300 overflow-hidden fixed left-0 h-full mt-14 z-[100] py-2 flex flex-col items-center gap-1 bg-sub-background/99 border-r border-box border-r-sub-background-hover";
+    const expandedClass = $derived(expanded ? "w-48" : "w-12");
+
+    const combinedClass = $derived(twMerge(
+        defaultClass,
+        expandedClass,
+        className,
+    ));
+</script>
+
+<nav class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false}>
+    {#each items as item}
+        {@const isActive = page.url.pathname === item.href}
+        <Button size="xs" class="{isActive ? 'bg-form-background text-main-text' : 'text-sub-text'} hover:text-main-text py-1 text-nowrap flex justify-start gap-2 overflow-hidden mx-1 w-[calc(100%-16px)] hover:bg-form-background px-1.5" href={item.href}>
+            <item.icon class="w-5 h-5 shrink-0"/>
+            <Text tag="span" class="transition-opacity duration-200 text-sm text-inherit {expanded ? 'w-auto opacity-100 pr-3' : 'w-0 opacity-0'}">
+                {item.label}
+            </Text>
+        </Button>
+    {/each}
+</nav>

package/dist/components/SideNavbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SideNavbarProps } from "../types/Navbar.ts";
+declare const SideNavbar: import("svelte").Component<SideNavbarProps, {}, "">;
+type SideNavbar = ReturnType<typeof SideNavbar>;
+export default SideNavbar;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as Modal } from "./components/Modal.svelte";
 export { default as Table } from "./components/Table.svelte";
 export { default as Toast } from "./components/Toast.svelte";
 export { default as Toaster } from "./components/Toaster.svelte";
+export { default as SideNavbar } from "./components/SideNavbar.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
 export { toast } from "./actions/toast.svelte.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -16,5 +16,6 @@ export { default as Modal } from "./components/Modal.svelte";
 export { default as Table } from "./components/Table.svelte";
 export { default as Toast } from "./components/Toast.svelte";
 export { default as Toaster } from "./components/Toaster.svelte";
+export { default as SideNavbar } from "./components/SideNavbar.svelte";
 export { fbmBackground } from "./actions/fbm.js";
 export { toast } from "./actions/toast.svelte.js";

package/dist/types/Navbar.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from "svelte";
 import type { BaseComponentProps } from "./BaseComponent.ts";
 export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
@@ -9,3 +10,11 @@ export interface NavbarElementProps extends BaseComponentProps {
     href?: string;
     threshold?: number;
 }
+export interface SideNavbarProps extends BaseComponentProps {
+    items?: SideNavbarItem[];
+}
+export interface SideNavbarItem {
+    href: string;
+    label: string;
+    icon: Component;
+}

package/dist/types/Navbar.js

@@ -1,2 +1,3 @@
 ;
+;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.60",
+	"version": "0.1.61",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",