Merge branch 'main' of https://github.com/TYPO3incubator/surfcamp-team2…

… into main
TYPO3incubator · Apr 11, 2024 · d6afac8 · d6afac8
2 parents 0207b56 + e0dd201
commit d6afac8
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 8 deletions.
diff --git a/config/sites/portfolio/config.yaml b/config/sites/portfolio/config.yaml
@@ -1,4 +1,6 @@
 base: '%env(TYPO3_BASE_URL)%'
+dependencies:
+  - surfcamp/base
 errorHandling:
   -
     errorCode: 404
@@ -22,6 +24,4 @@ languages:
     navigationTitle: Deutsch
     flag: de
 rootPageId: 1
-routes: {  }
-dependencies:
-  - surfcamp/base
+websiteTitle: 'Marvi Website'
diff --git a/...tylesheet/components/atoms/_menuLink.scss → ...ylesheet/components/atoms/_menu-link.scss b/...tylesheet/components/atoms/_menuLink.scss → ...ylesheet/components/atoms/_menu-link.scss
@@ -1,7 +1,11 @@
 .menu-link{
+  display: block;
   text-decoration: none;
   color: var(--color-base-text-secondary);
   font-size: $font-18;
+  &:hover{
+    color: var(--color-secondary);
+  }
 }
 
 
diff --git a/...l_packages/portfolio/Resources/Private/Build/Stylesheet/components/templates/_header.scss b/...l_packages/portfolio/Resources/Private/Build/Stylesheet/components/templates/_header.scss
@@ -20,28 +20,45 @@
     padding: $size-16;
   }
 
-  &__menu {
+  &__logo{
+    color: var(--color-base-text-secondary);
+    text-decoration: none;
+    &:hover{
+      color: var(--color-secondary);
+    }
+  }
 
+  &__menu {
     @include breakpoint-down(md) {
       position: absolute;
       width: 100%;
       top: 100%;
       right: -100%;
-      padding: $size-12;
       visibility: hidden;
       z-index: 9;
       opacity: 0;
       background-color: var(--color-primary);
       transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
       .menu__list {
         flex-direction: column;
+        gap: $size-4;
       }
       &.active {
         right: 0;
         opacity: 1;
         visibility: visible;
         transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
       }
+
+      .menu-link{
+        padding: $size-12;
+        transition: all .3s ease-in-out;
+        &:hover{
+          background-color: var(--color-secondary);
+          color: var(--color-base-text-secondary);
+          transition: all .3s ease-in-out;
+        }
+      }
     }
 
 

diff --git a/local_packages/portfolio/Resources/Private/Templates/Partials/Navigation/Footer.html b/local_packages/portfolio/Resources/Private/Templates/Partials/Navigation/Footer.html
@@ -1,5 +1,5 @@
 <footer class="footer">
-    <p class="footer__copyright">Copyright</p>
+    <p class="footer__copyright">© Ben Muster 2024</p>
     <f:render partial="Content/Molecules/MenuList" arguments="{
         menu: footerMenu,
         classes: 'footer__menu'

diff --git a/local_packages/portfolio/Resources/Private/Templates/Partials/Navigation/Header.html b/local_packages/portfolio/Resources/Private/Templates/Partials/Navigation/Header.html
@@ -4,7 +4,7 @@
 >
 
 <header class="header">
-    <div class="header__logo">Logo Placeholder</div>
+    <a href="/" class="header__logo">{site.configuration.websiteTitle}</a>
 
     <f:render partial="Content/Molecules/MenuList" arguments="{
         menu: headerMenu,

diff --git a/local_packages/portfolio/Resources/Public/JavaScript/app.js b/local_packages/portfolio/Resources/Public/JavaScript/app.js
@@ -0,0 +1,15 @@
+"use strict";
+function headerComponent() {
+    const header = document.querySelector('.header');
+    const headerMenuButtonToggle = header === null || header === void 0 ? void 0 : header.querySelector('.header__mobile-burger');
+    const headerNavigationContainer = header === null || header === void 0 ? void 0 : header.querySelector('.header__menu');
+    if (headerMenuButtonToggle) {
+        headerMenuButtonToggle.addEventListener('click', () => {
+            if (headerNavigationContainer) {
+                headerNavigationContainer.classList.toggle('active');
+                headerMenuButtonToggle.classList.toggle('active');
+            }
+        });
+    }
+}
+headerComponent();
diff --git a/local_packages/portfolio/Resources/Public/Stylesheet/styles.css b/local_packages/portfolio/Resources/Public/Stylesheet/styles.css
diff --git a/local_packages/portfolio/Resources/Public/Stylesheet/styles.css.map b/local_packages/portfolio/Resources/Public/Stylesheet/styles.css.map
diff --git a/local_packages/portfolio/package.json b/local_packages/portfolio/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "GPL-2.0-or-later",
   "scripts": {
-    "build": "npm run build:sass && npm run build:ts",
+    "build": "ddev npm run build:sass && ddev npm run build:ts",
     "build:sass": "sass ./Resources/Private/Build/Stylesheet/styles.scss:./Resources/Public/Stylesheet/styles.css --style compressed",
     "build:ts": "tsc",
     "watch:ts": "tsc --watch",