Update VPN client and gateway behavior

2026-08-11 08:50:44 +03:00
parent 396c5d1917
commit 79ffff194f
35 changed files with 1036 additions and 590 deletions
@@ -0,0 +1,58 @@
+import type { ReactNode, RefObject } from 'react';
+
+interface DrawerBaseProps {
+  panelRef: RefObject<HTMLElement | null>;
+  closeRef: RefObject<HTMLButtonElement | null>;
+  sheetRef?: RefObject<HTMLDivElement | null>;
+  id: string;
+  open: boolean;
+  className?: string;
+  sheetClassName?: string;
+  closeLabel: string;
+  onClose: () => unknown;
+  leading?: ReactNode;
+  children: ReactNode;
+}
+
+type DrawerProps = DrawerBaseProps & (
+  | { labelledBy: string; label?: never }
+  | { label: string; labelledBy?: never }
+);
+
+export function Drawer({
+  panelRef,
+  closeRef,
+  sheetRef,
+  id,
+  open,
+  className = '',
+  sheetClassName = '',
+  labelledBy,
+  label,
+  closeLabel,
+  onClose,
+  leading,
+  children,
+}: DrawerProps) {
+  return <aside
+    ref={panelRef}
+    id={id}
+    className={`client-drawer${className ? ` ${className}` : ''}${open ? ' is-open' : ''}`}
+    aria-labelledby={labelledBy}
+    aria-label={label}
+    aria-hidden={!open}
+    inert={!open ? true : undefined}
+  >
+    <div ref={sheetRef} className={`client-drawer-sheet${sheetClassName ? ` ${sheetClassName}` : ''}`}>
+      {leading}
+      <button
+        ref={closeRef}
+        className="client-drawer-close"
+        type="button"
+        aria-label={closeLabel}
+        onClick={onClose}
+      >×</button>
+      {children}
+    </div>
+  </aside>;
+}