✨ Add active-class-name example

Author: GuiDevloper

examples/active-class-name/README.md

@@ -0,0 +1,19 @@
+# activeClassName example
+
+Nullstack [Context](https://nullstack.app/context)'s [Router](https://nullstack.app/routes-and-params#router) object bring info about the current route. This example compares the `router.path` with a link's `href` to dinamically set a active class on it.
+
+## Deploy your own
+
+Deploy it now with [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/GuiDevloper/nullstack-examples/tree/master/examples/active-class-name&project-name=active-class-name&repo-name=active-class-name&demo-title=Nullstack+activeClassName&demo-description=Nullstack+example+of+active+class+name&demo-url=https://github.com/GuiDevloper/nullstack-examples/tree/master/examples/active-class-name&demo-image=https://nullstack.app/image-1200x630.png)
+
+## How to use
+
+Execute [`nulla create`](https://github.com/GuiDevloper/nulla) with [npm](https://docs.npmjs.com/cli/init):
+
+```bash
+npx nulla create --example active-class-name active-class-name-app
+```
+
+Then deploy it with [Vercel](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-vercel.md), [Heroku](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-heroku.md) or [Netlify](https://github.com/GuiDevloper/nulla/blob/master/docs/en-US/deploy-netlify.md).

examples/active-class-name/api/nullstack.js

@@ -0,0 +1,3 @@
+import application from '../.production/server';
+
+export default application.server;

examples/active-class-name/client.js

@@ -0,0 +1,4 @@
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+
+export default Nullstack.start(Application);

examples/active-class-name/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "devDependencies": {
+    "nullstack": "~0.15.0"
+  },
+  "scripts": {
+    "start": "npx nullstack start --port=3000",
+    "build": "npx nullstack build --mode=ssr",
+    "vercel-build": "npm run build"
+  }
+}

examples/active-class-name/public/favicon-96x96.png

@@ -0,0 +1,4 @@
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+
+export default Nullstack.start(Application);

examples/active-class-name/server.js

@@ -0,0 +1,9 @@
+body {
+  background-color: #111827;
+  color: #fff;
+  font-family: 'Roboto', sans-serif;
+}
+
+a {
+  color: #f15d9f;
+}

examples/active-class-name/src/Application.css

@@ -0,0 +1,29 @@
+import Nullstack from 'nullstack';
+import './Application.css';
+import Nav from './components/Nav';
+import Home from './pages/Home';
+import About from './pages/About';
+import Blog from './pages/Blog';
+import Dynamic from './pages/Dynamic';
+
+class Application extends Nullstack {
+  
+  prepare({ page }) {
+    page.title = 'Nullstack active-class-name';
+  }
+
+  render() {
+    return (
+      <>
+        <Nav/>
+        <Home route="/"/>
+        <About route="/about"/>
+        <Blog route="/blog"/>
+        <Dynamic route="/*"/>
+      </>
+    )
+  }
+
+}
+
+export default Application;

examples/active-class-name/src/Application.tsx

@@ -0,0 +1,19 @@
+import { NullstackClientContext } from 'nullstack';
+
+interface ActiveLinkProps extends NullstackClientContext {
+  href?: string,
+  class?: string
+}
+
+function ActiveLink(context: ActiveLinkProps) {
+  const { href, children, router } = context;
+  const activeClass = router.path === href ? ' active' : '';
+  const classes = `${context.class}${activeClass}`;
+  return (
+    <a href={href} class={classes}>
+      {children}
+    </a>
+  )
+}
+
+export default ActiveLink;

examples/active-class-name/src/components/ActiveLink.tsx

@@ -0,0 +1,7 @@
+.nav-link {
+  text-decoration: none;
+}
+
+.active:after {
+  content: ' (current page)';
+}