francescodist / matfortytwo

Template for Angular Material 8 with Login and SideNav

MatFortyTwo

The answer to everything (well... almost) that's Angular Material

Description

MatFortyTwo is a boilerplate for Angular Material that promotes a design with two separate navigation stacks. One at root level and one (with title and sidenav) accessible only after having logged in. It also packs a lot of perks to help you kickstart your Angular project in a matter of minutes!

Angular CLI Version: 8.0.1
Angular Material Version: 8.0.0

Perks

• Navigation Flow and guarded access for Pages
• Script to generate root/sidenav page
• Theming
• Complete authorization flow with Token
• Lazy Loaded Pages
• Pre-built responsive Sidenav Component and Login Page
• Linting with pre-commit check
• Many more coming soon...

You can just focus on the content of your application! If you use the built-in scripts for page generation, everything else will be taken care of for you!

Script Usage

This will generate a new component (PageNamePageComponent) with routing in src/app/pages/page-name

!!!Use kebab-case for page names!!!

# GENERATE A ROOT PAGE
npm run genpage -- -r page-name

# GENERATE A SIDENAV PAGE    
npm run genpage -- -n page-name

# GENERATE A PAGE THAT'S BOTH ROOT AND SIDENAV
npm run genpage -- -rn page-name

# GENERATE A CHILD SIDENAV PAGE
npm run genpage -- -c page-name

# GENERATE A SIDENAV PAGE WITH SPECIFIC ICON NAME (mat-icon)
# (The icon will be in the sidenav next to the tile of the page)
npm run genpage -- -n page-name -i home

If you want to edit further, you can find the generated routes in:
src/app/app-routing.module.ts - Root Page
src/app/nav-routing.ts - SideNav Page

About Child Sidenav Pages

Child Sidenav Pages are pages that are meant to be accessible only through navigation from a sidenav page. They will not appear in the list in the sidenav menu and will show a back button in the top bar that will send you to the parent page when clicked. They will also automatically highlight the parent item in the sidenav menu, even when accessed directly through URL.

Since children pages are always relative to a parent page, some additional configuration will be needed after running the script. The child route needs to be defined in the parent page's routing module. The data property for this new route needs to contain a title and a "isChild" attribute set to true.

Let's have a look at a practical example:
We have a sidenav page called "home-page" and we want a child page named "child-page" that we can access from "home-page" instead of the sidenav menu.

First, we run the script for child sidenav pages

npm run genpage -- -c child

Now that the page has been generated, we can see that it is not present in the sidenav menu list ( just as we expected ).

Next step is to add the child route in the "home-page" routing module

This is how the routes in your home-page-routing.module should look like:

const routes: Routes = [
    {
        path: '',
        data: { shouldReuse: true, key: 'home' },
        component: HomePageComponent,
    },
]

Simply add the new child route to this file like this:

const routes: Routes = [
    {
        path: '',
        data: { shouldReuse: true, key: 'home' },
        component: HomePageComponent,
    },
    {
        path: 'child',
        loadChildren: () =>
            import('../child-page/child-page.module').then(
                m => m.ChildPageModule,
            ),
        data: { title: 'Child', isChild: true },
    },
]

Now, if you navigate to YOUR_NAV_URL /home/child you should see a page with the title "Child", a back button that will redirect you to the home page and the child component being correctly rendered in the content container below.

NB: It is of course possible to define a page that's the child of a child, but it's essential to avoid to create any loop to previous pages because that will break your application.
It's also not necessary to define the isChild attribute for children at a deeper level, as this information will be passed through by the first one.

Theming

Simply go to src/variables.scss and change the values for font, primary, accent or warn color.

Screenshots

Login Page

Sidenav Page

Different Theme

variables.scss

- $my-app-primary: mat-palette($mat-red);
+ $my-app-primary: mat-palette($mat-blue);

matfortytwo's Issues

Updating the docs with the child generation script

Switch from node scripts to schematics for page generation

add sub-menus, menus tag visibility

Hi,
It would be nice to have sub-menus on the sidenav.
Also, sometime, we need to adapt the menu with context, the possibility to change the menu-items of the sidenav menu would be great (with a visibility tag maybe ?)
Thanks
Jean Vandromme

Only the content of the sidenav should be scrollable

When the page content is too big to fit on the screen, only the content should scroll (sidenav and navbar should be fixed). This is a followup to #22

menus with visibility options

Hi,
I would be nice to have the possibility to change the sidenav menus with context.
Here's an example.
I'm logged in, the first menu appears
-home
-client search
when I choose a client, my menu changes:
-home
-admin (client administration)
-orders
We could create all menu-items in the first place but change the visibility of some of them with context.
Thanks
Jean Vandromme

Update to Angular 8

sticky toolbar

if you want the toolbar to be sticky, add this in nav-toolbar.component.scss
mat-toolbar {
position: sticky;
top: 0;
z-index: 1;
}

Custom theme colors or apply a material theme

Hi, thanks for your template! It's amazing!
I would like to be able to apply a dark theme or a default material theme, it's possible?
What should I do to build a custom theme?

Thank you!!

add parameter to set custom title for nav pages

Improve child page functionality

At the moment, the way the auto generated back button is handled is kinda hackish. It would be nice to have a more consistent structure

misspelling in readme

GENERATE A SIDENAV PAGE
npm run genpage -- -r page-name

should be

GENERATE A SIDENAV PAGE
npm run genpage -- -n page-name