fixed sidebar layout

miskibin · Nov 8, 2024 · b1f69ee · b1f69ee
1 parent 90f2288
commit b1f69ee
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 201 deletions.
diff --git a/frontend/app/clientLayout.tsx b/frontend/app/clientLayout.tsx
@@ -29,19 +29,17 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/sidebar";
+import AppSidebar from "@/components/sidebar";
 import { ExternalLink } from "lucide-react";
 
 type ClientLayoutProps = {
   children: ReactNode;
 };
 
 const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [queryClient] = useState(() => new QueryClient());
 
   const menuItems = [
-    { href: "/", label: "Strona główna", icon: <FaHome className="w-6 h-6" /> },
     {
       href: "/envoys",
       label: "Posłowie",
@@ -132,7 +130,7 @@ const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
     <QueryClientProvider client={queryClient}>
       <SessionProvider>
         <html lang="pl" className="h-full">
-          <body className="h-full overflow-hidden">
+          <body className="h-full ">
             <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
               <SidebarProvider
                 style={
@@ -146,8 +144,8 @@ const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
                     <Navbar>
                       <SidebarTrigger className="-ml-1" />
                     </Navbar>
-                    <main className="flex-1 overflow-y-auto bg-neutral-100 dark:bg-gray-900">
-                      <div className="container mx-auto px-4">
+                    <main className="overflow-y-auto bg-gray-100 dark:bg-gray-900">
+                      <div className="container w-full px-0 mx-0">
                         <Breadcrumbs />
                         {children}
                       </div>

diff --git a/frontend/components.json b/frontend/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "app/globals.css",
-    "baseColor": "neutral",
+    "baseColor": "gray",
     "cssVariables": true,
     "prefix": ""
   },

diff --git a/frontend/components/sidebar.tsx b/frontend/components/sidebar.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { FaTimes } from "react-icons/fa";
+import { X } from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
@@ -13,6 +15,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { stat } from "fs";
 
 type MenuItem = {
   href: string;
@@ -24,64 +27,55 @@ type AppSidebarProps = {
   menuItems: MenuItem[];
 };
 
-export function AppSidebar({ menuItems }: AppSidebarProps) {
-  const { state } = useSidebar();
+export default function AppSidebar({ menuItems = [] }: AppSidebarProps) {
+  const { state, toggleSidebar } = useSidebar();
+  const isCollapsed = state === "collapsed";
 
   return (
-    <Sidebar collapsible="offcanvas">
-      <SidebarHeader className="p-4">
-        <div className="flex items-center space-x-2">
-          <div className="w-10 h-10 flex-shrink-0">
-            <Image
-              src="/logo.png"
-              alt="Sejm Stats Logo"
-              width={40}
-              height={40}
-            />
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="relative p-4">
+        <Link href={"/"}>
+          <div className="flex items-center gap-2">
+            <div
+              className={`relative flex-shrink-0 ${
+                isCollapsed ? "w-8 h-8" : "w-10 h-10"
+              }`}
+            >
+              <Image
+                src="/logo.png"
+                alt="Sejm Stats Logo"
+                fill
+                className="object-contain"
+              />
+            </div>
+            {!isCollapsed && (
+              <span className="text-xl font-bold">sejm-stats</span>
+            )}
           </div>
-          <span
-            className={`text-xl font-bold ${
-              state === "collapsed" ? "hidden" : "block"
-            }`}
-          >
-            sejm-stats
-          </span>
-        </div>
+        </Link>
         <button
-          className="lg:hidden absolute top-4 right-4 text-slate-400 hover:text-slate-200"
+          className="absolute right-4 top-4 text-muted-foreground hover:text-foreground lg:hidden"
           aria-label="Close sidebar"
+          onClick={toggleSidebar}
         >
-          <FaTimes size={20} />
+          <X className="h-5 w-5" />
         </button>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
               {menuItems.map((item, index) => (
-                <SidebarMenuItem key={index}>
-                  <SidebarMenuButton
-                    asChild
-                    className={`py-5 px-4 text-base  transition-all duration-200 ${
-                      state === "collapsed" ? "justify-center" : ""
-                    }`}
-                  >
+                <SidebarMenuItem key={index} className="py-1.5">
+                  <SidebarMenuButton className="transition-all duration-200 w-full">
                     <Link
                       href={item.href}
-                      className="flex items-center space-x-3"
+                      className={`flex items-center gap-2 ${
+                        isCollapsed ? "justify-center" : ""
+                      }`}
                     >
-                      <span
-                        className={`text-lg ${
-                          state === "collapsed" ? "mx-auto" : ""
-                        }`}
-                      >
-                        {item.icon}
-                      </span>
-                      <span
-                        className={state === "collapsed" ? "hidden" : "block"}
-                      >
-                        {item.label}
-                      </span>
+                      <span className="text-lg">{item.icon}</span>
+                      {!isCollapsed && <span>{item.label}</span>}
                     </Link>
                   </SidebarMenuButton>
                 </SidebarMenuItem>

diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}