Added comments

compass/app/resource/layout.tsx

@@ -14,6 +14,7 @@ export default function RootLayout({
 
     return (
         <div className="flex-row">
+            {/* button to open sidebar */}
             <button
                 onClick={() => setIsSidebarOpen(!isSidebarOpen)}
                 className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
@@ -23,10 +24,11 @@ export default function RootLayout({
                     <ChevronDoubleRightIcon className="h-5 w-5" /> // Icon for closing the sidebar
                 }
             </button>
-
+            {/* sidebar  */}
             <div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
                 <Sidebar setIsSidebarOpen={setIsSidebarOpen} />
             </div>
+            {/* page ui  */}
             <div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
                 {children}
             </div>

compass/app/resource/page.tsx

@@ -7,8 +7,8 @@ import Image from 'next/image';
 
 export default function Page() {
     return (
-        // Ensuring the main container takes at least full viewport height
         <div className="min-h-screen flex flex-col">
+            {/* icon + title  */}
             <div className="pt-16 px-8 pb-4 flex-grow">
                 <div className="mb-4 flex items-center space-x-4">
                     <Image
@@ -25,11 +25,13 @@ export default function Page() {
                 </Callout>
             </div>
             <div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
+                {/* link to different pages  */}
                 <div className="grid grid-cols-3 gap-6 pb-6">
                     <Card icon={<BookmarkIcon />} text="Resources" />
                     <Card icon={<ClipboardIcon />} text="Services" />
                     <Card icon={<BookOpenIcon />} text="Training Manuals" />
                 </div>
+                {/* search bar */}
                 <LandingSearchBar />
             </div>
         </div>

compass/components/resource/LandingSearchBar.tsx

@@ -15,6 +15,7 @@ export const LandingSearchBar: React.FC = () => {
 
   return (
     <div className="max-w mx-auto">
+      {/* searchbar  */}
       <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
         <div className="flex-grow">
           <input
@@ -25,6 +26,7 @@ export const LandingSearchBar: React.FC = () => {
             onChange={handleSearchChange}
           />
         </div>
+        {/* input  */}
         {searchTerm && (
           <button
             onClick={clearSearch}
@@ -36,6 +38,7 @@ export const LandingSearchBar: React.FC = () => {
           <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
         </div>
       </div>
+      {/* search results, for now since it's empty this is the default screen  */}
       <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
         <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
         <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links or the search bar above to get your results.</h2>

compass/components/resource/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
+import { HomeIcon, ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
 import { SidebarItem } from './SidebarItem';
 
 interface SidebarProps {
@@ -9,6 +9,7 @@ interface SidebarProps {
 const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
   return (
     <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
+      {/* button to close sidebar  */}
       <div className="flex justify-end">
         <button
           onClick={() => setIsSidebarOpen(false)}
@@ -20,6 +21,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
       </div>
       <div className="flex flex-col space-y-8">
 
+      {/* user + logout button  */}
         <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
 
           <div className="flex flex-col items-start space-y-2">
@@ -30,9 +32,11 @@ const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
             <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
           </div>
         </div>
+        {/* navigation menu  */}
         <div className="flex flex-col space-y-2">
           <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
           <nav className="flex flex-col">
+          <SidebarItem icon={<HomeIcon  />} text="Home" />
             <SidebarItem icon={<BookmarkIcon  />} text="Resources" />
             <SidebarItem icon={<ClipboardIcon />} text="Services" />
             <SidebarItem icon={<BookOpenIcon  />} text="Training Manuals" />