feat(WEB-128): desktop and mobile initial wireframe implemented

components/MyPages/Sidebar/index.tsx

@@ -0,0 +1,40 @@
+import { LogOut } from "react-feather"
+import Link from "next/link"
+
+import styles from "./sidebar.module.css"
+
+export default function Sidebar() {
+  return (
+    <aside className={styles.sidebar}>
+      <nav className={styles.nav}>
+        <Link className={`${styles.link} ${styles.active}`} href="#">
+          My Scandic
+        </Link>
+        <Link className={styles.link} href="#">
+          My Stays
+        </Link>
+        <Link className={styles.link} href="#">
+          My Points
+        </Link>
+        <Link className={styles.link} href="#">
+          My Benefits
+        </Link>
+        <Link className={styles.link} href="#">
+          My Challenges
+        </Link>
+        <Link className={styles.link} href="#">
+          My Favourites
+        </Link>
+        <Link className={styles.link} href="#">
+          About Scandic Friends
+        </Link>
+        <Link className={styles.link} href="#">
+          My Profile
+        </Link>
+        <Link className={styles.link} href="/api/auth/signout">
+          Log out <LogOut height={16} width={16} />
+        </Link>
+      </nav>
+    </aside>
+  )
+}

components/MyPages/Sidebar/sidebar.module.css

@@ -0,0 +1,45 @@
+.sidebar {
+  align-self: flex-start;
+  display: none;
+  position: sticky;
+  top: 13.2rem;
+}
+
+.nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding-left: 4rem;
+}
+
+.link {
+  align-items: center;
+  color: var(--some-text-color, #111);
+  display: flex;
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.9rem;
+  position: relative;
+  text-decoration: none;
+}
+
+.active {
+  font-weight: 600;
+}
+
+.active::before {
+  bottom: -0.4rem;
+  background-color: var(--some-text-color, #000);
+  content: "";
+  height: 0.2rem;
+  position: absolute;
+  width: 100%;
+}
+
+@media screen and (min-width: 950px) {
+  .sidebar {
+    display: block;
+  }
+}