WIP: Create switch button

hpi-sam · May 3, 2023 · cb9ce45 · cb9ce45
1 parent 9f3c159
commit cb9ce45
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/frontend/src/app/pages/landing-page/landing-page.module.ts b/frontend/src/app/pages/landing-page/landing-page.module.ts
@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 
 @NgModule({
     declarations: [LandingPageComponent],
-    imports: [CommonModule, FormsModule, SharedModule],
+    imports: [CommonModule, FormsModule, SharedModule, NgbDropdownModule],
     exports: [LandingPageComponent],
 })
 export class LandingPageModule {}
diff --git a/frontend/src/app/pages/landing-page/landing-page/landing-page.component.html b/frontend/src/app/pages/landing-page/landing-page/landing-page.component.html
@@ -70,6 +70,45 @@ <h1 class="display-3 m-3 text-center">Digitale FüSim MANV</h1>
                     [disabled]="importingExercise"
                 />
             </label>
+            <div
+                ngbDropdown
+                placement="bottom-end top-end"
+                class="btn-group ms-5"
+            >
+                <button type="button" class="btn btn-outline-primary btn-lg">
+                    Action
+                </button>
+                <button
+                    ngbDropdownToggle
+                    type="button"
+                    class="btn btn-outline-primary btn-lg dropdown-toggle-split"
+                    data-bs-toggle="dropdown"
+                >
+                    <span class="visually-hidden">Toggle Dropdown</span>
+                </button>
+                <ul ngbDropdownMenu class="dropdown-menu">
+                    <li>
+                        <a ngbDropdownItem class="dropdown-item" href="#"
+                            >Action</a
+                        >
+                    </li>
+                    <li>
+                        <a ngbDropdownItem class="dropdown-item" href="#"
+                            >Another action</a
+                        >
+                    </li>
+                    <li>
+                        <a ngbDropdownItem class="dropdown-item" href="#"
+                            >Something else here</a
+                        >
+                    </li>
+                    <li>
+                        <a ngbDropdownItem class="dropdown-item" href="#"
+                            >Separated link</a
+                        >
+                    </li>
+                </ul>
+            </div>
         </div>
 
         <p *ngIf="exerciseHasBeenCreated" class="mb-0">