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

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>
+  );
+}

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

@@ -0,0 +1,105 @@
+:local(.home) {
+  width: 100%;
+  max-width: 920px;
+  margin: auto;
+  padding: 48px 24px;
+  box-sizing: border-box;
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
+
+:local(.intro) {
+  max-width: 720px;
+  margin: 0 auto 24px;
+  text-align: center;
+}
+
+:local(.header) {
+  margin: 0 0 12px;
+  color: #09f;
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+:local(.description) {
+  margin: 0;
+  color: #000;
+  font-size: 1.125rem;
+  line-height: 1.5;
+}
+
+:local(.logo) {
+  display: block;
+  width: 500px;
+  height: 350px;
+  margin: 0 auto 28px;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+:local(.resources) {
+  display: grid;
+  grid-template-columns: repeat(2, 300px);
+  justify-content: center;
+  margin: 0 auto;
+  gap: 4px 64px;
+}
+
+:local(.resource) {
+  display: flex;
+  align-items: center;
+  min-height: 64px;
+  padding: 6px 0;
+  color: rgba(0, 0, 0, .74);
+  text-align: left;
+  text-decoration: none;
+}
+
+:local(.resource):hover strong {
+  text-decoration: underline;
+}
+
+:local(.resourceIcon) {
+  flex: 0 0 28px;
+  margin-right: 16px;
+  color: #09f;
+  font-size: 28px;
+}
+
+:local(.resource) strong,
+:local(.resource) small {
+  display: block;
+}
+
+:local(.resource) strong {
+  margin-bottom: 2px;
+  color: #731963;
+  font-size: 1rem;
+}
+
+:local(.resource) small {
+  color: #000;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  :local(.home) {
+    padding: 32px 16px;
+  }
+
+  :local(.header) {
+    font-size: 2.25rem;
+  }
+
+  :local(.logo) {
+    width: 100%;
+    height: 240px;
+  }
+
+  :local(.resources) {
+    grid-template-columns: minmax(0, 300px);
+    justify-content: center;
+    gap: 4px;
+  }
+}

packages/cli/templates/react/igr-ts/projects/side-nav-mini/index.ts

@@ -0,0 +1,19 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import * as path from "path";
+import { BaseWithHomeIgrTsProject } from "../_base_with_home";
+
+export class SideNavMiniIgrTsProject extends BaseWithHomeIgrTsProject implements ProjectTemplate {
+	public id: string = "side-nav-mini";
+	public name = "Side navigation + collapsible mini nav";
+	public description = "Side navigation with a collapsible mini (icons-only) variant and responsive breakpoints";
+	public dependencies: string[] = [];
+	public framework: string = "react";
+	public projectType: string = "igr-ts";
+	public hasExtraConfiguration: boolean = false;
+	public isHidden: boolean = false;
+
+	public get templatePaths(): string[] {
+		return [...super.templatePaths, path.join(__dirname, "files")];
+	}
+}
+export default new SideNavMiniIgrTsProject();