HAT KURZ FUNKTIONIERT JETZT NICHT MEHR JETZT WILL ICH NICHT MEHR ABER MACH BALD WIEDER WEITER

Client/SZUAbsolventenverein.Theme.Website.Client.csproj

@@ -13,14 +13,18 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="9.0.2" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="9.0.2" />
+    <None Include="wwwroot\Themes\SZUAbsolventenverein.Theme.Website\icon.png" />
   </ItemGroup>
 
   <ItemGroup>
-    <Reference Include="Oqtane.Client"><HintPath>..\..\oqtane.framework-dev\Oqtane.Server\bin\Debug\net9.0\Oqtane.Client.dll</HintPath></Reference>
-    <Reference Include="Oqtane.Shared"><HintPath>..\..\oqtane.framework-dev\Oqtane.Server\bin\Debug\net9.0\Oqtane.Shared.dll</HintPath></Reference>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="9.0.8" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="9.0.8" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Reference Include="Oqtane.Client"><HintPath>..\..\oqtane.framework\Oqtane.Server\bin\Debug\net9.0\Oqtane.Client.dll</HintPath></Reference>
+    <Reference Include="Oqtane.Shared"><HintPath>..\..\oqtane.framework\Oqtane.Server\bin\Debug\net9.0\Oqtane.Shared.dll</HintPath></Reference>
   </ItemGroup>
 
   <PropertyGroup>

Client/Themes/MenuVertical.razor

@@ -0,0 +1,16 @@
+@namespace Oqtane.Themes.Controls
+@inherits MenuBase
+
+@if (MenuPages.Any())
+{
+    <span class="app-menu-toggler">
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </span>
+    <div class="app-menu">
+        <div class="collapse navbar-collapse" id="Menu">
+            <MenuItemsVertical ParentPage="null" Pages="MenuPages" />
+        </div>
+    </div>
+}

Client/Themes/Theme1.razor

@@ -2,25 +2,13 @@
 @inherits ThemeBase
 @inject ISettingService SettingService
 
-<div class="wrapper d-flex flex-column min-vh-100">
-<main role="main" class="flex-fill">
-
-    <nav class="navigation">
-        <div class="container d-flex justify-content-between align-items-center">
-            <a class="navbar-brand" href="https://www.szu-home.at/">
-                <img src="Images/szu-Logo.png" alt="Logo" class="img-fluid" style="max-height: 60px;" />
-            </a>
-
-            <Menu Orientation="Horizontal" />
-
-            <div class="controls ms-auto">
-                <div class="controls-group">
-                    <UserProfile ShowRegister="@_register" />
-                    <Login ShowLogin="@_login" />
-                    <ControlPanel LanguageDropdownAlignment="right" />
-                </div>
-            </div>
-
+<main role="main">
+    <nav class="navbar navbar-dark bg-primary fixed-top">
+        <Logo />
+        <Menu Orientation="Horizontal" />
+        
+        <div class="controls ms-auto">
+            <div class="controls-group"><UserProfile ShowRegister="@_register" /> <Login ShowLogin="@_login" /> <ControlPanel ButtonClass="btn-outline-light" /></div>
         </div>
     </nav>
 
@@ -114,9 +102,7 @@
             <p>Impressum | Datenschutz | AGB</p>
         </div>
     </footer>
-
 </main>
-</div>
 
 @code {
     public override string Name => "Theme1";

Client/Themes/ThemeSettings.razor

@@ -1,4 +1,4 @@
-@namespace SZUAbsolventenverein.Theme.Website
+ ich pr@namespace SZUAbsolventenverein.Theme.Website
 @inherits ModuleBase
 @implements Oqtane.Interfaces.ISettingsControl
 @inject ISettingService SettingService

Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css

@@ -5,44 +5,46 @@ html, body {
 }
 
 .navigation {
-    max-width: 80vw; /* oder max-width: 100%; */
+    max-width: 80vw; /* oder max-width: 100%;*/ 
     margin: 0 auto;
-    position: fixed;
+    position: fixed; 
     top: 0;
     z-index: 1000;
     background-color: #bbb;
     padding: 1rem 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    width: 80vw; /* Wichtig! */
-    left: 50%; /* horizontale Zentrierung mit transform */
-    transform: translateX(-50%);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
+    width: 80vw; /* Wichtig!*/
+    /*left: 50%; /* horizontale Zentrierung mit transform*/ 
+    /*transform: translateX(-50%);*/
     border: 3px solid #75767B;
     border-top: none;
     border-bottom: none;
 }
 
+
+
 body {
     padding-top: 100px; /* H<>he der fixierten Navigation kompensieren */
 }
 
-.navigation .app-logo .img-fluid {
+.app-logo .img-fluid {
     max-height: 60px;
 }
 
-.navigation .app-menu {
+.app-menu {
     display: flex;
-    gap: 1rem;
+    gap: 1rem; 
 }
 
-.navigation .nav-item a {
+.nav-item a {
     color: black;
     font-weight: normal;
     text-decoration: none;
 }
 
-    .navigation .nav-item a.active {
-        font-weight: bold;
-    }
+.nav-item a.active {
+    font-weight: bold;
+} 
 
 /* Footer */
 .footer {
@@ -57,7 +59,7 @@ body {
 
 
 .wrapper {
-    max-width: 80vw; /* max. 80% der Viewport-Breite */
+    max-width: 80vw; /* max. 80% der Viewport-Breite */ 
     margin: 0 auto; /* horizontal zentrieren */
     display: flex;
     flex-direction: column;
@@ -68,7 +70,7 @@ main.flex-fill {
     flex: 1 0 auto; /* Flex-grow 1, flex-shrink 0, flex-basis auto */
     display: flex;
     flex-direction: column;
-    min-height: 0; /* Wichtig f<>r flexbox overflow */
+    min-height: 0; /* Wichtig f<>r flexbox overflow*/
 }
 
 .content {
@@ -179,6 +181,48 @@ main.flex-fill {
         outline: none;
     }
 
-
+.hamburger {
+    width: 40px;
+    height: 28px;
+    position: relative;
+    cursor: pointer;
+}
+
+    .hamburger span {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: #e5e7eb;
+        border-radius: 2px;
+        transition: transform 0.25s ease, opacity 0.25s ease;
+    }
+
+        .hamburger span:nth-child(1) {
+            top: 0;
+        }
+
+        .hamburger span:nth-child(2) {
+            top: 12px;
+        }
+
+        .hamburger span:nth-child(3) {
+            bottom: 0;
+        }
+
+    /* Animation beim Klick (wird aktiv, wenn .active hinzugef<65>gt wird) */
+    .hamburger.active span:nth-child(1) {
+        transform: translateY(12px) rotate(45deg);
+    }
+
+    .hamburger.active span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .hamburger.active span:nth-child(3) {
+        transform: translateY(-12px) rotate(-45deg);
+    }
+
+