From db910b3d8d6246b3a99b666b48fb255d5632e859 Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Thu, 4 Jun 2026 21:29:05 +0100
Subject: [PATCH] secondarySidebar tabs

---
 .../SecondarySidebar.module.scss              | 22 +++++++++++++
 .../SecondarySidebar/SecondarySidebar.tsx     | 31 +++++++++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss b/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss
index 718b361..dcc95e8 100644
--- a/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss
+++ b/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss
@@ -1,7 +1,29 @@
 .component {
   border-left: 1px solid rgb(var(--uk-sys-color-outline-variant));
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+}
+
+.content {
+  &[data-visible="true"] {
+    border-right: 1px solid rgb(var(--uk-sys-color-outline-variant));
+  }
+}
+
+.tabs {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.25rem;
+
+  > button {
+    writing-mode: vertical-lr;
+    text-orientation: sideways;
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    height: unset !important;
+  }
 }
diff --git a/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.tsx b/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.tsx
index fbb7cfd..98b9a8c 100644
--- a/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.tsx
+++ b/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.tsx
@@ -1,8 +1,35 @@
-import type { Component } from "solid-js";
+import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx";
+import { type Component, createSignal } from "solid-js";
 import styles from "./SecondarySidebar.module.scss";
 
 const SecondarySidebar: Component = () => {
-  return <div class={styles.component}></div>;
+  const [activeTab, setActiveTab] = createSignal<string | undefined>("chats");
+
+  return (
+    <div class={styles.component}>
+      <div class={styles.content} data-visible={activeTab() !== undefined && "true"}>
+        {activeTab()}
+      </div>
+      <div class={styles.tabs}>
+        <UKButton
+          color={activeTab() === "chats" ? "tonal" : "standard"}
+          onClick={() => {
+            setActiveTab((at) => (at !== "chats" ? "chats" : undefined));
+          }}
+        >
+          Chats
+        </UKButton>
+        <UKButton
+          color={activeTab() === "notifications" ? "tonal" : "standard"}
+          onClick={() => {
+            setActiveTab((at) => (at !== "notifications" ? "notifications" : undefined));
+          }}
+        >
+          Notifications
+        </UKButton>
+      </div>
+    </div>
+  );
 };
 
 export default SecondarySidebar;
-- 
2.51.2