From 43a47deb3bf93b49a77e90adae641d2b5cbddafe Mon Sep 17 00:00:00 2001
From: Luiz Chaves <lucachaves@gmail.com>
Date: Sun, 20 Oct 2024 15:13:46 -0300
Subject: [PATCH] fix: improve mobile view

---
 src/components/NavBar.astro         | 2 +-
 src/components/Sidebar.astro        | 2 +-
 src/components/TableOfContent.astro | 2 +-
 src/layouts/BaseLayout.astro        | 2 +-
 src/layouts/MarkDownLayout.astro    | 2 +-
 src/pages/classnotes.astro          | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 86bf18b..32fcc28 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -9,7 +9,7 @@ import ThemeToggle from './ThemeToggle';
   <section class="px-4 py-2">
     <nav class="flex items-center justify-between">
       <a class="text-lg font-bold font-heading" href="/dw/">
-        <span class="md:hidden">DW</span>
+        <span class="sm:hidden">Desen. Web</span>
         <span class="max-sm:hidden">Desenvolvimento Web</span>
       </a>
 
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 4c53787..a0b8bf4 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -4,7 +4,7 @@ import { MENU } from '../consts';
 
 <aside
   id="default-sidebar"
-  class="fixed z-50 left-0 top-11 md:h-screen md:w-36 xl:w-48 self-start bg-gray-100 dark:bg-slate-800 hidden lg:block"
+  class="fixed z-50 left-0 top-11 md:h-screen w-full md:w-64 self-start shadow-md bg-gray-100 dark:bg-slate-800 hidden dark:border-r-white/30 dark:border-r lg:block"
   aria-label="Sidebar"
 >
   <div class="md:h-screen px-3 py-4 overflow-y-auto">
diff --git a/src/components/TableOfContent.astro b/src/components/TableOfContent.astro
index 13318c6..a83640b 100644
--- a/src/components/TableOfContent.astro
+++ b/src/components/TableOfContent.astro
@@ -11,7 +11,7 @@ const { headings } = Astro.props;
 ---
 
 <nav
-  class="toc fixed top-11 right-0 h-[calc(100vh-2.75rem)] py-8 px-2 lg:w-56 xl:w-64 self-start hidden lg:block overflow-y-scroll"
+  class="toc fixed top-11 right-0 h-[calc(100vh-2.75rem)] py-8 lg:w-56 xl:w-64 self-start hidden xl:block overflow-y-scroll"
 >
   <ul class="flex flex-col gap-2">
     {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 83ca435..b7732ee 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -26,7 +26,7 @@ const { pageTitle } = Astro.props;
     >
       <Sidebar />
 
-      <article class="mx-auto py-8 lg:pl-40 xl:pl-64 max-sm:px-4">
+      <article class="mx-auto lg:ml-64 py-8 px-4 md:w-full">
         <slot />
       </article>
     </div>
diff --git a/src/layouts/MarkDownLayout.astro b/src/layouts/MarkDownLayout.astro
index 6182ea9..1d8a3cf 100644
--- a/src/layouts/MarkDownLayout.astro
+++ b/src/layouts/MarkDownLayout.astro
@@ -60,7 +60,7 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/src${file.split('/src').pop()}`;
       <Sidebar />
 
       <article
-        class="basis-full prose 2xl:prose-xl mx-auto py-8 max-sm:px-4 xl:px-4 xl:max-w-screen-md dark:prose-invert overflow-hidden"
+        class="mx-auto lg:max-xl:ml-64 py-8 px-4 md:px-6 max-xl:max-w-none w-full prose 2xl:prose-xl dark:prose-invert overflow-hidden"
       >
         <slot />
 
diff --git a/src/pages/classnotes.astro b/src/pages/classnotes.astro
index e0bd08d..0808d1c 100644
--- a/src/pages/classnotes.astro
+++ b/src/pages/classnotes.astro
@@ -16,10 +16,10 @@ classroomEntries.sort(
 ---
 
 <BaseLayout pageTitle="Conteúdos">
-  <main class="mx-auto">
+  <main>
     <h1 class="font-bold text-4xl text-center pb-16 pt-24">Conteúdos</h1>
     <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-16 px-4"
+      class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-16 px-4"
     >
       {
         classroomEntries.map((entry) => (