Merge pull request #14 from anishkn04/main

fix: whitespaces below and on the right side of /profiles

config.yml

@@ -2,7 +2,7 @@ menu:
   title: NCIT Alumns
   main:
     - title: Home
-      link: #
+      link: /
     - title: Alumni Directory
       subMenu:
         - category: Graduation Yearss

src/components/MainContent.astro

@@ -1,3 +1,3 @@
-<main>
+<main class="flex-1">
     <slot />
 </main>

src/components/shared/LeftSidebar.astro

@@ -4,7 +4,7 @@ const currentYear = (new Date()).getFullYear();
 const yearsRange = Array.from({ length: currentYear - startYear + 1 }, (_, i) => startYear + i);
 ---
 
-<nav id="sidebar" class="w-64 bg-gray-800 text-white p-4 fixed inset-y-0 left-0 transform transition-transform duration-200 ease-in-out -translate-x-full sm:translate-x-0 sm:relative z-30 overflow-y-auto h-full">
+<nav id="sidebar" class="w-64 bg-gray-800 text-white p-4 fixed inset-y-0 left-0 transform transition-transform duration-200 ease-in-out -translate-x-full sm:translate-x-0 sm:relative z-30 overflow-y-auto h-screen scrollbar">
   <div class="flex justify-between items-center mb-4">
     <span class="text-lg font-bold">Menu</span>
     <button id="closeBtn" class="text-white">

src/layout/TwoColLayout.astro

@@ -5,7 +5,7 @@ import MainContent from '../components/MainContent.astro';
 const { children } = Astro.props;
 ---
 
-<div class="flex h-screen">
+<div class="flex min-h-screen">
   <LeftSidebar />
   <MainContent>
     <slot/>

src/pages/profiles/index.astro

@@ -33,7 +33,7 @@ const sortedYears = Array.from(batchMap.keys()).sort();
 ---
 
 <TwoColLayout>
-  <section class="bg-gray-900 text-white p-4 sm:p-6 lg:p-8">
+  <section class="bg-gray-900 text-white p-4 sm:p-6 lg:p-8 max-h-screen overflow-y-auto">
     {sortedYears.map((year) => {
       let showAll = false;
 
@@ -42,7 +42,7 @@ const sortedYears = Array.from(batchMap.keys()).sort();
           <h3 class="text-lg sm:text-xl lg:text-2xl font-bold flex items-center justify-between">
             {year} Batch
           </h3>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+          <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4">
             {(showAll ? batchMap.get(year) : batchMap.get(year).slice(0, 3))
               .map((profile) => (
                 <ProfileCard slug={profile.slug} {...profile.data} />

tailwind.config.mjs

@@ -1,8 +1,29 @@
 /** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin');
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [
+		plugin(({ addBase, theme }) => {
+			addBase({
+				'.scrollbar': {
+					overflowY: 'auto',
+					scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.gray.800')}`,
+					scrollbarWidth: 'auto',
+				},
+				'.scrollbar::-webkit-scrollbar': {
+					height: '4px',
+					width: '4px',
+				},
+				'.scrollbar::-webkit-scrollbar-thumb': {
+					backgroundColor: theme('colors.gray.900'),
+				},
+				'.scrollbar::-webkit-scrollbar-track-piece': {
+					backgroundColor: theme('colors.gray.800'),
+				},
+			});
+		}),
+	],
 }