[PATCH v1 12/13] feat(sidebar-menu): add Roundcube link

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Added Roundcube link on sidebar menu, this commit include IconRoundcube
icon component too.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/customs/app-sidebar.svelte | 22 +++++++++++++-
 .../components/icons/icon-roundcube.svelte    | 29 +++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/icons/icon-roundcube.svelte

diff --git a/src/lib/components/customs/app-sidebar.svelte b/src/lib/components/customs/app-sidebar.svelte
index 24d0106..2fba975 100644
--- a/src/lib/components/customs/app-sidebar.svelte
+++ b/src/lib/components/customs/app-sidebar.svelte
@@ -3,7 +3,7 @@
   import Separator from "$components/ui/separator/separator.svelte";
   import * as Sidebar from "$lib/components/ui/sidebar";
   import { useAuth } from "$lib/hooks/auth.svelte";
-  import { LogOut, Mails } from "lucide-svelte";
+  import { LogOut, Mails, SquareArrowOutUpRight } from "lucide-svelte";
   import type { ComponentProps } from "svelte";
   import { goto } from "$app/navigation";
   import Button from "$components/ui/button/button.svelte";
@@ -11,6 +11,7 @@
   import { page } from "$app/state";
   import { crossfade } from "svelte/transition";
   import { cubicInOut } from "svelte/easing";
+  import IconRoundcube from "$components/icons/icon-roundcube.svelte";
 
   let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 
@@ -87,6 +88,25 @@
               </Sidebar.MenuButton>
             </Sidebar.MenuItem>
           {/each}
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton>
+              {#snippet child({ props })}
+                {@const className = props.class as string}
+                <a
+                  href="https://mail.gnuweeb.org/roundcube/"
+                  {...props}
+                  class={cn("group/roundcube", className)}
+                  target="_blank"
+                >
+                  <IconRoundcube />
+                  <span>Roundcube</span>
+                  <SquareArrowOutUpRight
+                    class="!size-3 transition-transform group-hover/roundcube:!scale-125"
+                  />
+                </a>
+              {/snippet}
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
         </Sidebar.Menu>
       </Sidebar.GroupContent>
     </Sidebar.Group>
diff --git a/src/lib/components/icons/icon-roundcube.svelte b/src/lib/components/icons/icon-roundcube.svelte
new file mode 100644
index 0000000..8796ad2
--- /dev/null
+++ b/src/lib/components/icons/icon-roundcube.svelte
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="9.14 141.8 573.65 573.65">
+  <style>
+    .st0,
+    .st3 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #404f54;
+    }
+    .st3 {
+      fill: #37beff;
+    }
+  </style>
+  <path class="st3" d="M582.79 549.77L295.96 384.1V207.27l286.83 165.68z" />
+  <path class="st0" d="M9.14 549.77L295.96 384.1V207.27L9.14 372.95z" />
+  <path
+    d="M295.96 141.8c109.56 0 198.41 88.85 198.41 198.41s-88.85 198.41-198.41 198.41S97.55 449.77 97.55 340.21 186.4 141.8 295.96 141.8"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#ccc"
+  />
+  <path
+    d="M295.96 141.8c109.6 0 198.48 88.85 198.48 198.41s-88.88 198.41-198.48 198.41c-62.91-42.34-88.94-127.64-88.94-198.3s26.03-156.1 88.94-198.52"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#e5e5e5"
+  />
+  <path class="st3" d="M582.79 372.95L295.96 538.62v176.83l286.83-165.68z" />
+  <path class="st0" d="M9.14 372.95l286.82 165.67v176.83L9.14 549.77z" />
+</svg>
-- 
Muhammad Rizki