diff --git a/package-lock.json b/package-lock.json index 5bdfa9d..af849d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5861,6 +5861,11 @@ "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==", "dev": true }, + "ionicons": { + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz", + "integrity": "sha512-cgP+VIr2cTJpMfFyVHTerq6n2jeoiGboVoe3GlaAo5zoSBDAEXORwUZhv6m+lCyxlsHCS3nqPUE+MKyZU71t8Q==" + }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", diff --git a/package.json b/package.json index da147b9..9750f48 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@angular/platform-browser": "~8.2.9", "@angular/platform-browser-dynamic": "~8.2.9", "@angular/router": "~8.2.9", + "ionicons": "^4.6.3", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" diff --git a/src/app/widgets-holder/widgets-holder.component.html b/src/app/widgets-holder/widgets-holder.component.html index e69de29..0e21356 100644 --- a/src/app/widgets-holder/widgets-holder.component.html +++ b/src/app/widgets-holder/widgets-holder.component.html @@ -0,0 +1,42 @@ +
+ Logo + + +
+ + +
+
+ + + +
+
diff --git a/src/app/widgets-holder/widgets-holder.component.scss b/src/app/widgets-holder/widgets-holder.component.scss index e69de29..df2e7be 100644 --- a/src/app/widgets-holder/widgets-holder.component.scss +++ b/src/app/widgets-holder/widgets-holder.component.scss @@ -0,0 +1,148 @@ +.nav-bar { + display: flex; + width: 100%; + height: 70px; + align-items: center; + justify-content: space-between; + padding: 0 4%; + box-shadow: 0px 0px 8px var(--grey); + position: relative; + z-index: 1; + background-color: white; + + img { + width: 70px; + } + + nav { + + a, button { + margin: 0 15px; + } + + a { + color: var(--grey); + font-size: 16px; + } + + button { + background-color: transparent; + border: 2px solid var(--brand-blue); + color: var(--brand-blue); + width: 100px; + height: 40px; + margin-right: 0; + } + } +} + +.widgets-holder { + display: flex; + align-items: stretch; + width: 100%; + background-color: #efefef; +} + +.side-navigation { + background-color: white; + width: 20%; + height: calc(100vh - 70px); + overflow: auto; + + &:hover { + &::-webkit-scrollbar { + display: block; + } + } + + &::-webkit-scrollbar { + width: 8px; + display: none; + } + + /* Track */ + &::-webkit-scrollbar-track { + background-color: white; + } + /* Handle */ + &::-webkit-scrollbar-thumb { + background-color: rgba(black, 0.2); + } + /* Handle on hover */ + &::-webkit-scrollbar-thumb:hover { + background-color: rgba(black, 0.5); + } + + .user-info { + text-align: center; + line-height: 1.8; + + img { + width: 70px; + height: 70px; + background-color: #efefef; + border-radius: 50%; + margin: 40px auto 20px; + display: block; + } + + .name { + font-size: 16px; + color: black; + font-weight: 500; + } + + .other-info { + font-size: 15px; + color: var(--grey); + } + } + + ul { + width: 100%; + margin: 40px 0 40px auto; + list-style: none; + + li { + font-size: 15px; + color: var(--grey); + padding: 20px 20px 20px 40px; + letter-spacing: 0.5px; + cursor: pointer; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 10%; + top: 0; + width: 80%; + height: 1px; + background-color: #efefef; + } + + &::after { + content: ''; + position: absolute; + right: 0; + width: 3px; + background-color: transparent; + height: 100%; + top: 0; + } + + &.active { + color: var(--brand-blue); + + &::after { + background-color: var(--brand-blue); + } + } + + i { + font-size: 20px; + margin-right: 15px; + } + } + } +} diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts index 1bf3336..e1cb159 100644 --- a/src/app/widgets-holder/widgets-holder.component.ts +++ b/src/app/widgets-holder/widgets-holder.component.ts @@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./widgets-holder.component.scss'] }) export class WidgetsHolderComponent implements OnInit { + selected_nav: string = 'dashboard'; constructor() { } diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..a0a62e9 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 284927f..c9e6d03 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,12 +1,12 @@ /* You can add global styles to this file, and also import other style files */ +$ionicons-font-path: "~ionicons/dist/fonts"; +@import "~ionicons/dist/scss/ionicons.scss"; :root { - --brand-blue: #1881e5; - --background-blue: #f5f7fa; - --brand-grey: #9a9a9a; - --brand-black: #1b1d1e; - --brand-dark-grey: #666666; + --brand-blue: #007bcc; --brand-yellow: #f79319; + --grey: #9a9a9a; + --dark-grey: #666666; }