Tabs desktop UI

.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache

@@ -13,12 +13,14 @@ assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22
 assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
 assets/custom-icons/book (1).svg,1591670042956,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
 assets/custom-icons/book.svg,1591670046795,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
+assets/custom-icons/bookmark.svg,1592371606164,557e6eab92592373a25eb4d7a00a66813ef95e94a3050646d838cc48296e0aed
 assets/custom-icons/calendar.svg,1591670019330,86593b34bb094a0308ff9aae96b373e7561d95737a97b62c5df257d9aa94730c
 assets/custom-icons/checkmark.svg,1591690835621,43eb6373652ac8270f0f7964cb43fe789f3bb5b1d9ec32bf2a9537f40130df2a
 assets/custom-icons/class.svg,1592309166232,247c7db07bf3dcc9e76d80ce122becb73077679de93d389b92923c9147f38617
 assets/custom-icons/close-circle.svg,1592281807401,3365f8d2f9db966884b6012d1de562a477757fd1d20379fa65fe823829066810
 assets/custom-icons/close.svg,1591685459998,bda284bcf2ce73de2da27269744959dd96094126526d5dd021d8d58d3eb02083
 assets/custom-icons/cloud-computing.svg,1591670058237,4a6ce752f63c5ec1e6ed00bc9dd642e151b30916ee603a9d1d0a24fdb7781f7d
+assets/custom-icons/comment.svg,1592370163004,5a17f4ec1fc3120562f418c9692ce84706427830a9d8eaf573b9227975d19fd4
 assets/custom-icons/delete.svg,1591670050596,ecb168e66062b855ec3d8be4fe8d1df786c29b740fd2a7f4e4a68871b4c271c1
 assets/custom-icons/discuss.svg,1591670017330,41c4b861e256a256cba57c925e9958aa43f0296fecb0da38aaeb8cbee210f15e
 assets/custom-icons/document.svg,1592290789477,d5f9aee8b6a06ce794719fe4e074f944b9a0110fb7204e3f1ee91ad327defab6
@@ -28,11 +30,13 @@ assets/custom-icons/duel.svg,1592309435728,dcbb4dffba44a0e57a2cce161f27ea9c5c42e
 assets/custom-icons/edit.svg,1591670025299,0a3c0ddf3e300c7f40214542758e7cb95907ba45f366dcf0cf5bbe7473aed3b5
 assets/custom-icons/flask.svg,1591670029174,ec753ec598159f42d7c1b5e8bdaf2768475e20308bbe1f9321b2b9b6ca3bc727
 assets/custom-icons/folder.svg,1591670036971,ff596b961aa3bf39968e69c946ca3197b64f83cc19d37820265e85020a966ad5
+assets/custom-icons/forum-outline.svg,1592375498831,412f3f8a159402989ed90032889045acd27f0fd076fecc66e9bca5ce5d17157c
 assets/custom-icons/forum.svg,1592309516460,a2653011964697eb2f57d08ac3573a14246995bc77cfee5282253f9837f436c2
 assets/custom-icons/globe.svg,1591670048690,1fdc780fc12f486a70f2825e51064c7ebe497e6db5a308c2ffa5b6d86a552b41
 assets/custom-icons/hashtag.svg,1592315789488,49e2d3a41333c2c6ec84b6bb5e00c3a61ba1d4c4b02f321fa2fdd90dbb9d3a85
 assets/custom-icons/home.svg,1591677387594,fcc78971c4496f782b894d47df39954b657488ceaa83189092978429c600493f
 assets/custom-icons/information.svg,1591670056330,2fb0cdf7a54fb27fcd5461b379a57dda72483f48e400217db1162fe2416b30ea
+assets/custom-icons/like.svg,1592370132307,5f9f0595bc0a37d973232a7722109f2910e0a9e8be91dbcb0f0fcd80340ab598
 assets/custom-icons/link.svg,1592290835406,2c07191acf4af240019f6da72c65e71dad9fef9deaf04d90f20145c1fb239841
 assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
 assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accdb5a82ecbee149eb68100580146f09b85d9a
@@ -43,7 +47,9 @@ assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b41
 assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
 assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
 assets/custom-icons/question-mark.svg,1592281930425,a2cda20fd2f192049c662f7e3319cc36775e49a00e56549002eb494dfc8bb716
+assets/custom-icons/reply.svg,1592374381475,e40d9f0a18921d7e71be76da2a7454d9c15a18e601699c2538d8540106004dc9
 assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
+assets/custom-icons/share.svg,1592370200760,ce33e77f3437923daddeefe080c52c8d91ac9216efc7b6e3ffdef54f2a096beb
 assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
 assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0
 assets/custom-icons/warning.svg,1592281874839,5ea86bd525dfa83ebe77cf93d8367426202e54f7c07aab182301c7c46ccdbad7
@@ -55,18 +61,13 @@ assets/icons/icon-384x384.png,1591723765605,e28ae36bf6b6f9c9a5eb8716806f3077d293
 assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
 assets/icons/icon-72x72.png,1591723765606,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce
 assets/icons/icon-96x96.png,1591723765606,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508
-index.html,1592379316672,410289b6de4ac9486d6af7f7bd0181a777b73a965ea3f26e6b146f8704134adb
-3rdpartylicenses.txt,1592379303314,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
-ngsw.json,1592379316703,9ebffd930c84c21a55b4d4ca0af2c00a8d86d16cead735d0b1b7a18c7f420bb5
-safety-worker.js,1592379316705,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-styles.706a8214263f92d7e9ad.css,1592379303314,f6348497794f701300aac680cc90fd9a46262a9824d8be9a8dba3d83c11c37cc
-worker-basic.min.js,1592379316705,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-assets/custom-icons/bookmark.svg,1592371606164,557e6eab92592373a25eb4d7a00a66813ef95e94a3050646d838cc48296e0aed
-assets/custom-icons/comment.svg,1592370163004,5a17f4ec1fc3120562f418c9692ce84706427830a9d8eaf573b9227975d19fd4
-assets/custom-icons/forum-outline.svg,1592375498831,412f3f8a159402989ed90032889045acd27f0fd076fecc66e9bca5ce5d17157c
-assets/custom-icons/like.svg,1592370132307,5f9f0595bc0a37d973232a7722109f2910e0a9e8be91dbcb0f0fcd80340ab598
-assets/custom-icons/reply.svg,1592374381475,e40d9f0a18921d7e71be76da2a7454d9c15a18e601699c2538d8540106004dc9
-assets/custom-icons/share.svg,1592370200760,ce33e77f3437923daddeefe080c52c8d91ac9216efc7b6e3ffdef54f2a096beb
-ngsw-worker.js,1592379316704,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
-main-es2015.b0a5baf64fe4c0ab8c40.js,1592379314949,f94e61205248713b0a988c98d9113a37056e67bdf3705882796d1ea4a61eb751
-main-es5.b0a5baf64fe4c0ab8c40.js,1592379313132,1731d41fb9cc9c5de5afe4b7480bbf3e8173848ea43f3b506702df73fdcdd3dd
+index.html,1592581636661,754ee34b6a6038e71905eaaf2828717d1d9f5352fdbc2b99361d89292b45cf84
+3rdpartylicenses.txt,1592581623693,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
+ngsw.json,1592581636689,b31c570104509fceb64d172d3129b064163bcdc520e5c0853c210aacbe0edaf4
+safety-worker.js,1592581636691,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+styles.b49991c93601241d9fc5.css,1592581623693,04e80bd134276602afe8e8c3413181eec3770de18545c1e8f498856bbc8e7329
+worker-basic.min.js,1592581636691,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+assets/custom-icons/missed-class.svg,1592547836861,85d91f1db7ab592bdaa63d3a4134a39160cb811374ff187dc0b780db02078468
+ngsw-worker.js,1592581636690,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
+main-es2015.84e9682eac56f8cfb981.js,1592581634936,6b480f38235d589a7084ae7374800a3686f2df7f81d15575fa9e2c299428a5c7
+main-es5.84e9682eac56f8cfb981.js,1592581633214,d404b4f8b7bffb6787a2abcd4cd811f0e69afd846020fd9ebf78e80fca39f446

src/app/tabs/tabs.component.html

@@ -13,7 +13,7 @@
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/mortarboard.svg"></svg-icon>
         <span> Courses </span>
     </button>
-    <button class="mid-button">
+    <button id="mid-button">
         <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/book.svg"></svg-icon>
     </button>
     <button [routerLink]="['/tabs/reports']" [ngClass]="{'active' : selectedTab === 'reports'}">

src/app/tabs/tabs.component.scss

@@ -1,7 +1,12 @@
 .page {
     height: 100vh;
     overflow: auto;
-    padding-bottom: 100px;
+    padding-left: 60px;
+
+    @media screen and (max-width: 1023px) {
+        padding-bottom: 100px;
+        padding-left: 0;
+    }
 
     &::before {
         content: '';
@@ -31,6 +36,18 @@
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
 
+    @media screen and (min-width: 1023px) {
+        background-color: var(--ash-black);
+        height: 100vh;
+        width: 75px;
+        flex-direction: column;
+        padding: 13% 0;
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        bottom: auto;
+        top: 0;
+    }
+
     button {
         border: 0px;
         width: calc(90vw / 5);
@@ -39,7 +56,19 @@
         display: block;
         text-align: center;
 
+        @media screen and (min-width: 1023px) {
+            width: 100%;
+            height: calc(100% / 5);
+            border-left: 4px solid transparent;
+            border-radius: 0px;
+        }
+
         &.active {
+            @media screen and (min-width: 1023px) {
+                background-color: var(--dark-grey);
+                border-color: var(--teal-green);
+            }
+
             .icon {
                 fill: var(--teal-green);
             }
@@ -64,10 +93,14 @@
         }
 
         span {
-            display: block;
-            margin-top: 5px;
-            color: white;
-            font-size: 10px;
+            display: none;
+
+            @media screen and (max-width: 1023px) {
+                display: block;
+                margin-top: 5px;
+                color: white;
+                font-size: 10px;
+            }
         }
     }
 
@@ -77,5 +110,10 @@
         width: 15px;
         height: 15px;
         fill: white;
+
+        @media screen and (min-width: 1023px) {
+            width: 18px;
+            height: 18px;
+        }
     }
 }

src/app/tabs/tabs.component.ts

@@ -21,6 +21,14 @@ export class TabsComponent implements OnInit {
         });
 	}
 
+    ngAfterViewInit(): void {
+        if (window.innerWidth > 1023) {
+            document.querySelector('#mid-button').classList.remove('mid-button');
+        } else {
+            document.querySelector('#mid-button').classList.add('mid-button');
+        }
+    }
+
     ngOnDestroy() {
         this.routeSubscription.unsubscribe();
     }