chore: add projects to main nav

I redesign a little the main nav on small screens so it can takes two
columns when the screen height is low. I change the 2xs breakpoint to
500px instead of 400px.

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/Icons/Projects/Projects.module.scss b/src/components/Icons/Projects/Projects.module.scss
new file mode 100644
index 0000000..3cf939a
--- /dev/null
+++ b/src/components/Icons/Projects/Projects.module.scss
@@ -0,0 +1,40 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.root,
+.separator,
+.cursor,
+.line,
+.text {
+  fill: var(--color-fg);
+}
+
+.stand {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+
+  &--top {
+    stroke-width: 3;
+  }
+
+  &--bottom {
+    stroke-width: 2;
+  }
+}
+
+.screen {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}
+
+.contour {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}