feat: max-sm menu

ifpb · Sep 9, 2024 · cd2aa04 · cd2aa04
1 parent 8f81ade
commit cd2aa04
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,6 +1,4 @@
 ---
-import { string } from 'astro/zod';
-
 export interface MenuItem {
   name: string;
   link: string;
@@ -18,7 +16,7 @@ const { menu, title }: Props = Astro.props;
   class="flex flex-col items-center justify-center relative bg-[url('/imgs/ifpb-jp.png')] bg-[#0B3314]/70 bg-cover bg-blend-multiply h-[30vh] min-h-[300px] px-8"
 >
   <div
-    class="container lg:max-w-screen-lg mx-auto py-4 flex justify-between items-center absolute top-0"
+    class="container hidden sm:flex justify-between items-center absolute top-0 lg:max-w-screen-lg mx-auto py-4 px-8"
   >
     <a href="/">
       <img src="/imgs/ifpb-logo.svg" alt="Logo do IFPB" class="w-7" />
@@ -35,3 +33,14 @@ const { menu, title }: Props = Astro.props;
   </div>
   <h1 class="text-4xl text-white">{title}</h1>
 </header>
+<ul
+  class="max-sm:flex flex-wrap justify-center sm:hidden gap-2 my-2 mx-8 font-semibold"
+>
+  {
+    menu.map(({ name, link }) => (
+      <li>
+        <a href={link}>{name}</a>
+      </li>
+    ))
+  }
+</ul>
diff --git a/src/components/StudentCard.astro b/src/components/StudentCard.astro
@@ -40,7 +40,7 @@ const links = icons
 ---
 
 <div
-  class="student-card rounded-md overflow-hidden shadow-lg bg-white text-center"
+  class="student-card max-w-[460px] rounded-md overflow-hidden shadow-lg bg-white text-center"
 >
   <figure class="mx-auto overflow-hidden">
     <a href={student.data.addresses.linkedin} target="_blank">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,6 +10,10 @@ import StudentCard from '../components/StudentCard.astro';
 import CourseCard from '../components/CourseCard.astro';
 
 const menu = [
+  {
+    name: 'Cursos',
+    link: '#courses',
+  },
   {
     name: 'Disciplinas',
     link: '#subjects',
@@ -144,7 +148,9 @@ const students = await getCollection('students');
             </a>
           </p>
         </div>
-        <div class="text-black grid grid-cols-1 md:grid-cols-4 gap-5">
+        <div
+          class="text-black grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 justify-items-center gap-5"
+        >
           {students.map((student) => <StudentCard student={student} />)}
         </div>
       </div>