So progress so far has only been done to test out the AWS CodeCommit SDK library but this may as well have been a command line application and that wont be of any particular benefit to an end user.
Since this application is going to be built on the Angular framework and then compiled as an electron application I’m going to make full use of some of the good tools angular brings. I will also be using the Angular Materials Libraries to help speed up my design and implementation.
You will probably quickly tell that I’m not a front end developer. I quite enjoy doing a bit of UX design but I then find the CSS / SCSS ( SCSS is what I have used ) to be a skill that I’m not that particularly keen to master, opting to spend a fair bit of time having to research how to do things instead.
One of the angular features I will be taking advantage of very early on is routing, angular routing is great! its easy to setup and easy to use. When creating an angular application using the ng command line interface this is an option that is given to you, just say yes.
As I mentioned I’m using angular materials to help speed up the development time. To help configure materials I like to use this very helpful tool called Material Theme Generator https://materialtheme.arcsine.dev/ this tool allows you to setup things like colour, Icons, fonts and more. When you are done just hit export and add the code to your global SCSS file.
So one of my first tasks was to just create the main layout for the application. My thoughts were just around having a simple title bar that sits across the full width of the app and then a sidebar that would be hidden / an overlay on smaller screens.
The codes just quite simple, the side nav is toggled between ‘over’ and ‘side’ mode based on a BreakpointObserver. A mat icon is shown if we are in over mode and this will toggle the side nav to be shown.
Blow you can see how I observer the max width of the app and then swap the mode ( don’t forget to close and open the nav based on what mode you are going into )
And finally this is what I ended up with, shown in the two modes based on the width of the app.
Categories: ezConsole
greenchapel.dev 
Leave a Reply