chore: add a toolbar component

5 files changed, 71 insertions, 11 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 6691eb9..9f2c454 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import Branding from '@components/Branding/Branding';
-import MainNav from '@components/MainNav/MainNav';
+import Toolbar from '@components/Toolbar/Toolbar';
 import styles from './Header.module.scss';
 
 const Header = ({ isHome }: { isHome: boolean }) => {
@@ -7,7 +7,7 @@ const Header = ({ isHome }: { isHome: boolean }) => {
     <header className={styles.wrapper}>
       <div className={styles.body}>
         <Branding isHome={isHome} />
-        <MainNav />
+        <Toolbar />
       </div>
     </header>
   );
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index cc4b45b..596f1d5 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -3,8 +3,6 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  --btn-size: #{fun.convert-px(50)};
-
   display: flex;
   flex-flow: column nowrap;
   place-items: center;
@@ -12,7 +10,6 @@
   width: var(--btn-size);
   background: var(--color-bg);
   position: relative;
-  z-index: 5;
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
@@ -41,6 +38,8 @@
 
 .checkbox {
   position: absolute;
+
+  // centered checkbox = btn-size - approximated checkbox size / 2
   top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
   left: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
   opacity: 0;
@@ -55,14 +54,12 @@
 
 .nav {
   display: flex;
-  flex-flow: column nowrap;
+  flex-flow: column wrap;
   place-content: center;
   padding-bottom: var(--toolbar-size);
-  position: absolute;
-  bottom: auto;
-  left: auto;
-  right: auto;
-  top: var(--btn-size);
+  position: fixed;
+  bottom: 0;
+  z-index: -1;
   background: var(--color-bg-opacity);
   box-shadow: 0 0 3px 0 var(--color-shadow);
   text-align: center;
@@ -73,6 +70,13 @@
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
+      padding-bottom: 0;
+      position: absolute;
+      bottom: auto;
+      left: auto;
+      right: auto;
+      top: var(--btn-size);
+      z-index: unset;
       border-bottom-width: fun.convert-px(5);
       transform-origin: 50% -100%;
     }
@@ -109,6 +113,10 @@
   text-decoration: none;
 
   @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      padding: var(--spacing-2xs) var(--spacing-sm) 0;
+    }
+
     @include mix.dimensions("md") {
       background: inherit;
     }
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index 3140e64..2440980 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -50,6 +50,7 @@ const MainNav = () => {
         className={styles.checkbox}
         checked={isChecked}
         onChange={() => setIsChecked(!isChecked)}
+        autoComplete="off"
       />
       <label
         htmlFor="main-nav__checkbox"
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
new file mode 100644
index 0000000..df1ad7e
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -0,0 +1,39 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  --toolbar-size: #{fun.convert-px(60)};
+  --btn-size: #{fun.convert-px(50)};
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: var(--toolbar-size);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background: var(--color-bg);
+  box-shadow: 0 fun.convert-px(-1) fun.convert-px(3) 0 var(--color-shadow);
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      --toolbar-size: #{fun.convert-px(50)};
+      --btn-size: #{fun.convert-px(42)};
+    }
+
+    @include mix.dimensions("sm") {
+      justify-content: flex-end;
+      gap: var(--spacing-md);
+      width: auto;
+      background: inherit;
+      box-shadow: none;
+      position: relative;
+      left: unset;
+      margin-right: unset;
+      transform: unset;
+    }
+  }
+}
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
new file mode 100644
index 0000000..b7acce9
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -0,0 +1,12 @@
+import MainNav from '@components/MainNav/MainNav';
+import styles from './Toolbar.module.scss';
+
+const Toolbar = () => {
+  return (
+    <div className={styles.wrapper}>
+      <MainNav />
+    </div>
+  );
+};
+
+export default Toolbar;