diff --git a/frontend/app/clientLayout.tsx b/frontend/app/clientLayout.tsx index c738728..3230a6a 100644 --- a/frontend/app/clientLayout.tsx +++ b/frontend/app/clientLayout.tsx @@ -29,7 +29,7 @@ import { SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar"; -import { AppSidebar } from "@/components/sidebar"; +import AppSidebar from "@/components/sidebar"; import { ExternalLink } from "lucide-react"; type ClientLayoutProps = { @@ -37,11 +37,9 @@ type ClientLayoutProps = { }; const ClientLayout: React.FC = ({ children }) => { - const [sidebarOpen, setSidebarOpen] = useState(false); const [queryClient] = useState(() => new QueryClient()); const menuItems = [ - { href: "/", label: "Strona główna", icon: }, { href: "/envoys", label: "Posłowie", @@ -132,7 +130,7 @@ const ClientLayout: React.FC = ({ children }) => { - + = ({ children }) => { -
-
+
+
{children}
diff --git a/frontend/components.json b/frontend/components.json index 1e879bc..c98782e 100644 --- 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 index 312a15c..9d110bb 100644 --- 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,34 +27,38 @@ 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 ( - - -
-
- Sejm Stats Logo + + + +
+
+ Sejm Stats Logo +
+ {!isCollapsed && ( + sejm-stats + )}
- - sejm-stats - -
+ @@ -59,29 +66,16 @@ export function AppSidebar({ menuItems }: AppSidebarProps) { {menuItems.map((item, index) => ( - - + + - - {item.icon} - - - {item.label} - + {item.icon} + {!isCollapsed && {item.label}} diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx index 677d05f..b98de15 100644 --- a/frontend/components/ui/input.tsx +++ b/frontend/components/ui/input.tsx @@ -11,7 +11,7 @@ const Input = React.forwardRef( void; - openMobile: boolean; - setOpenMobile: (open: boolean) => void; - isMobile: boolean; - toggleSidebar: () => void; -}; + state: "expanded" | "collapsed" + open: boolean + setOpen: (open: boolean) => void + openMobile: boolean + setOpenMobile: (open: boolean) => void + isMobile: boolean + toggleSidebar: () => void +} -const SidebarContext = React.createContext(null); +const SidebarContext = React.createContext(null) function useSidebar() { - const context = React.useContext(SidebarContext); + const context = React.useContext(SidebarContext) if (!context) { - throw new Error("useSidebar must be used within a SidebarProvider."); + throw new Error("useSidebar must be used within a SidebarProvider.") } - return context; + return context } const SidebarProvider = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { - defaultOpen?: boolean; - open?: boolean; - onOpenChange?: (open: boolean) => void; + defaultOpen?: boolean + open?: boolean + onOpenChange?: (open: boolean) => void } >( ( @@ -67,34 +67,34 @@ const SidebarProvider = React.forwardRef< }, ref ) => { - const isMobile = useIsMobile(); - const [openMobile, setOpenMobile] = React.useState(false); + const isMobile = useIsMobile() + const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. - const [_open, _setOpen] = React.useState(defaultOpen); - const open = openProp ?? _open; + const [_open, _setOpen] = React.useState(defaultOpen) + const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { - const openState = typeof value === "function" ? value(open) : value; + const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { - setOpenProp(openState); + setOpenProp(openState) } else { - _setOpen(openState); + _setOpen(openState) } // This sets the cookie to keep the sidebar state. - document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; + document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open] - ); + ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) - : setOpen((open) => !open); - }, [isMobile, setOpen, setOpenMobile]); + : setOpen((open) => !open) + }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { @@ -103,18 +103,18 @@ const SidebarProvider = React.forwardRef< event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { - event.preventDefault(); - toggleSidebar(); + event.preventDefault() + toggleSidebar() } - }; + } - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [toggleSidebar]); + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. - const state = open ? "expanded" : "collapsed"; + const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ @@ -127,7 +127,7 @@ const SidebarProvider = React.forwardRef< toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] - ); + ) return ( @@ -151,17 +151,17 @@ const SidebarProvider = React.forwardRef<
- ); + ) } -); -SidebarProvider.displayName = "SidebarProvider"; +) +SidebarProvider.displayName = "SidebarProvider" const Sidebar = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { - side?: "left" | "right"; - variant?: "sidebar" | "floating" | "inset"; - collapsible?: "offcanvas" | "icon" | "none"; + side?: "left" | "right" + variant?: "sidebar" | "floating" | "inset" + collapsible?: "offcanvas" | "icon" | "none" } >( ( @@ -175,7 +175,7 @@ const Sidebar = React.forwardRef< }, ref ) => { - const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); + const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return ( @@ -189,7 +189,7 @@ const Sidebar = React.forwardRef< > {children}
- ); + ) } if (isMobile) { @@ -209,7 +209,7 @@ const Sidebar = React.forwardRef<
{children}
- ); + ) } return ( @@ -254,16 +254,16 @@ const Sidebar = React.forwardRef< - ); + ) } -); -Sidebar.displayName = "Sidebar"; +) +Sidebar.displayName = "Sidebar" const SidebarTrigger = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, onClick, ...props }, ref) => { - const { toggleSidebar } = useSidebar(); + const { toggleSidebar } = useSidebar() return ( - ); -}); -SidebarTrigger.displayName = "SidebarTrigger"; + ) +}) +SidebarTrigger.displayName = "SidebarTrigger" const SidebarRail = React.forwardRef< HTMLButtonElement, React.ComponentProps<"button"> >(({ className, ...props }, ref) => { - const { toggleSidebar } = useSidebar(); + const { toggleSidebar } = useSidebar() return (