Merge pull request #31 from dmackdev/demo-collapsible-sidebar

Make sidebar collapsible for demo

Author: dmackdev

examples/demo/src/main.rs

@@ -3,14 +3,14 @@ use apps::{
     editor::JsonEditorExample, search::SearchExample,
     toggle_buttons::ToggleButtonsCustomisationDemo, Example, Show,
 };
-use egui::global_theme_preference_buttons;
 use serde_json::json;
 
 mod apps;
 
 struct DemoApp {
     examples: Vec<Box<dyn Show>>,
     open_example_idx: Option<usize>,
+    left_sidebar_expanded: bool,
 }
 
 impl Default for DemoApp {
@@ -42,6 +42,7 @@ impl Default for DemoApp {
                 Box::new(ToggleButtonsCustomisationDemo::new(complex_object)),
             ],
             open_example_idx: None,
+            left_sidebar_expanded: true,
         }
     }
 }
@@ -50,13 +51,16 @@ impl eframe::App for DemoApp {
     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
         egui::SidePanel::left("left-panel")
             .resizable(false)
-            .show(ctx, |ui| {
-                egui::TopBottomPanel::top("theme-preference-top-panel")
-                    .frame(egui::Frame::side_top_panel(&ctx.style()).inner_margin(10.0))
-                    .show_inside(ui, |ui| {
-                        global_theme_preference_buttons(ui);
-                    });
+            .frame(egui::Frame::side_top_panel(&ctx.style()).inner_margin(10.0))
+            .show_animated(ctx, self.left_sidebar_expanded, |ui| {
+                collapsible_sidebar_button_ui(ui, &mut self.left_sidebar_expanded);
+                ui.add_space(10.0);
+
+                ui.label(egui::RichText::new("Theme").monospace());
+                egui::global_theme_preference_buttons(ui);
                 ui.add_space(10.0);
+
+                ui.label(egui::RichText::new("Examples").monospace());
                 ui.with_layout(egui::Layout::top_down_justified(egui::Align::LEFT), |ui| {
                     for (idx, example) in self.examples.iter().enumerate() {
                         let is_open = self
@@ -74,36 +78,54 @@ impl eframe::App for DemoApp {
                 });
             });
 
-        match self.open_example_idx {
-            Some(open_idx) => {
-                let example = &mut self.examples[open_idx];
-                egui::TopBottomPanel::top("top-panel")
-                    .frame(egui::Frame::side_top_panel(&ctx.style()).inner_margin(10.0))
-                    .show(ctx, |ui| {
+        let example = self
+            .open_example_idx
+            .map(|open_idx| &mut self.examples[open_idx]);
+
+        if let Some(example) = &example {
+            egui::TopBottomPanel::top("top-panel")
+                .frame(egui::Frame::side_top_panel(&ctx.style()).inner_margin(10.0))
+                .show(ctx, |ui| {
+                    ui.horizontal_centered(|ui| {
+                        if !self.left_sidebar_expanded {
+                            collapsible_sidebar_button_ui(ui, &mut self.left_sidebar_expanded);
+                        }
                         ui.heading(example.title());
                     });
-                egui::CentralPanel::default().show(ctx, |ui| {
-                    example.show(ui);
                 });
-            }
-            None => {
-                egui::CentralPanel::default().show(ctx, |ui| {
+        }
+
+        egui::CentralPanel::default().show(ctx, |ui| {
+            match example {
+                Some(example) => {
+                    example.show(ui);
+                }
+                None => {
+                    if !self.left_sidebar_expanded {
+                        collapsible_sidebar_button_ui(ui, &mut self.left_sidebar_expanded);
+                    }
                     ui.with_layout(
                         egui::Layout::centered_and_justified(egui::Direction::LeftToRight),
                         |ui| {
                             ui.heading("Select an example.");
                         },
                     );
-                });
-            }
-        }
+                }
+            };
+        });
     }
 
     fn clear_color(&self, visuals: &egui::Visuals) -> [f32; 4] {
         visuals.panel_fill.to_normalized_gamma_f32()
     }
 }
 
+fn collapsible_sidebar_button_ui(ui: &mut egui::Ui, open: &mut bool) {
+    if ui.button("☰").clicked() {
+        *open = !*open;
+    }
+}
+
 #[cfg(not(target_arch = "wasm32"))]
 fn main() {
     let _ = eframe::run_native(