feat (FastAccess) : add fast access navigation

firestar300 · firestar300 · commit df2aebc3d714 · 2021-11-24T01:00:33.000+01:00
diff --git a/header.php b/header.php
@@ -19,5 +19,16 @@
 	<?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
+	<ul class="fast-access fast-access--hidden" aria-label="<?php echo esc_attr( 'Fast access navigation' ); ?>">
+		<li>
+			<a href="#searchform"><?php echo esc_html( 'Searchform' ); ?></a>
+		</li>
+		<li>
+			<a href="#content"><?php echo esc_html( 'Main content' ); ?></a>
+		</li>
+		<li>
+			<a href="#footer"><?php echo esc_html( 'Footer' ); ?></a>
+		</li>
+	</ul>
 <?php
 	wp_body_open();
diff --git a/src/scss/patterns/_fast-access.scss b/src/scss/patterns/_fast-access.scss
@@ -0,0 +1,20 @@
+.fast-access {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    padding: .5rem 1rem;
+    color: $secondary-color;
+    background-color: $primary-color;
+    transition: transform .3s ease-in-out;
+    transform: translate3d(0, -100%, 0);
+
+    &:focus-within {
+        transform: translate3d(0, 0, 0);
+    }
+
+    li:not(:last-of-type) {
+        margin-right: 1rem;
+    }
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -33,6 +33,7 @@ $entry-file-name: "style";
 @import "patterns/menu";
 @import "patterns/hero";
 @import "patterns/searchform";
+@import "patterns/fast-access";
 
 // Wordpress
 
