refactor: use side-nav component (#34)

* chore: Upgrade to 24.4.0.alpha22 * chore: Upgrade to 24.4.0.alpha22 * fix TS compile error * refactor: use side-nav component --------- Co-authored-by: Mikhail Shabarov <[email protected]>
vaadin · Apr 26, 2024 · 4eddd6a · 4eddd6a
1 parent 776d54a
commit 4eddd6a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 20 deletions.
diff --git a/src/main/frontend/views/@index.tsx b/src/main/frontend/views/@index.tsx
@@ -1,4 +1,4 @@
-import { VerticalLayout } from "@vaadin/react-components/VerticalLayout.js";
+import { VerticalLayout } from "@vaadin/react-components";
 
 /**
  * Hilla view that is available publicly.

diff --git a/src/main/frontend/views/@layout.tsx b/src/main/frontend/views/@layout.tsx
@@ -1,19 +1,14 @@
-import { AppLayout } from '@vaadin/react-components/AppLayout.js';
-import { Avatar } from '@vaadin/react-components/Avatar.js';
-import { Button } from '@vaadin/react-components/Button.js';
-import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
+import { AppLayout, Avatar, Button, DrawerToggle, SideNav, SideNavItem } from "@vaadin/react-components";
 import Placeholder from 'Frontend/components/placeholder/Placeholder.js';
 import { useRouteMetadata } from 'Frontend/util/routing.js';
 import { Suspense, useEffect } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from "../auth";
 import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
 
-const navLinkClasses = ({ isActive }: any) => {
-    return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
-};
-
 export default function Layout() {
+    const navigate = useNavigate();
+    const location = useLocation();
     const currentTitle = useRouteMetadata()?.title ?? 'Hybrid Example With Stateful Auth';
 
     useEffect(() => {document.title = currentTitle;}, [currentTitle]);
@@ -37,15 +32,17 @@ export default function Layout() {
             <div slot="drawer" className="flex flex-col justify-between h-full p-m">
                 <header className="flex flex-col gap-m">
                     <h1 className="text-l m-0">Hybrid Example With Stateful Auth</h1>
-                    <nav>
+                    <SideNav
+                        onNavigate={({ path }) => navigate(path!)}
+                        location={location}>
                         {
                             createMenuItems().map(({ to, title }) => (
-                                <NavLink className={navLinkClasses} to={to} key={to}>
+                                <SideNavItem path={to} key={to}>
                                     {title}
-                                </NavLink>
+                                </SideNavItem>
                             ))
                         }
-                    </nav>
+                    </SideNav>
                 </header>
                 <footer className="flex flex-col gap-s">
                     {state.user ? (
@@ -57,7 +54,9 @@ export default function Layout() {
                             <Button onClick={async () => doLogout()}>Sign out</Button>
                         </>
                     ) : (
-                        <a href="/login">Sign in</a>
+                        <a href="/login">
+                          <Button className="w-full">Sign in</Button>
+                        </a>
                     )}
                 </footer>
             </div>

diff --git a/src/main/frontend/views/about.tsx b/src/main/frontend/views/about.tsx
@@ -1,4 +1,4 @@
-import { VerticalLayout } from "@vaadin/react-components/VerticalLayout.js";
+import { VerticalLayout } from "@vaadin/react-components";
 import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
 
 export const config: ViewConfig = {

diff --git a/src/main/frontend/views/hilla.tsx b/src/main/frontend/views/hilla.tsx
@@ -1,8 +1,6 @@
-import { Button } from "@vaadin/react-components/Button.js";
-import { TextField } from "@vaadin/react-components/TextField.js";
+import { Button, TextField, VerticalLayout } from "@vaadin/react-components";
 import { HelloEndpoint } from "Frontend/generated/endpoints";
 import { useState } from "react";
-import { VerticalLayout } from "@vaadin/react-components/VerticalLayout.js";
 import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
 
 export const config: ViewConfig = {

diff --git a/src/main/frontend/views/login.tsx b/src/main/frontend/views/login.tsx
@@ -1,4 +1,4 @@
-import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
+import { LoginOverlay } from '@vaadin/react-components';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from 'Frontend/auth';