Add basic mobile layout

Wollaston · Oct 19, 2024 · 3ddf117 · 3ddf117
1 parent d0e45cb
commit 3ddf117
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/app/components.rs b/src/app/components.rs
@@ -4,7 +4,7 @@ use leptos_router::Outlet;
 #[component]
 pub fn Layout() -> impl IntoView {
     view! {
-        <div class="flex flex-row min-h-screen overflow-hidden">
+        <div class="flex flex-col lg:flex-row min-h-screen overflow-hidden">
             <Sidebar />
             <Outlet />
         </div>
@@ -14,7 +14,7 @@ pub fn Layout() -> impl IntoView {
 #[component]
 fn Sidebar() -> impl IntoView {
     view! {
-        <div class="flex flex-col h-screen overflow-hidden justify-between w-32 bg-[#fee5b0] drop-shadow-xl dark:bg-indigo-900">
+        <div class="flex flex-col h-min lg:h-screen overflow-hidden justify-between lg:w-32 bg-[#fee5b0] drop-shadow-xl dark:bg-indigo-900">
             <ul class="m-2 p-2">
                 <li class="font-semibold text-lg text-stone-800 hover:text-blue-700 dark:text-stone-100 dark:hover:text-[#fd8a04]"><a href="/">HOME</a></li>
                 <li class="font-semibold text-lg text-stone-800 hover:text-blue-700 dark:text-stone-100 dark:hover:text-[#fd8a04]"><a href="/blog">BLOG</a></li>