feat: wider screen UI responsivity (#137)

src/components/app.rs

@@ -48,7 +48,7 @@ pub(crate) fn App() -> Element {
         document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
 
         div {
-            class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
+            class: "min-h-screen flex flex-col text-gray-300 bg-gray-900",
             Router::<Route> {}
         }
     }

src/components/bottom_panel.rs

@@ -1,6 +1,7 @@
-use crate::components::navigation::Navigation;
 use dioxus::prelude::*;
 
+use crate::components::navigation;
+
 #[component]
 pub(crate) fn BottomPanel() -> Element {
     let navigation_expanded = use_signal(|| false);
@@ -10,12 +11,12 @@ pub(crate) fn BottomPanel() -> Element {
             class: format!(
                 "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
                 if navigation_expanded() {
-                    "h-[130px]"
+                    "h-[132px]"
                 } else {
                     "h-[66px]"
                 }
             ),
-            Navigation {
+            navigation::Bottom {
                 is_expanded: navigation_expanded,
             }
         }

src/components/category_calendar_task_list.rs

@@ -23,12 +23,12 @@ pub(crate) fn CategoryCalendarTaskList() -> Element {
 
     rsx! {
         div {
-            class: "pt-4 flex flex-col gap-8",
+            class: "pt-3 flex flex-col gap-8",
             for date_current in today_date.iter_days().take(CALENDAR_LENGTH_DAYS) {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         div {
                             class: "pt-1",
                             {

src/components/category_today_task_list.rs

@@ -52,7 +52,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
                             class: "mx-1.5",
                             icon: FaWater
@@ -70,7 +70,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
                             class: "mx-1.25",
                             height: 22,
@@ -90,7 +90,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
             div {
                 class: "flex flex-col gap-4",
                 div {
-                    class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                    class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                     Icon {
                         class: "mx-1.25",
                         height: 22,

src/components/create_button.rs

@@ -10,7 +10,7 @@ pub(crate) fn CreateButton() -> Element {
     let current_route = use_route();
     rsx! {
         ButtonPrimary {
-            class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4",
+            class: "pointer-events-auto sm:self-auto *:rounded-full! *:p-4",
             onclick: move |_| {
                 *TASK_BEING_EDITED.write() = None;
                 *PROJECT_BEING_EDITED.write() = None;

src/components/mod.rs

@@ -10,7 +10,6 @@ pub(crate) mod error_boundary_message;
 pub(crate) mod input;
 pub(crate) mod input_label;
 pub(crate) mod navigation;
-pub(crate) mod navigation_item;
 pub(crate) mod project_form;
 pub(crate) mod project_list;
 pub(crate) mod project_select;

src/components/navigation/bottom.rs

@@ -1,4 +1,3 @@
-use crate::components::navigation_item::NavigationItem;
 use crate::route::Route;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
@@ -9,13 +8,13 @@ use dioxus_free_icons::icons::fa_solid_icons::{
 };
 
 #[component]
-pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
+pub(crate) fn Bottom(is_expanded: Signal<bool>) -> Element {
     rsx! {
         div {
             class: "grid grid-cols-5 justify-stretch",
             button {
                 class: format!(
-                    "py-2 flex flex-row justify-center items-center cursor-pointer",
+                    "py-2 flex flex-row justify-center items-center sm:hidden cursor-pointer",
                 ),
                 onclick: move |_| is_expanded.set(!is_expanded()),
                 div {
@@ -30,41 +29,41 @@ pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
                     }
                 }
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryNextStepsPage,
                 icon: FaSignsPost
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryCalendarPage,
                 icon: FaCalendarDays
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryTodayPage,
                 icon: FaCalendarDay
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryInboxPage,
                 icon: FaInbox
             },
             {if is_expanded() {
                 rsx! {
-                    NavigationItem {
+                    super::Item {
                         route: Route::ProjectsPage,
                         icon: FaList
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryTrashPage,
                         icon: FaTrashCan
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryDonePage,
                         icon: FaVolcano
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategorySomedayMaybePage,
                         icon: FaLightbulb
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryWaitingForPage,
                         icon: FaHourglassHalf
                     }

src/components/navigation/item.rs

@@ -3,17 +3,14 @@ use dioxus::prelude::*;
 use dioxus_free_icons::{Icon, IconShape};
 
 #[component]
-pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
+pub(crate) fn Item<I: IconShape + Clone + PartialEq + 'static>(route: Route, icon: I) -> Element {
-    route: Route,
-    icon: I,
-) -> Element {
     let current_route = use_route::<Route>();
 
     rsx! {
         Link {
             to: route.clone(),
             class: format!(
-                "py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
+                "py-2.5 sm:px-6 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
             ),
             div {
                 class: format!("pt-2.5 px-4 {} transition-all duration-150",

src/components/navigation/mod.rs

@@ -0,0 +1,7 @@
+mod bottom;
+mod item;
+mod side;
+
+pub(crate) use bottom::Bottom;
+use item::Item;
+pub(crate) use side::Side;

src/components/navigation/side.rs

@@ -0,0 +1,52 @@
+use crate::route::Route;
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost, FaTrashCan,
+    FaVolcano,
+};
+
+#[component]
+pub(crate) fn Side(class: Option<String>) -> Element {
+    rsx! {
+        div {
+            class: format!("flex flex-col {}", class.unwrap_or(String::new())),
+            super::Item {
+                route: Route::CategoryInboxPage,
+                icon: FaInbox
+            },
+            super::Item {
+                route: Route::CategoryTodayPage,
+                icon: FaCalendarDay
+            },
+            super::Item {
+                route: Route::CategoryCalendarPage,
+                icon: FaCalendarDays
+            },
+            super::Item {
+                route: Route::CategoryNextStepsPage,
+                icon: FaSignsPost
+            },
+            super::Item {
+                route: Route::CategoryWaitingForPage,
+                icon: FaHourglassHalf
+            },
+            super::Item {
+                route: Route::CategorySomedayMaybePage,
+                icon: FaLightbulb
+            },
+            super::Item {
+                route: Route::CategoryDonePage,
+                icon: FaVolcano
+            },
+            super::Item {
+                route: Route::CategoryTrashPage,
+                icon: FaTrashCan
+            },
+            super::Item {
+                route: Route::ProjectsPage,
+                icon: FaList
+            }
+        }
+    }
+}

src/components/project_list.rs

@@ -11,7 +11,7 @@ pub(crate) fn ProjectList() -> Element {
             class: "flex flex-col",
             for project in projects {
                 div {
-                    class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
+                    class: "px-7 sm:px-8 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
                     key: "{project.id}",
                     onclick: move |_| {
                         *PROJECT_BEING_EDITED.write() = Some(project.clone());

src/components/sticky_bottom.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 pub(crate) fn StickyBottom(children: Element) -> Element {
     rsx! {
         div {
-            class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none",
+            class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none sm:hidden",
             {children}
         }
     }

src/components/task_list.rs

@@ -23,7 +23,7 @@ pub(crate) fn TaskList(
                 div {
                     key: "{task.task.id}",
                     class: format!(
-                        "px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
+                        "px-7 sm:px-8 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
                         if task.task.deadline.is_some() || !task.subtasks.is_empty() {
                             "pb-0.25"
                         } else if let Category::Calendar { time, .. } = &task.task.category {

src/layouts/navigation.rs

@@ -1,3 +1,4 @@
+use crate::components;
 use crate::components::bottom_panel::BottomPanel;
 use crate::components::create_button::CreateButton;
 use crate::components::sticky_bottom::StickyBottom;
@@ -27,11 +28,24 @@ pub(crate) fn Navigation() -> Element {
 
     rsx! {
         div {
-            class: "grow flex flex-col pb-36",
+            class: "grow flex flex-col sm:flex-row pb-36 sm:pb-0",
+            div {
+                class: "hidden sm:flex sm:flex-col gap-4 py-3.25 items-center bg-gray-800",
+                components::navigation::Side {},
+                div {
+                    CreateButton {}
+                }
+            }
+            div {
+                class: "grow flex flex-col py-4",
                 Outlet::<Route> {}
             }
+        }
         StickyBottom {
+            div {
+                class: "m-4 self-end",
                 CreateButton {},
+            }
             BottomPanel {}
         }
     }

src/views/project_form_page.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 pub(crate) fn ProjectFormPage() -> Element {
     rsx! {
         ErrorBoundaryMessage {
-            class: "grow py-4 flex flex-col gap-12",
+            class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12",
             ProjectForm {}
         }
     }

src/views/task_form_page.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 pub(crate) fn TaskFormPage() -> Element {
     rsx! {
         ErrorBoundaryMessage {
-            class: "grow py-4 flex flex-col gap-12",
+            class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12",
             TaskForm {}
         }
     }