uibee 2.9.0 → 2.9.2

package/dist/src/components/navbar/navbar.d.ts

@@ -7,10 +7,11 @@ export type NavbarProps = {
     theme?: string;
     disableThemeToggle?: boolean;
     token?: string | null;
-    disableAuthButton?: boolean;
-    profileURL?: string;
+    profilePath?: string;
+    loginPath: string;
+    logoutPath: string;
     className?: string;
     innerClassName?: string;
     children: React.ReactNode;
 };
-export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, disableAuthButton, profileURL, className, innerClassName, children, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, profilePath, loginPath, logoutPath, className, innerClassName, children, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navbar/navbar.js

@@ -11,10 +11,13 @@ function hamburgerStyle(isOpen, isSecond) {
         ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
         : isSecond ? 'top-7' : 'top-4'}`;
 }
-export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, disableAuthButton, profileURL, className, innerClassName, children, }) {
+export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, profilePath, loginPath, logoutPath, className, innerClassName, children, }) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     return (_jsx("div", { className: `${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full ${className}`, children: _jsxs("div", { className: `flex w-full max-w-6xl m-auto p-2 transition duration-500 800px:justify-between 800px:p-4 ${isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''} ${innerClassName}
-            `, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [!disableThemeToggle && _jsx(ThemeToggle, {}), !disableLanguageToggle && _jsx(LanguageToggle, { language: lang }), !disableAuthButton && _jsx(AuthButton, { profileURL: profileURL, token: token })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-140 mx-auto left-0 right-0 800px:hidden
+            `, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [!disableThemeToggle &&
+                                    _jsx(ThemeToggle, {}), !disableLanguageToggle &&
+                                    _jsx(LanguageToggle, { language: lang }), loginPath && logoutPath &&
+                                    _jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-140 mx-auto left-0 right-0 800px:hidden
                             transition-all duration-500 ease-in-out overflow-hidden 
                             ${isMobileMenuOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'}`, onClick: () => setIsMobileMenuOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { className: `transition-all duration-500 ease-out ${isMobileMenuOpen
                                     ? 'opacity-100 transform translate-y-0'
@@ -22,10 +25,11 @@ export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableT
                                     transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
                                 }, children: child }, index))) })] }))] }) }));
 }
-function AuthButton({ profileURL, token }) {
-    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12', children: token ? (_jsxs(_Fragment, { children: [_jsx(Link, { href: '/api/logout', prefetch: false, onClick: (e) => {
-                        e.preventDefault();
-                        window.location.href = '/api/logout';
-                    }, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) }), profileURL &&
-                    _jsx(Link, { href: profileURL, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })] })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })) }));
+function AuthButton({ profilePath, logoutPath, loginPath, token }) {
+    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12', children: token ? (_jsxs(_Fragment, { children: [logoutPath &&
+                    _jsx(Link, { href: logoutPath, prefetch: false, onClick: (e) => {
+                            e.preventDefault();
+                            window.location.href = logoutPath;
+                        }, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) }), profilePath &&
+                    _jsx(Link, { href: profilePath, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })] })) : (_jsx(Link, { href: loginPath, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/navbar/navbar.tsx

@@ -24,8 +24,9 @@ export type NavbarProps = {
     theme?: string
     disableThemeToggle?: boolean
     token?: string | null
-    disableAuthButton?: boolean
-    profileURL?: string
+    profilePath?: string
+    loginPath: string
+    logoutPath: string
     className?: string
     innerClassName?: string
     children: React.ReactNode
@@ -37,8 +38,9 @@ export default function Navbar({
     disableLanguageToggle,
     disableThemeToggle,
     token,
-    disableAuthButton,
-    profileURL,
+    profilePath,
+    loginPath,
+    logoutPath,
     className,
     innerClassName,
     children,
@@ -69,9 +71,22 @@ export default function Navbar({
 
                         {/* Controls */}
                         <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
-                            {!disableThemeToggle && <ThemeToggle />}
-                            {!disableLanguageToggle && <LanguageToggle language={lang} />}
-                            {!disableAuthButton && <AuthButton profileURL={profileURL} token={token} />}
+                            {!disableThemeToggle &&
+                                <ThemeToggle />
+                            }
+                            {!disableLanguageToggle &&
+                                <LanguageToggle
+                                    language={lang}
+                                />
+                            }
+                            {loginPath && logoutPath &&
+                                <AuthButton
+                                    profilePath={profilePath}
+                                    token={token}
+                                    loginPath={loginPath}
+                                    logoutPath={logoutPath}
+                                />
+                            }
                         </nav>
 
                         {/* Mobile Menu Button */}
@@ -111,26 +126,35 @@ export default function Navbar({
     )
 }
 
-function AuthButton({ profileURL, token }: { profileURL?: string, token?: string | null }) {
+type AuthButtonProps = {
+    profilePath?: string
+    logoutPath: string
+    loginPath: string
+    token?: string | null
+}
+
+function AuthButton({ profilePath, logoutPath, loginPath, token }: AuthButtonProps) {
 
     return (
         <div className='rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12'>
             {token ? (
                 <>
-                    <Link
-                        href='/api/logout'
-                        prefetch={false}
-                        onClick={(e) => {
-                            e.preventDefault()
-                            window.location.href = '/api/logout'
-                        }}
-                        className='grid items-center justify-center h-full w-full'
-                    >
-                        <LogOut size={24} />
-                    </Link>
-                    {profileURL &&
+                    {logoutPath &&
+                        <Link
+                            href={logoutPath}
+                            prefetch={false}
+                            onClick={(e) => {
+                                e.preventDefault()
+                                window.location.href = logoutPath
+                            }}
+                            className='grid items-center justify-center h-full w-full'
+                        >
+                            <LogOut size={24} />
+                        </Link>
+                    }
+                    {profilePath &&
                         <Link
-                            href={profileURL}
+                            href={profilePath}
                             className='grid items-center justify-center h-full w-full'
                         >
                             <User size={24} />
@@ -139,7 +163,7 @@ function AuthButton({ profileURL, token }: { profileURL?: string, token?: string
                 </>
             ) : (
                 <Link
-                    href='/api/login'
+                    href={loginPath}
                     className='grid items-center justify-center h-full w-full'
                 >
                     <User size={24} />