From 74aac3cfa839a6e7d30bb8d3a1bc7bbb40f346b9 Mon Sep 17 00:00:00 2001
From: Rodrigo Nunes <rostospistis@gmail.com>
Date: Thu, 14 Nov 2024 17:30:24 +0000
Subject: [PATCH] Feature: Button that allows the user to switch the side where
 the sidebar is displayed

---
 src/App.tsx                               | 57 ++++++++++++-----------
 src/components/layout/Header.tsx          | 18 ++++++-
 src/components/layout/SidebarPosition.tsx | 31 ++++++++++++
 src/pages/TimeTableSelector.tsx           | 36 ++++++++++----
 4 files changed, 103 insertions(+), 39 deletions(-)
 create mode 100644 src/components/layout/SidebarPosition.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8c511a0b..23d4118c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { AboutPage, TimeTableSelectorPage, FaqsPage, NotFoundPage } from './page
 import { getPath, config, dev_config, plausible } from './utils'
 import Layout from './components/layout'
 import * as Sentry from "@sentry/react";
+import { SidebarProvider } from "./components/layout/SidebarPosition";
 
 const configToUse = Number(import.meta.env.VITE_APP_PROD) ? config : dev_config
 
@@ -60,33 +61,35 @@ const App = () => {
   const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
 
   return (
-    <BrowserRouter>
-      <CombinedProvider>
-        <SentryRoutes>
-          {pages.map((page, pageIdx) => (
-            <Route
-              path={page.path}
-              key={`page-${pageIdx}`}
-              element={
-                <Layout location={page.location} title={page.location} liquid={page.liquid}>
-                  <div>
-                    <page.element />
-                    <Toaster/>
-                  </div>
-                </Layout>
-              }
-            />
-          ))}
-          {redirects.map((redirect, redirectIdx) => (
-            <Route
-              path={redirect.from}
-              key={`redirect-${redirectIdx}`}
-              element={<Navigate replace to={redirect.to} />}
-            />
-          ))}
-        </SentryRoutes>
-      </CombinedProvider>
-    </BrowserRouter>
+    <SidebarProvider>
+      <BrowserRouter>
+        <CombinedProvider>
+          <SentryRoutes>
+            {pages.map((page, pageIdx) => (
+              <Route
+                path={page.path}
+                key={`page-${pageIdx}`}
+                element={
+                  <Layout location={page.location} title={page.location} liquid={page.liquid}>
+                    <div>
+                      <page.element />
+                      <Toaster/>
+                    </div>
+                  </Layout>
+                }
+              />
+            ))}
+            {redirects.map((redirect, redirectIdx) => (
+              <Route
+                path={redirect.from}
+                key={`redirect-${redirectIdx}`}
+                element={<Navigate replace to={redirect.to} />}
+              />
+            ))}
+          </SentryRoutes>
+        </CombinedProvider>
+      </BrowserRouter>
+    </SidebarProvider>
   )
 }
 
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 98702132..678bb955 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -8,9 +8,11 @@ import {
   AtSymbolIcon,
   RectangleStackIcon,
   QuestionMarkCircleIcon,
+  ArrowsRightLeftIcon,
 } from '@heroicons/react/24/outline'
 import { LogoNIAEFEUPImage } from '../../images'
 import { getPath, config } from '../../utils'
+import { useSidebarContext } from './SidebarPosition'
 
 const navigation = [
   {
@@ -34,6 +36,8 @@ type Props = {
 }
 
 const Header = ({ siteTitle, location }: Props) => {
+  const { toggleSidebarPosition } = useSidebarContext();
+
   return (
     <Disclosure
       as="nav"
@@ -80,10 +84,20 @@ const Header = ({ siteTitle, location }: Props) => {
                     ))}
                 </div>
 
-                <div className="hidden self-center md:inline-flex">
+                <div className='flex items-center space-x-2 relative top-1'>
+                  <button
+                    onClick={toggleSidebarPosition}
+                    className="hidden md:inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded hover:text-opacity-75"
+                  >
+                    <ArrowsRightLeftIcon className='h-4 w-4' />
+                  </button>
+
 
+                  <div className="hidden self-center md:inline-flex">
 
-                  <DarkModeSwitch />
+
+                    <DarkModeSwitch />
+                </div>
                 </div>
               </div>
             </div>
diff --git a/src/components/layout/SidebarPosition.tsx b/src/components/layout/SidebarPosition.tsx
new file mode 100644
index 00000000..82365956
--- /dev/null
+++ b/src/components/layout/SidebarPosition.tsx
@@ -0,0 +1,31 @@
+import { createCheckboxScope } from "@radix-ui/react-checkbox";
+import { Children, createContext, useContext, useState } from "react";
+
+type SidebarContextType = {
+    sidebarPosition: 'left' | 'right';
+    toggleSidebarPosition: () => void;
+};
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [sidebarPosition, setSidebarPosition] = useState<'left' | 'right'>('right');
+
+    const toggleSidebarPosition = () => {
+        setSidebarPosition((prev) => (prev === 'right' ? 'left' : 'right'));
+    };
+
+    return (
+        <SidebarContext.Provider value={{ sidebarPosition, toggleSidebarPosition }}>
+            {children}
+        </SidebarContext.Provider>
+    );
+};
+
+export const useSidebarContext = () => {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebarContext must be used within a SidebarProvider')
+    }
+    return context
+}
\ No newline at end of file
diff --git a/src/pages/TimeTableSelector.tsx b/src/pages/TimeTableSelector.tsx
index 9eb6f343..4e140c27 100644
--- a/src/pages/TimeTableSelector.tsx
+++ b/src/pages/TimeTableSelector.tsx
@@ -5,6 +5,7 @@ import { Schedule, Sidebar } from '../components/planner'
 import { CourseInfo, Major } from '../@types'
 import MajorContext from '../contexts/MajorContext'
 import CourseContext from '../contexts/CourseContext'
+import { useSidebarContext } from '../components/layout/SidebarPosition'
 
 const TimeTableSelectorPage = () => {
   const [majors, setMajors] = useState<Major[]>([])
@@ -12,6 +13,7 @@ const TimeTableSelectorPage = () => {
   const [pickedCourses, setPickedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
   const [checkboxedCourses, setCheckboxedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
   const [ucsModalOpen, setUcsModalOpen] = useState<boolean>(false);
+  const { sidebarPosition } = useSidebarContext();
 
   //TODO: Looks suspicious
   const [choosingNewCourse, setChoosingNewCourse] = useState<boolean>(false);
@@ -21,6 +23,8 @@ const TimeTableSelectorPage = () => {
       setMajors(majors)
     })
   }, [])
+
+
   return (
     <MajorContext.Provider value={{ majors, setMajors }}>
       <CourseContext.Provider value={
@@ -33,18 +37,30 @@ const TimeTableSelectorPage = () => {
         }
       }>
         <div className="grid w-full grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
-          {/* Schedule Preview */}
-          <div className="lg:min-h-adjusted order-1 col-span-12 min-h-min rounded-md bg-lightest px-3 py-3 dark:bg-dark lg:col-span-9 2xl:px-5 2xl:py-5">
-            <div className="h-full w-full">
+          {sidebarPosition === 'left' ?(
+            <>
+              <div className='col-span-12 lg:col-span-3 min-h'>
+                <Sidebar />
+              </div>
+              <div className='col-span-12 lg:col-span-9 min-h rounded-md bg-lightest px-3 py-3 dark:bg-dark 2xl:px-5 2xl:py-5'>
+                <Schedule />
+              </div>
+            </>
+          ) : (
+            <>
+              <div className='col-span-12 lg:col-span-9 min-h rounded-md bg-lightest px-3 py-3 dark:bg-dark 2xl:px-5 2xl:py-5'>
               <Schedule />
-            </div>
-          </div>
-
-          <Sidebar />
+              </div>
+              <div className='col-span-12 lg:col-span-3 min-h'>
+              <Sidebar />
+              </div>
+            </>
+          )}
         </div>
       </CourseContext.Provider>
     </MajorContext.Provider>
-  )
-}
+  );
+};
+
 
-export default TimeTableSelectorPage;
+export default TimeTableSelectorPage;
\ No newline at end of file