compass/app/admin/layout.tsx

@@ -2,6 +2,7 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -13,7 +14,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 
@@ -55,13 +56,34 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    <Sidebar
+                    {/* button to open sidebar */}
-                        setIsSidebarOpen={setIsSidebarOpen}
+                    <button
-                        isSidebarOpen={isSidebarOpen}
+                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        name={user.username}
+                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        email={user.email}
+                        aria-label={"Open sidebar"}
-                        isAdmin={user.role === Role.ADMIN}
+                    >
-                    />
+                        {
+                            !isSidebarOpen && (
+                                <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}
+                            name={user.username}
+                            email={user.email}
+                            isAdmin={user.role === Role.ADMIN}
+                        />
+                    </div>
+                    {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"

compass/app/home/layout.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
@@ -12,7 +13,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const [user, setUser] = useState<User>();
     const router = useRouter();
 
@@ -44,13 +45,34 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    <Sidebar
+                    {/* button to open sidebar */}
-                        name={user.username}
+                    <button
-                        email={user.email}
+                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        setIsSidebarOpen={setIsSidebarOpen}
+                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        isSidebarOpen={isSidebarOpen}
+                        aria-label={"Open sidebar"}
-                        isAdmin={user.role === Role.ADMIN}
+                    >
-                    />
+                        {
+                            !isSidebarOpen && (
+                                <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
+                            name={user.username}
+                            email={user.email}
+                            setIsSidebarOpen={setIsSidebarOpen}
+                            isAdmin={user.role === Role.ADMIN}
+                        />
+                    </div>
+                    {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"

compass/app/resource/layout.tsx

@@ -2,6 +2,7 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -13,7 +14,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 
@@ -47,14 +48,34 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    <Sidebar
+                    {/* button to open sidebar */}
-                        setIsSidebarOpen={setIsSidebarOpen}
+                    <button
-                        isSidebarOpen={isSidebarOpen}
+                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        name={user.username}
+                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        email={user.email}
+                        aria-label={"Open sidebar"}
-                        isAdmin={user.role === Role.ADMIN}
+                    >
-                    />
+                        {
-                    {/* </div>*/}
+                            !isSidebarOpen && (
+                                <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}
+                            isSidebarOpen={isSidebarOpen}
+                            name={user.username}
+                            email={user.email}
+                            isAdmin={user.role === Role.ADMIN}
+                        />
+                    { /* </div>*/ }
                     {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${

compass/app/service/layout.tsx

@@ -2,6 +2,7 @@
 
 import Sidebar from "@/components/Sidebar/Sidebar";
 import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -13,7 +14,7 @@ export default function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
     const router = useRouter();
     const [user, setUser] = useState<User>();
 
@@ -47,13 +48,34 @@ export default function RootLayout({
         <div className="flex-row">
             {user ? (
                 <div>
-                    <Sidebar
+                    {/* button to open sidebar */}
-                        setIsSidebarOpen={setIsSidebarOpen}
+                    <button
-                        isSidebarOpen={isSidebarOpen}
+                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        name={user.username}
+                        className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
-                        email={user.email}
+                        aria-label={"Open sidebar"}
-                        isAdmin={user.role === Role.ADMIN}
+                    >
-                    />
+                        {
+                            !isSidebarOpen && (
+                                <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}
+                            name={user.username}
+                            email={user.email}
+                            isAdmin={user.role === Role.ADMIN}
+                        />
+                    </div>
+                    {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${
                             isSidebarOpen ? "ml-64" : "ml-0"

compass/components/Sidebar/Sidebar.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
     HomeIcon,
     ChevronDoubleLeftIcon,
-    ChevronDoubleRightIcon,
     BookmarkIcon,
     ClipboardIcon,
     BookOpenIcon,
@@ -27,90 +26,67 @@ const Sidebar: React.FC<SidebarProps> = ({
     isAdmin: admin,
 }) => {
     return (
-        <>
+        <div className={"fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 "
-            {/* Button to open the sidebar. */}
+            + (isSidebarOpen ? "translate-x-0" : "-translate-x-full opacity-25")
-            <button
+            + " transition duration-300 ease-out"}>
-                onClick={() => setIsSidebarOpen(true)}
+        {/* button to close sidebar  */}
-                className={
+            <div className="flex justify-end">
-                    "fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0"
+                <button
-                }
+                    onClick={() => setIsSidebarOpen(false)}
-                aria-label={"Open sidebar"}
+                    className="py-2 text-gray-500 hover:text-gray-800"
-            >
+                    aria-label="Close sidebar"
-                {!isSidebarOpen && (
+                >
-                    <ChevronDoubleRightIcon className="h-5 w-5" />
+                    <ChevronDoubleLeftIcon className="h-5 w-5" />
-                )}
+                </button>
-            </button>
+            </div>
-
+            <div className="flex flex-col space-y-8">
-            {/* The sidebar itself. */}
+                {/* user + logout button  */}
-            <div
+                <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
-                className={
+                    <UserProfile name={name} email={email} />
-                    "fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 " +
-                    (isSidebarOpen
-                        ? "translate-x-0" // Open
-                        : "-translate-x-full opacity-25") + // Closed
-                    " transition duration-300 ease-out" // More animation properties
-                }
-            >
-                {/* Button to close sidebar  */}
-                <div className="flex justify-end">
-                    <button
-                        onClick={() => setIsSidebarOpen(false)}
-                        className="py-2 text-gray-500 hover:text-gray-800"
-                        aria-label="Close sidebar"
-                    >
-                        <ChevronDoubleLeftIcon className="h-5 w-5" />
-                    </button>
                 </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">
+                        {admin && (
+                            <SidebarItem
+                                icon={<LockClosedIcon />}
+                                text="Admin"
+                                active={true}
+                                redirect="/admin"
+                            />
+                        )}
 
-                <div className="flex flex-col space-y-8">
+                        <SidebarItem
-                    {/* user + logout button  */}
+                            icon={<HomeIcon />}
-                    <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
+                            text="Home"
-                        <UserProfile name={name} email={email} />
+                            active={true}
-                    </div>
+                            redirect="/home"
-                    {/* navigation menu  */}
+                        />
-                    <div className="flex flex-col space-y-2">
+                        <SidebarItem
-                        <h4 className="text-xs font-semibold text-gray-500">
+                            icon={<BookmarkIcon />}
-                            Pages
+                            text="Resources"
-                        </h4>
+                            active={true}
-                        <nav className="flex flex-col">
+                            redirect="/resource"
-                            {admin && (
+                        />
-                                <SidebarItem
+                        <SidebarItem
-                                    icon={<LockClosedIcon />}
+                            icon={<ClipboardIcon />}
-                                    text="Admin"
+                            text="Services"
-                                    active={true}
+                            active={true}
-                                    redirect="/admin"
+                            redirect="/service"
-                                />
+                        />
-                            )}
+                        <SidebarItem
-
+                            icon={<BookOpenIcon />}
-                            <SidebarItem
+                            text="Training Manuals"
-                                icon={<HomeIcon />}
+                            active={true}
-                                text="Home"
+                            redirect="/training-manuals"
-                                active={true}
+                        />
-                                redirect="/home"
+                    </nav>
-                            />
-                            <SidebarItem
-                                icon={<BookmarkIcon />}
-                                text="Resources"
-                                active={true}
-                                redirect="/resource"
-                            />
-                            <SidebarItem
-                                icon={<ClipboardIcon />}
-                                text="Services"
-                                active={true}
-                                redirect="/service"
-                            />
-                            <SidebarItem
-                                icon={<BookOpenIcon />}
-                                text="Training Manuals"
-                                active={true}
-                                redirect="/training-manuals"
-                            />
-                        </nav>
-                    </div>
                 </div>
             </div>
-        </>
+        </div>
     );
 };