Sidebar controls for calendar

- Added toggle for switching between day/week/month (calendar) in the sidebar
- Added a "lightdivider" shared.css var

src/_/code/shared.css

@@ -1,6 +1,7 @@
 :root {
     --main: #FFE9C8;
     --accent: #570b0b;
+    --lightaccent: #760f0f;
     --darkaccent: #dfc9ac;
     --text: #340000;
     --yellow: #f1f3c3;
@@ -50,6 +51,7 @@
 @media (prefers-color-scheme: dark) {
 :root {
     --main: #2A150E;
+    --lightaccent: #69413a;
     --accent: #3D2622;
     --darkaccent: #240609;
     --text: #FADFB6;

src/components/Sidebar.js

@@ -7,6 +7,54 @@ class Sidebar extends Shadow {
     constructor(width) {
         super()
         this.SIDEBAR_WIDTH = width
+        this.showCalendarControls = global.currentApp() === "Calendar";
+    }
+
+    CalendarControls() {
+        const getButton = (label) => {
+            return button(label)
+                .fontSize(1.2, em)
+                .paddingVertical(0.45, em)
+                .paddingHorizontal(0.8, em)
+                .border("1px solid var(--divider)")
+                .borderRadius(0.6, em)
+                .background("var(--accent)")
+                .color("var(--headertext)")
+                .cursor("pointer")
+        }
+
+        return VStack(() => {
+            p("Calendar View")
+                .fontSize(1, em)
+                .fontWeight("bold")
+                .color("var(--headertext)")
+                .fontFamily("Arial")
+                .textAlign("Center")
+                .marginBottom(0.5, em)
+            HStack(() => {
+                getButton("day")
+                    .onTap(() => {
+                        if ($("calendar-").changeView("day")) {
+                            $("home-").closeSidebar();
+                        }
+                    })
+                getButton("week")
+                    .onTap(() => {
+                        if ($("calendar-").changeView("week")) {
+                            $("home-").closeSidebar();
+                        }
+                    })
+                getButton("month")
+                    .onTap(() => {
+                        if ($("calendar-").changeView("month")) {
+                            $("home-").closeSidebar();
+                        }
+                    })
+            })
+            .gap(0.5, em)
+            .justifyContent("center")
+        })
+        .width(100, pct)
     }
 
     SidebarItem(text) {
@@ -15,7 +63,7 @@ class Sidebar extends Shadow {
             .fontWeight("bold")
             .color("var(--headertext)")
             .fontFamily("Arial")
-            .marginLeft(3, em)
+            .marginLeft(1, em)
             .marginTop(2, em)
             .onTap(function (done) {
                 if (done) {
@@ -64,10 +112,14 @@ class Sidebar extends Shadow {
                         this.openProfile()
                 })
                 .paddingBottom(1, em)
-                
-            this.SidebarItem("Logout")
+
+            if (this.showCalendarControls) {
+                this.CalendarControls()
+            }
 
             VStack(() => {
+                this.SidebarItem("Logout")
+
                 Toggle("Enable Push Notifications")
                     .marginLeft(1, em)
     
@@ -98,6 +150,11 @@ class Sidebar extends Shadow {
         .background("var(--sidebar)")
     }
 
+    toggleCalendarControls() {
+        this.showCalendarControls = !this.showCalendarControls;
+        this.rerender();
+    }
+
     openProfile() {
         $("appwindowcontainer-").openProfile()
         $("home-").closeSidebar();

src/components/TopBar.js

@@ -45,6 +45,7 @@ class TopBar extends Shadow {
         .gap(0.5, em)
         .marginTop(4, em)
         .onNavigate(() => {
+            $("sidebar-").toggleCalendarControls();
             this.$("p").attr({app: global.currentApp()})
         })
     }