https://github.com/daggerok/simple-toolbar-angular-example
Learn how to easy and quick design and implement simple toolbar with Angular
https://github.com/daggerok/simple-toolbar-angular-example
angular css ng scss
Last synced: about 2 months ago
JSON representation
Learn how to easy and quick design and implement simple toolbar with Angular
- Host: GitHub
- URL: https://github.com/daggerok/simple-toolbar-angular-example
- Owner: daggerok
- Created: 2020-01-14T19:31:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T00:41:27.000Z (over 2 years ago)
- Last Synced: 2025-01-10T00:42:28.481Z (over 1 year ago)
- Topics: angular, css, ng, scss
- Language: TypeScript
- Size: 509 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngularToolbar
Learn how to easy and quick design and implement simple toolbar with Angular
## site routes and components pages
let's create 3 components for needed pages: Home, Services and Contacts:
```bash
ng g c components/home
ng g c components/services
ng g c components/contacts
```
and configure routes in `app-routing.module.ts` file:
```typescript
// skipped before...
import { HomeComponent } from './components/home/home.component';
import { ServicesComponent } from './components/services/services.component';
import { ContactsComponent } from './components/contacts/contacts.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'services', component: ServicesComponent },
{ path: 'contacts', component: ContactsComponent },
];
// skipped after...
```
## html structure
main `app.component.html` structure should looks like so:
```html
MyAweApp
```
## styles
global styles in `styles.scss` file, just doing basic reset css and setting up font we need:
```css
* {
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif, Arial;
}
```
finally, our `app.component.scss` scoped styles should be as follows:
```scss
$primaryBgColor: rgb(173, 16, 215);
$activeLinkBgColor: darken($primaryBgColor, 5%);
$primaryColor: #fff5d7;
header#header {
display: flex;
background-color: $primaryBgColor;
color: $primaryColor;
#banner {
padding: 1em;
}
.spacer {
flex: 1;
}
ul#menu {
display: flex;
li {
padding: 1em;
list-style: none;
a {
text-decoration: none;
color: $primaryColor;
}
&:hover {
background-color: $activeLinkBgColor;
}
}
}
}
@media (width: 414px) {
ul#menu {
padding-right: 1em;
}
}
```
## results
Mobile:
Desktop:
