feat(templates): add side-nav-mini template (collapsible mini navigation) for React, Angular, WC

packages/cli/templates/react/igr-ts/projects/_base/files/src/setupTests.ts

@@ -4,6 +4,18 @@ import ResizeObserver from 'resize-observer-polyfill';
 export function setupTestMocks() {
   globalThis.ResizeObserver = ResizeObserver;
 
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
   HTMLElement.prototype.scrollIntoView = vi.fn();
   HTMLElement.prototype.hidePopover = vi.fn();
   HTMLElement.prototype.showPopover = vi.fn();

packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css

@@ -44,6 +44,10 @@
   margin: 16px 0 8px;
 }
 
+:local(.content) p:nth-last-child(2) {
+  padding-top: 16px;
+}
+
 :local(.githubLinks) {
   display: flex;
   flex-flow: row wrap;

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app-routes.tsx

@@ -0,0 +1,5 @@
+import Home from './home/home';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home', icon: 'home' }
+];

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css

@@ -0,0 +1,91 @@
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app__navbar {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 56px;
+  padding: 0 16px;
+  background: #239ef0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  box-sizing: border-box;
+}
+
+.app__menu-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: #000;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.app__title {
+  margin: 0 0 0 16px;
+  color: #000;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.app__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.app__drawer {
+  flex: 0 0 auto;
+  height: 100%;
+  --menu-full-width: 280px;
+  --ig-nav-drawer-item-active-background: #e0f2ff;
+  --ig-nav-drawer-item-active-text-color: #0075d2;
+  --ig-nav-drawer-item-active-icon-color: #0075d2;
+}
+
+.app--mini .app__drawer {
+  --menu-full-width: 68px;
+}
+
+igc-nav-drawer.app__drawer::part(base) {
+  transition: width 0.3s ease-out;
+  overflow: hidden;
+}
+
+.app--mini igc-nav-drawer-item::part(base) {
+  justify-content: center;
+  width: 40px;
+  min-height: 40px;
+  padding: 0;
+  margin: 4px auto;
+  border-radius: 8px;
+}
+
+.app--mini igc-nav-drawer-item::part(content) {
+  display: none;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+@media (max-width: 1024px) {
+  .app__menu-button {
+    display: none;
+  }
+}

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.test.tsx

@@ -0,0 +1,20 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import App from './app';
+import 'element-internals-polyfill';
+import { setupTestMocks } from '../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+});
+
+test('renders without crashing', () => {
+  const wrapper = render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  );
+
+  expect(wrapper).toBeTruthy();
+});

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx

@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import {
+  IgrNavDrawer,
+  IgrNavDrawerItem,
+  IgrIcon,
+  registerIcon,
+} from 'igniteui-react';
+import { routes } from './app-routes';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './app.css';
+
+const materialIcons = [
+  ['home', 'action/svg/production/ic_home_24px.svg'],
+  ['menu', 'navigation/svg/production/ic_menu_24px.svg'],
+  ['apps', 'navigation/svg/production/ic_apps_24px.svg'],
+  ['code', 'action/svg/production/ic_code_24px.svg'],
+  ['build', 'action/svg/production/ic_build_24px.svg'],
+  ['palette', 'image/svg/production/ic_palette_24px.svg'],
+] as const;
+
+materialIcons.forEach(([name, path]) =>
+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, 'material')
+);
+
+const navRoutes = routes.filter((r: any) => r.text);
+
+export default function App() {
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1025px)');
+    const update = () => setDrawerOpen(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  return (
+    <div className="app">
+      <header className="app__navbar">
+        <button
+          className="app__menu-button"
+          type="button"
+          aria-label="Toggle navigation"
+          onClick={() => setDrawerOpen(o => !o)}
+        >
+          <IgrIcon name="menu" collection="material" />
+        </button>
+        <h1 className="app__title">$(name)</h1>
+      </header>
+      <div className={!drawerOpen ? 'app__body app--mini' : 'app__body'}>
+        <IgrNavDrawer className="app__drawer" open position="relative">
+          {navRoutes.map((route: any) => (
+            <IgrNavDrawerItem
+              key={route.path}
+              active={location.pathname === route.path}
+              onClick={() => navigate(route.path)}
+            >
+              <IgrIcon
+                slot="icon"
+                name={route.icon || 'apps'}
+                collection="material"
+                style={location.pathname === route.path ? { color: '#0075D2' } : undefined}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <div className="app__content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/home.tsx

@@ -0,0 +1,69 @@
+import logo from "/logo.svg";
+import { IgrIcon } from "igniteui-react";
+import styles from "./style.module.css";
+
+export default function App() {
+  return (
+    <main className={styles.home}>
+      <div className={styles.intro}>
+        <h1 className={styles.header}>Welcome to Ignite UI for React!</h1>
+        <p className={styles.description}>
+          A routed application shell with a responsive side navigation drawer and curated Ignite UI resources.
+        </p>
+      </div>
+
+      <img src={logo} className={styles.logo} alt="Ignite UI for React" />
+
+      <div className={styles.resources} role="navigation" aria-label="Ignite UI resources">
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.infragistics.com/products/ignite-ui-react"
+        >
+          <IgrIcon className={styles.resourceIcon} name="apps" collection="material" />
+          <span>
+            <strong>Component Demos</strong>
+            <small>Browse React components and examples</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/IgniteUI/igniteui-react"
+        >
+          <IgrIcon className={styles.resourceIcon} name="code" collection="material" />
+          <span>
+            <strong>React Repository</strong>
+            <small>Explore Ignite UI for React on GitHub</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/IgniteUI/igniteui-cli"
+        >
+          <IgrIcon className={styles.resourceIcon} name="build" collection="material" />
+          <span>
+            <strong>Ignite UI CLI</strong>
+            <small>Review the CLI source and project tooling</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.figma.com/@infragistics"
+        >
+          <IgrIcon className={styles.resourceIcon} name="palette" collection="material" />
+          <span>
+            <strong>Figma UI Kit</strong>
+            <small>Open Infragistics design resources</small>
+          </span>
+        </a>
+      </div>
+    </main>
+  );
+}