Add sidebar base logic

resources/scripts/assets/css/sidebar.css

@@ -0,0 +1,118 @@
+:root {
+    --color-primary: #212121;
+    --color-secondary: #3a3636;
+    --color-tertiary: #17171b;
+    --color-quaternary: #757575;
+    --color-quinary: #9e9e9e;
+    --button-color: #212121;
+    --button-color-hover: #424242;
+    --button-color-active: #c72510;
+    --button-color-disabled: #757575;
+    --button-color-text: #9e9e9e;
+    --text-main: #ffffff;
+    --text-secondary: #ffffff;
+    --text-tertiary: #ffffff;
+    --background-color: #212121;
+    --invert: 1000;
+    --sidebar-button-color: white;
+    --sidebar-button-color-hover: #0e0e1d;
+    --card-bg: #353535;
+}
+
+:root {
+    --sidebar-size: 220px;
+}
+.nav-bar {
+    display: none;
+}
+/* The side navigation menu */
+.sidebar {
+    margin: 0;
+    padding: 0;
+    width: var(--sidebar-size);
+    background-color: var(--color-tertiary);
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+    z-index: 999999;
+}
+
+/* Sidebar links */
+.sidebar a {
+    display: block;
+    color: var(--sidebar-button-color);
+    padding: 16px;
+    text-decoration: none;
+}
+
+/* Active/current link */
+.sidebar .router-link-active {
+    background-color: var(--button-color-active);
+    color: white;
+}
+
+/* Links on mouse-over */
+.sidebar a:hover:not(.router-link-active) {
+    background-color: var(--sidebar-button-color-hover);
+}
+
+/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
+div.content {
+    margin-left: var(--sidebar-size);
+    padding: 1px 16px;
+    height: 1000px;
+}
+
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+    .sidebar {
+        width: 100%;
+        left: -700px;
+        transition: all 0.3s ease-in-out;
+    }
+
+    div.content {
+        margin-left: 0;
+        padding: 1px 16px;
+        height: 1000px;
+    }
+
+    .active-nav {
+        left: 0;
+        margin-right: var(--sidebar-size);
+        width: var(--sidebar-size);
+        height: 100vh;
+    }
+
+    .nav-bar {
+        display: flex;
+    }
+}
+
+.avatar {
+    margin: 10px;
+    width: 200px;
+    height: 200px;
+    border-radius: 5%;
+}
+
+.smallAvatar {
+    width: 70px;
+    border-radius: 50%;
+}
+
+.nav-bar > * {
+    margin: 10px;
+}
+
+.left {
+    margin-left: auto;
+}
+
+.openMenu {
+    font-size: 50px;
+}
+
+.openMenu:hover {
+    cursor: pointer;
+}