Sidebar controls for calendar

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

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();