feat: settings panel with page tabbing

1 files changed, 26 insertions, 1 deletions

diff --git a/assets/style.scss b/assets/style.scss
index f781976..7bdffa0 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -143,7 +143,7 @@ p {
   margin: 0;
 }
 
-.chats-list, .roster-list {
+.chats-list, .roster-list, .settings-sidebar {
   border-width: 0 2px 0 0;
   border-color: black;
   border-style: solid;
@@ -155,6 +155,20 @@ p {
   flex-direction: column;
 }
 
+.settings-sidebar {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-sidebar>* {
+  padding: 8px 16px;
+}
+
+.settings-sidebar>.open, .settings-sidebar>*:hover {
+  background: #00000060;
+}
+
 .chats-list>*, .roster-list>*, .settings .header {
   padding: 8px 16px;
 }
@@ -604,6 +618,17 @@ p {
 .settings {
   width: 75vw;
   height: 75vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-main {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.settings-page {
+  flex: 1 1 0;
 }
 
 .modal .overlay {