Collection page grid system

src/app/collections/collections.page.html

@@ -1,23 +1,41 @@
 <ion-content>
+
+    <ion-button (click)="showGrid = !showGrid"
+    class="grid-button">
+        <ion-icon *ngIf="!showGrid" name="grid"></ion-icon>
+        <ion-icon *ngIf="showGrid" name="logo-buffer"></ion-icon>
+    </ion-button>
     
     <section class="collections">
 
-        <img class="glass-box" src="assets/collections/glassbox.png" alt="">
+        <ng-container *ngIf="showGrid">
+            <ul class="collection-grid">
+                <li *ngFor="let collection of collections">
+                    <img [src]="collection.image">
+                    <label> {{ collection.name }} </label>
+                </li>
+            </ul>
+        </ng-container>
+
+        <ng-container *ngIf="!showGrid">
+            <img class="glass-box" src="assets/collections/glassbox.png" alt="">
 
-        <ion-slides [options]="slideOpts">
-            <ion-slide *ngFor="let collection of collections">
-                <img [ngClass]="{'bat' : collection.type === 'BAT' || collection.type === 'INVERTED BAT', 
-                'ball' : collection.type === 'BALL', 
-                'inverted' : collection.type === 'INVERTED BAT' }" 
-                [src]="collection.image">
+            <ion-slides [options]="slideOpts">
+                <ion-slide *ngFor="let collection of collections">
+                    <img [ngClass]="{'bat' : collection.type === 'BAT' || collection.type === 'INVERTED BAT', 
+                    'ball' : collection.type === 'BALL', 
+                    'inverted' : collection.type === 'INVERTED BAT' }" 
+                    [src]="collection.image">
 
-                <header class="box-heading">
-                    <h5> {{ collection.name }} </h5>
+                    <header class="box-heading">
+                        <h5> {{ collection.name }} </h5>
 
-                    <p> {{ collection.details }} </p>
-                </header>
-            </ion-slide>
-        </ion-slides>
+                        <p> {{ collection.details }} </p>
+                    </header>
+                </ion-slide>
+        </ion-slides>            
+        </ng-container>
+        
     </section>
 
 </ion-content>

src/app/collections/collections.page.scss

@@ -1,3 +1,11 @@
+$lumous-blue: #1a2389;
+$dark-blue-shade1: #24367c;
+$dark-blue-shade2: #263982;
+$green: #01b868;
+$pink: #d73e53;
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+
 .collections {
     height: calc(100vh - 56px);
     background-image: url('../../assets/collections/museum_background.png');
@@ -5,6 +13,70 @@
     background-size: 100% 100%;
 }
 
+.grid-button {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    --border-radius: 10px;
+    width: 40px;
+    height: 40px;
+    z-index: 3;
+    margin: 0;
+    --padding-start: 0;
+    --padding-end: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --background: white;
+    --color: #d73e53;
+    
+    ion-icon {
+        font-size: 24px;
+    }
+}
+
+.collection-grid {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    padding: 0 5%;
+    position: fixed;
+    left: 0;
+    top: 20vh;
+    max-height: 40vh;
+    overflow: auto;
+    animation: fadeUp 0.5s forwards;
+    
+    li {
+        width: 100px;
+        min-height: 100px;
+        border-radius: 10px;
+        background-color: rgba(white, 0.8);
+        box-shadow: 2px 2px 10px -4px $dark-blue;
+        position: relative;
+        padding: 10px;
+        margin: 10px;
+
+        img {
+            width: 50px;
+            height: 50px;
+            display: block;
+            object-fit: contain;
+            margin: 0 auto;
+        }
+
+        label {
+            margin-top: 10px;
+            display: block;
+            color: dimgrey;
+            font-weight: 500;
+            font-size: 0.9rem;
+            text-align: center;
+        }
+    }
+}
+
 .glass-box {
     width: 55vw;
     height: 40vh;
@@ -28,19 +100,7 @@ ion-slides {
             animation: fadeUp 0.5s forwards;
             animation-delay: 0.2s;
         }
-    }
-    
-    @keyframes fadeUp {
-        0% {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-
-        100% {
-            opacity: 1;
-            transform: translateY(0vh);
-        }
-    }
+    }    
 
     .box-heading {
         position: absolute;
@@ -90,4 +150,16 @@ ion-slides {
             left: 45vw;
         }
     }
+}
+
+@keyframes fadeUp {
+    0% {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0vh);
+    }
 }

src/app/collections/collections.page.ts

@@ -22,7 +22,9 @@ export class CollectionsPage implements OnInit {
         details: string,
         image: string,
         type: 'BAT' | 'BALL' | 'INVERTED BAT'
-    }>
+    }> = [];
+
+    showGrid: boolean = false;
 
     constructor() { }