diff --git a/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss b/frontend/src/routes/app/components/SecondarySidebar/SecondarySidebar.module.scss --- 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 --- 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
; + const [activeTab, setActiveTab] = createSignal("chats"); + + return ( +
+
+ {activeTab()} +
+
+ { + setActiveTab((at) => (at !== "chats" ? "chats" : undefined)); + }} + > + Chats + + { + setActiveTab((at) => (at !== "notifications" ? "notifications" : undefined)); + }} + > + Notifications + +
+
+ ); }; export default SecondarySidebar;