sidebar has animations now

frontend/src/components/Dashboard/SidebarView.svelte

@@ -139,7 +139,9 @@
             <div class="relative flex flex-row space-x-2 hover:bg-accent hover:text-accent-foreground" on:click={() => { createCommunityOpen = !createCommunityOpen; }}>
               <IconSquarePlus class="h-6 w-6 text-neutral-800 dark:text-neutral-300"/>
               {#if expanded}
-                <span class="absolute left-7" in:fade="{fadeIn}" out:fade="{fadeOut}">Create Community</span>
+                <div class="sidebar-item-text">
+                  <span class="absolute left-7" in:fade="{fadeIn}" out:fade="{fadeOut}">Create Community</span>
+                </div>
               {/if}
             </div>
           </Dialog.Trigger>

frontend/src/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
+  import { onMount } from "svelte";
+  import { fade, slide } from 'svelte/transition';
+  import { quintOut } from 'svelte/easing';
+
   import { Button } from "$lib/components/ui/button/index.js";
   //import * from '@tabler/icons-svelte';
   import {
@@ -26,6 +29,34 @@
   let isCtrlOrCmdDown: boolean = false;
   let isBKeyDown: boolean = false;
 
+  export let itemStyle: string = "flex flex-row space-x-2 hover:bg-accent hover:text-accent-foreground";
+  export let iconStyle: string = "h-6 w-6 text-neutral-800 dark:text-neutral-300";
+  export let spanStyle: string = "absolute left-10";
+
+  export let sidebarWidth: string = "60px";
+  let INITIAL_SIDEBAR_WIDTH: string;
+  export let expandedSidebarWidth: string = "250px";
+
+  export let sidebarItems: SidebarItem[] = [];
+
+  export let customIndex: number = -1;
+
+  onMount(() => {
+    INITIAL_SIDEBAR_WIDTH = sidebarWidth;
+  });
+
+  // Function to toggle the expanded state
+  function toggleExpansion() {
+    isExpanded = !isExpanded;
+
+    if (isExpanded) {
+      // Calculate the new width including the text
+      sidebarWidth = expandedSidebarWidth;
+    } else {
+      sidebarWidth = INITIAL_SIDEBAR_WIDTH; // Reset to initial width
+    }
+  }
+
   function handleKeyDown(event) {
     // Only want to handle first press
     if (event.repeat) {
@@ -46,7 +77,7 @@
     }
 
     if (isCtrlOrCmdDown && isBKeyDown) {
-      isExpanded = !isExpanded;
+      toggleExpansion();
     }
   }
 
@@ -63,29 +94,18 @@
         break;
     }
   }
-
-  export let itemStyle: string = "flex flex-row space-x-2 hover:bg-accent hover:text-accent-foreground";
-  export let iconStyle: string = "h-6 w-6 text-neutral-800 dark:text-neutral-300";
-  export let spanStyle: string = "absolute left-10";
-
-  export let sidebarWidth: string = "60px";
-  const sidebarStyle: string = `p-3 h-screen space-y-6 w-[${sidebarWidth}] bg-black drop-shadow-md`;
-
-  export let sidebarItems: SidebarItem[] = [];
-
-  export let customIndex: number = -1;
 </script>
 
 <svelte:window
   on:keydown={handleKeyDown}
   on:keyup={onKeyUp}
 />
 
-<nav class:expanded={isExpanded} class={sidebarStyle}>
+<nav class:expanded={isExpanded} class="p-3 h-screen space-y-6 bg-black drop-shadow-md" style="width: {sidebarWidth}; transition: width 0.125s ease-out; grid-area: nav; overflow: hidden;">
   <Tooltip.Root openDelay={250}>
     <Tooltip.Trigger asChild let:builder>
       <!-- Icon for expand collapse -->
-      <Button builders={[builder]} variant="ghost" on:click={() => isExpanded = !isExpanded} class="p-0 flex justify-start">
+      <Button builders={[builder]} variant="ghost" on:click={toggleExpansion} class="p-0 flex justify-start">
         <IconLayoutSidebar class="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
       </Button>
     </Tooltip.Trigger>
@@ -99,21 +119,22 @@
       {#if i === customIndex}
         <slot />
       {:else}
-        <a href={item.href} target={item.target} class={itemStyle}><svelte:component this={item.iconComponent} class={iconStyle}/>{#if isExpanded}<span class={spanStyle} in:fade="{fadeIn}" out:fade="{fadeOut}">{item.text}</span>{/if}</a>
+        <a href={item.href} target={item.target} class={itemStyle}>
+          <svelte:component this={item.iconComponent} class={iconStyle}/>
+          {#if isExpanded}
+            <div class="sidebar-item-text">
+              <span class={spanStyle} in:fade="{fadeIn}" out:fade="{fadeOut}">{item.text}</span>
+            </div>
+          {/if}
+        </a>
       {/if}
     {/each}
 	</div>
 </nav>
 
 <style>
-	nav {
-		grid-area: nav;
-		transition: ease-out 200ms;
-		overflow: hidden;
-	}
-
 	.expanded {
-		transition: ease-out 200ms;
+		transition: width 0.125s ease-out;
 		width: 250px;
 	}
 </style>

frontend/src/components/Sidebar/index.ts

@@ -1,4 +1,3 @@
-import StandardSidebar from "./StandardSidebar.svelte";
 import Sidebar from "./Sidebar.svelte";
 
 
@@ -11,6 +10,5 @@ interface SidebarItem {
 
 export {
   type SidebarItem,
-  StandardSidebar,
   Sidebar
 };

frontend/src/components/ui/sheet/index.ts

@@ -0,0 +1,106 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { type VariantProps, tv } from "tailwind-variants";
+
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
+
+export const sheetVariants = tv({
+	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	variants: {
+		side: {
+			top: "inset-x-0 top-0 border-b",
+			bottom: "inset-x-0 bottom-0 border-t",
+			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
+		},
+	},
+	defaultVariants: {
+		side: "right",
+	},
+});
+
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	bottom: {
+		in: {
+			y: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	left: {
+		in: {
+			x: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	right: {
+		in: {
+			x: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+};
+
+export type Side = VariantProps<typeof sheetVariants>["side"];