https://github.com/zaid-ajaj/navigation-bar-with-feliz

Modern navigation bar built with Feliz
https://github.com/zaid-ajaj/navigation-bar-with-feliz

fable feliz navigation spa

Last synced: about 2 months ago
JSON representation

Modern navigation bar built with Feliz

• Host: GitHub
• URL: https://github.com/zaid-ajaj/navigation-bar-with-feliz
• Owner: Zaid-Ajaj
• Created: 2020-03-21T21:39:48.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T20:00:54.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T13:25:39.403Z (2 months ago)
• Topics: fable, feliz, navigation, spa
• Language: JavaScript
• Size: 1.17 MB
• Stars: 20
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Navigation Bar With Feliz

This example application demonstrates how to build a modern navigation bar in Feliz without any React or CSS frameworks. Instead, we are using the type-safe styling API in [Feliz](https://github.com/Zaid-Ajaj/Feliz). The implementation is based on [Animated Responsive Navbar with CSS - Plus Other Useful Tricks](https://www.youtube.com/watch?v=biOMz4puGt8) which uses CSS-only to build a similar navigation bar.

![Demo](navigation-with-feliz.gif)

## Requirements

* [dotnet SDK](https://www.microsoft.com/net/download/core) 2.0.0 or higher

* [node.js](https://nodejs.org) 10.0.0 or higher

## Editor

To write and edit your code, you can use either VS Code + [Ionide](http://ionide.io/), Emacs with [fsharp-mode](https://github.com/fsharp/emacs-fsharp-mode), [Rider](https://www.jetbrains.com/rider/) or Visual Studio.

## Development

Before doing anything, start with installing npm dependencies using `npm install`.

Then to start development mode with hot module reloading, run:

```bash

npm start

```

This will start the development server after compiling the project, once it is finished, navigate to http://localhost:8080 to view the application .

To build the application and make ready for production:

```

npm run build

```

This command builds the application and puts the generated files into the `deploy` directory (can be overwritten in webpack.config.js).

### Tests

The template includes a test project that ready to go which you can either run in the browser in watch mode or run in the console using node.js and mocha. To run the tests in watch mode:

```

npm run test:live

```

This command starts a development server for the test application and makes it available at http://localhost:8085.

To run the tests using the command line and of course in your CI server, you have to use the mocha test runner which doesn't use the browser but instead runs the code using node.js:

```

npm test

```