1 files changed, 73 insertions, 0 deletions
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
new file mode 100644
index 0000000..9742f0e
--- /dev/null
+++ b/frontend/src/components/sidebar.css
@@ -0,0 +1,73 @@
+#sidebar {
+    background-color: #2b2e46;
+    width: 320px;    height: 100vh;
+    min-height: 840px;
+}
+#sidebar>div:nth-child(1){height: 140px;} /* logo */
+button#side-grid {
+    border: 0;
+    background-color: #202232;
+    border-radius: 20px;
+    font-size: 18px;
+    color: #cdcfdf;
+    width: 300px;
+    
+    transition: 
+    background-color .2s, 
+    border-radius .5s,
+    width .3s;
+}
+span {
+    font-family: D-DIN;
+    opacity: 1;
+    transition: opacity .1s;
+}
+button#side-grid:hover {
+    background-color: #141520 !important;
+    border-radius: 10px !important;
+    cursor: pointer;
+}
+button>img{
+    height: 20px;
+    float: left;
+    padding-left: 4px;
+    filter: invert(0.8);
+    scale: 1.1;
+}
+#side-menu { /* just the menu button */
+    border: 0;
+    position: absolute;
+    background-color: transparent;
+    left: 6px;    top: 6px;
+    width: 40px;    height: 40px;
+    cursor: pointer;
+}
+#sidebar-list { /* buttons */
+    z-index: 1;
+    min-height: 700px;
+    width: 308px; height: calc(100vh - 140px); /* calc - logo */
+    position: absolute;
+    background-color: #2b2e46;
+    display: grid;
+    padding: 0 6px;
+    row-gap: 8px;
+    grid-template-rows: 
+    60px 40px 40px
+    30px 40px 40px 40px
+    30px 40px 40px;
+    transition: width .3s;
+}
+#sidebar-content { 
+    position: absolute;
+    background-color: #202232;
+    left: 52px;
+    min-height: 700px;
+    width: 268px;    height: calc(100vh - 140px); /* calc - logo */
+}
+\ No newline at end of file

diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css new file mode 100644 index 0000000..9742f0e --- /dev/null +++ b/frontend/src/components/sidebar.css
@@ -0,0 +1,73 @@
	1	#sidebar {
	2	background-color: #2b2e46;
	3	width: 320px; height: 100vh;
	4	min-height: 840px;
	5	}
	6
	7	#sidebar>div:nth-child(1){height: 140px;} /* logo */
	8
	9	button#side-grid {
	10	border: 0;
	11	background-color: #202232;
	12	border-radius: 20px;
	13	font-size: 18px;
	14	color: #cdcfdf;
	15	width: 300px;
	16
	17	transition:
	18	background-color .2s,
	19	border-radius .5s,
	20	width .3s;
	21	}
	22	span {
	23	font-family: D-DIN;
	24	opacity: 1;
	25	transition: opacity .1s;
	26	}
	27	button#side-grid:hover {
	28	background-color: #141520 !important;
	29	border-radius: 10px !important;
	30	cursor: pointer;
	31	}
	32
	33	button>img{
	34	height: 20px;
	35	float: left;
	36	padding-left: 4px;
	37	filter: invert(0.8);
	38	scale: 1.1;
	39	}
	40
	41	#side-menu { /* just the menu button */
	42	border: 0;
	43	position: absolute;
	44	background-color: transparent;
	45	left: 6px; top: 6px;
	46	width: 40px; height: 40px;
	47	cursor: pointer;
	48	}
	49
	50	#sidebar-list { /* buttons */
	51	z-index: 1;
	52	min-height: 700px;
	53	width: 308px; height: calc(100vh - 140px); /* calc - logo */
	54	position: absolute;
	55	background-color: #2b2e46;
	56	display: grid;
	57	padding: 0 6px;
	58	row-gap: 8px;
	59	grid-template-rows:
	60	60px 40px 40px
	61	30px 40px 40px 40px
	62	30px 40px 40px;
	63
	64	transition: width .3s;
	65	}
	66
	67	#sidebar-content {
	68	position: absolute;
	69	background-color: #202232;
	70	left: 52px;
	71	min-height: 700px;
	72	width: 268px; height: calc(100vh - 140px); /* calc - logo */
	73	} \ No newline at end of file