14 display temaplte area as matsidenav + UI adjustments

.github/workflows/main.yml

@@ -31,6 +31,7 @@ jobs:
         run: npm run build --prod -- --base-href /playground/
 
   deploy:
+    if: github.event_name == 'push' || github.event_name == 'release'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

public/templates/algorithms/sorting.sqz

@@ -13,7 +13,7 @@ fn quick_sort(arr) {
   for (var i = 0; i < arr.length; i++) {
     if (arr[i] < pivot) {
       left.push(arr[i]);
-    } else if (arr[i] > pivot) {
+    } elif (arr[i] > pivot) {
       right.push(arr[i]);
     } else {
       equal.push(arr[i]);
@@ -25,5 +25,5 @@ fn quick_sort(arr) {
 
 var arr = [38, 27, 43, 3, 9, 82, 10];
 
-log("Unsorted array:", arr);
-log("Sorted array:", quick_sort(arr));
+log("Unsorted array:" + arr);
+log("Sorted array:" + quick_sort(arr));

public/templates/basic/data-structures.sqz

@@ -1,24 +1,29 @@
 // The basic data structures in sQeeZ
 
 var intValue = 42;
-log("Integer value:", intValue);
+log("Integer value:" + intValue);
 
 var doubleValue = 3.14159;
-log("Double value:", doubleValue);
+log("Double value:" + doubleValue);
 
 var charValue = 'A';
-log("Character value:", charValue);
+log("Character value:" + charValue);
 
 var stringValue = "Hello, World!";
-log("String value:", stringValue);
+log("String value:" + stringValue);
+
+var boolValue = false;
+
+const constant = "I am immutable!";
+log(constant);
 
 var array = [1, 2, 3, 4, 5];
-log("Array: ", array);
+log("Array: " + array);
 
 var object = {
   name: "John Doe",
   age: 30,
   isEmployed: true
 };
 
-log("Object: ", person);
+log("Object: " + person);

public/templates/basic/hello-world.sqz

@@ -1,2 +1,13 @@
 // This is a simple "Hello World" program in sQeeZ
+
+// Basic log message
 log("Hello, World!");
+
+// Warning message
+warn("This is a warning message!");
+
+// Error message
+error("This is an error message!");
+
+// Colored log message
+logc("Custom colored message!", #7F00FF);

public/templates/overview.json

@@ -20,6 +20,15 @@
             "name": "Data Structures",
             "code": "./templates/basic/data-structures.sqz"
         }]
+    }, {
+        "name": "Short Notation",
+        "templates": [{
+            "name": "Arrays",
+            "code": "./templates/short-notation/arrays.sqz"
+        }, {
+            "name": "Objects",
+            "code": "./templates/short-notation/objects.sqz"
+        }]
     }, {
         "name": "Algorithms",
         "templates": [{
@@ -29,11 +38,5 @@
             "name": "Fibonacci",
             "code": "./templates/algorithms/fibonacci.sqz"
         }]
-    }, {
-        "name": "Short Notation",
-        "templates": [{
-            "name": "Arrays",
-            "code": "./templates/short-notation/arrays.sqz"
-        }]
     }]
 }

public/templates/short-notation/arrays.sqz

@@ -1,2 +1,14 @@
 // Short notation of array functionalities in sQeeZ
-@1 2 3 4 5 |> map(*2) |> filter(>10)
+
+// Adds 3 to each: [8, 13, 18, 23, 28]
+// Filters > 15: [18, 23, 28]
+// Reduces by summing with initial value 0: 69 + 0 = 69
+@5,10,15,20,25 |> MAP(+3) |> FILTER(>15) |> REDUCE(+0);
+
+// Concatenates [1, 2] with [3, 4]: [1, 2, 3, 4]
+// Zips with ['a', 'b', 'c', 'd']: [(1, 'a'), (2, 'b'), (3, 'c'), (4, 'd')]
+@1,2 |> CONCAT(@3,4) |> ZIP(@'a','b','c','d');
+
+// Filters < 350: [100, 200, 300]
+// counts: 3
+COUNT((@100,200,300,400 |> FILTER(<350)));

public/templates/short-notation/objects.sqz

@@ -0,0 +1,8 @@
+// Short notation of object functionalities in sQeeZ
+
+// {
+//     a: 1,
+//     b: false,
+//     c: "last value"
+// }
+@a:1,b:false,c:"last value";

src/app/app.component.html

@@ -1,14 +1,57 @@
-<div class="app-container" 
-    (screenWidth)="screenWidth = $event"
-    (screenHeight)="screenHeight = $event" 
-    appScreen
->
-    <app-toolbar [screenWidth]="screenWidth"></app-toolbar>
-    <div class="core">
-        @if (screenWidth >= 992) {
-            <app-templates [screenWidth]="screenWidth"></app-templates>
+<div class="app-container" [class.is-mobile]="mobileQuery.matches">
+    <mat-toolbar class="toolbar">
+        <div class="menu">
+            <button mat-icon-button (click)="snav.toggle()">
+                <mat-icon>menu</mat-icon>
+            </button>
+            <img src="logo.jpg" alt="sQeeZ-Scripting-Language" class="logo">
+        </div>
+        <div class="actions">
+            <button mat-icon-button (click)="toggleTheme()" [matTooltip]="currentTheme === 'light' ? 'Dark Mode' : 'Light Mode'">
+                <mat-icon> {{ currentTheme === 'light' ? 'light_mode' : 'dark_mode' }} </mat-icon>
+            </button>
+            <button mat-icon-button (click)="openDocumentation()" matTooltip="Help">
+                <mat-icon>help</mat-icon>
+            </button>
+            <button mat-icon-button (click)="openSettings()" matTooltip="Settings">
+                <mat-icon>settings</mat-icon>
+            </button>
+        </div>
+    </mat-toolbar>
+    <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
+        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" opened="false">
+            <h2 class="heading">Templates</h2>
+            <mat-nav-list class="table-of-contents">
+                @for (section of categories; track section) {
+                    <ng-container *ngTemplateOutlet="renderContent; context: { $implicit: section }"></ng-container>
+                }
+            </mat-nav-list>
+        </mat-sidenav>
+        <mat-sidenav-content class="sidenav-content">
+            <div class="core">
+                <app-code></app-code>
+                <app-console></app-console>
+            </div>
+        </mat-sidenav-content>
+    </mat-sidenav-container>
+</div>
+
+<ng-template #renderContent let-section>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                <button mat-stroked-button color="primary" class="content-item">
+                    {{ section.name }}
+                </button>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        @for(subSection of section.templates; track subSection) {
+            <mat-list-item>
+                <button mat-stroked-button color="primary" (click)="showCode(subSection); snav.close()" class="content-item">
+                    {{ subSection.name }}
+                </button>
+            </mat-list-item>
         }
-        <app-code></app-code>
-        <app-console></app-console>
-    </div>
-</div>
+    </mat-expansion-panel>
+</ng-template>

src/app/app.component.scss

@@ -1,13 +1,112 @@
-%full-size {
-    width: 100%;
-    height: 100%;
+.app-container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.is-mobile .toolbar {
+    position: fixed;
+    z-index: 2;
 }
 
-.app-container {
+.sidenav-container {
+    flex: 1;
+}
+
+.is-mobile .sidenav-container {
+    flex: 1 0 auto;
+}
+
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    height: 4rem;
+    background-color: var(--toolbar);
+    color: var(--font-color);
+    border-bottom: 0.5px solid var(--border);
+}
+
+.menu,
+.actions {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 0.5rem;
+
+    .logo {
+        height: 75%;
+        width: auto;
+        border-radius: 5px;
+    }
+}
+
+.language-trigger .fi {
+    width: 24px;
+    transform: translateY(-4px);
+}
+
+.language-select .fi {
+    width: 24px;
+    transform: translateY(-2px);
+}
+.heading {
+    text-align: center;
+    text-decoration: underline;
+}
+
+mat-sidenav {
+    background-color: var(--sidenav);
+    color: var(--font-color);
+    border-radius: 0;
+}
+
+.sidenav-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    background-color: var(--content);
+}
+
+router-outlet {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    @extend %full-size;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    height: 3rem;
+    width: 100%;
+    bottom: 0;
+
+    button {
+        height: 100%;
+        width: 50%;
+        border-radius: 0;
+    }
+}
+
+mat-expansion-panel {
+    background-color: transparent;
+    box-shadow: none;
+}
+
+.content-item {
+    width: 100%;
+}
+
+.table-of-contents {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
 .core {
@@ -16,19 +115,19 @@
     justify-content: flex-start;
 }
 
-app-code {
-    flex: 1;
-}
+:host-context(.light-theme) {
+    --mat-expansion-header-indicator-color: var(--font-color);
 
-.dark-theme {
-    .core {
-        background-color: #222222;
+    button {
+        color: var(--font-color);
     }
-}
 
-.light-theme {
-    .core {
-        background-color: #f5f5f5;
+    button:hover {
+        background-color: rgba(255, 171, 242, 0.75) !important;
+    }
+
+    .controls button {
+        background-color: var(--toolbar);
     }
 }
 

src/app/app.component.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [AppComponent, HttpClientTestingModule, BrowserAnimationsModule],
+
     }).compileComponents();
     spyOnProperty(window, 'innerWidth').and.returnValue(0);
     spyOnProperty(window, 'innerHeight').and.returnValue(0);