layout & sidebar styling continued

pantheredeye · Dec 11, 2024 · 2021806 · 2021806
1 parent 84dc7c6
commit 2021806
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 37 deletions.
diff --git a/web/src/components/Sidebar/Sidebar.tsx b/web/src/components/Sidebar/Sidebar.tsx
@@ -17,12 +17,8 @@ function classNames(...classes: string[]) {
 }
 
 const Sidebar = ({
-  isCollapsed = false,
-  setIsCollapsed,
   setSidebarOpen,
 }: {
-  isCollapsed: boolean
-  setIsCollapsed: (collapsed: boolean) => void
   setSidebarOpen?: (open: boolean) => void
 }) => {
   const { logOut } = useAuth()
@@ -60,7 +56,7 @@ const Sidebar = ({
             ? 'bg-gray-700'
             : 'bg-gray-800 hover:bg-gray-700',
           'shadow-lg',
-          isCollapsed ? 'justify-center' : 'justify-start'
+          'justify-start'
         )}
         onClick={() => {
           if (setSidebarOpen) setSidebarOpen(false)
@@ -71,12 +67,7 @@ const Sidebar = ({
           aria-hidden="true"
           aria-label={name}
         />
-        {!isCollapsed && <span className="ml-3 text-gray-200">{name}</span>}
-        {isCollapsed && (
-          <span className="absolute left-full ml-3 w-auto min-w-max whitespace-nowrap rounded-md bg-gray-800 px-2 py-1 text-xs text-gray-200 opacity-0 group-hover:opacity-100">
-            {name}
-          </span>
-        )}
+        <span className="ml-3 text-gray-200">{name}</span>
       </Link>
     </li>
   )
@@ -99,15 +90,8 @@ const Sidebar = ({
 
   return (
     <div className="flex flex-col w-64 bg-gray-900 text-gray-300 shadow-inner">
-      <div className="flex h-16 items-center px-4">
+      <div className="flex h-12 items-center px-4">
         <span className="text-2xl font-bold text-gray-200">SWPPP-TOP</span>
-        <button
-          className="ml-auto text-gray-300 hover:text-white"
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          {isCollapsed ? '▶' : '◀'}
-        </button>
       </div>
 
       {/* Navigation */}

diff --git a/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx b/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, Fragment, ReactNode } from 'react'
+import { useState, Fragment, ReactNode } from 'react'
 
 import { Dialog, Transition } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
@@ -11,18 +11,9 @@ interface AuthenticatedLayoutProps {
 
 const AuthenticatedLayout = ({ children }: AuthenticatedLayoutProps) => {
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const [isCollapsed, setIsCollapsed] = useState(() => {
-    // Persist collapsed state using localStorage
-    const savedState = localStorage.getItem('isSidebarCollapsed')
-    return savedState === 'true'
-  })
-
-  useEffect(() => {
-    localStorage.setItem('isSidebarCollapsed', isCollapsed.toString())
-  }, [isCollapsed])
 
   return (
-    <div className="lg: flex min-h-screen bg-gray-900 font-sans text-gray-300">
+    <div className="lg:flex min-h-screen bg-gray-900 font-sans text-gray-300">
       {/* Mobile Sidebar */}
       <Transition show={sidebarOpen} as={Fragment}>
         <Dialog
@@ -51,7 +42,7 @@ const AuthenticatedLayout = ({ children }: AuthenticatedLayoutProps) => {
             leaveFrom="translate-x-0"
             leaveTo="-translate-x-full"
           >
-            <Dialog.Panel className="fixed inset-y-0 left-0 w-64 bg-gray-900 p-4 shadow-lg">
+            <Dialog.Panel className="fixed inset-y-0 left-0 w-64 bg-gray-900 shadow-lg">
               {/* Close Button */}
               <button
                 className="text-gray-300 hover:text-white"
@@ -60,19 +51,15 @@ const AuthenticatedLayout = ({ children }: AuthenticatedLayoutProps) => {
               >
                 <XMarkIcon className="h-6 w-6" />
               </button>
-              <Sidebar
-                isCollapsed={isCollapsed}
-                setIsCollapsed={setIsCollapsed}
-                setSidebarOpen={setSidebarOpen}
-              />
+              <Sidebar setSidebarOpen={setSidebarOpen} />
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>
       </Transition>
 
       {/* Desktop Sidebar */}
       <div className="hidden lg:flex lg:w-64 lg:flex-shrink-0">
-        <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+        <Sidebar />
       </div>
 
       {/* Main Content */}