1 files changed, 30 insertions, 0 deletions

diff --git a/src/styles/components/_site-nav.scss b/src/styles/components/_site-nav.scss
new file mode 100644
index 0000000..99a8afc
--- /dev/null
+++ b/src/styles/components/_site-nav.scss
@@ -0,0 +1,30 @@
+@use "sass:math";
+@use "sass:meta";
+
+@use "pkg:iro-design" as iro;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+
+@mixin styles {
+        @include bem.component("site-nav-placeholder") {
+                block-size: props.get(iro.$o-navbar--block-size);
+
+                @include iro.media--media(">sm") {
+                        display: none;
+                }
+        }
+
+        @include bem.component("site-nav") {
+                position: fixed;
+                inset-block-end: 0;
+                inset-inline: 0;
+                z-index: calc(props.get(iro.$o-backdrop--z-index) - 10);
+                background-color: props.get(iro.$core--transparent-colors, --black, --900);
+                //border-block-start: 1px solid props.get(iro.$core--theme, --border-mute);
+                overflow-x: auto;
+
+                @include iro.media--media(">sm") {
+                        display: none;
+                }
+        }
+}