1 files changed, 104 insertions, 54 deletions
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 9742f0e..23d46ad 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -1,73 +1,123 @@
 #sidebar {
+    overflow: hidden;
+    position: absolute;
    background-color: #2b2e46;
    width: 320px;    height: 100vh;
-    min-height: 840px;
+    min-height: 670px;
+    
 }
-#sidebar>div:nth-child(1){height: 140px;} /* logo */
+ /* logo */
+#logo{
+    display: grid;
+    grid-template-columns: 60px 200px;
-button#side-grid {
-    border: 0;
+    height:  80px;
-    background-color: #202232;
+    padding: 20px 0 20px 30px;
-    border-radius: 20px;
+} 
-    font-size: 18px;
-    color: #cdcfdf;
+#logo-text{
-    width: 300px;
+    font-family: BarlowCondensed-Regular;
+    font-size: 42px;
+    color: #FFF;
+    line-height: 38px;
+}
+span>b{
+    font-family: BarlowCondensed-Bold;
+    font-size: 56px;
+}
+ /* Sidelist */
+#sidebar-list{
+    z-index: 2;
+    background-color: #2b2e46;
+    position: relative;
+    height: calc(100vh - 120px);
+    width: 320px; 
+    /* min-height: 670px; */
+    transition: width .3s;
+} 
+#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
+#sidebar-toplist{
    
-    transition: 
+    margin: 0 5px 0 5px;
-    background-color .2s, 
+    display: grid;
-    border-radius .5s,
+    height: 400px;
-    width .3s;
+    grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
 }
-span {
-    font-family: D-DIN;
+#sidebar-bottomlist{
-    opacity: 1;
+    display: grid;
+    margin: 0 5px 0 5px;
+    justify-items: left;
+    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
+    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
+}
+button>span{
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+    color: #CDCFDF;
+    height: 32px;
+    line-height: 28px;
    transition: opacity .1s;
 }
-button#side-grid:hover {
+button{
-    background-color: #141520 !important;
+    display: grid;
-    border-radius: 10px !important;
+    grid-template-columns: 50px auto;
+    place-items: left;
+    text-align: left;
+    
+    background-color: inherit;
    cursor: pointer;
-}
+    border: none;
+    width: 310px;
+    height: 40px;
+    border-radius: 20px;
+    padding: 5px 0 0 6px;
-button>img{
+    transition: 
-    height: 20px;
+    width .3s,
-    float: left;
+    background-color .3s;
-    padding-left: 4px;
+    /* outline: red dotted 1px; */
-    filter: invert(0.8);
-    scale: 1.1;
 }
+/* button>*{outline: red 1px dotted;} */
-#side-menu { /* just the menu button */
+button>img {
-    border: 0;
+    scale: 1.1;
-    position: absolute;
+    width: 20px;
-    background-color: transparent;
+    padding: 5px;
-    left: 6px;    top: 6px;
-    width: 40px;    height: 40px;
-    cursor: pointer;
 }
-#sidebar-list { /* buttons */
+ /* Maplist */
+#sidebar>div:nth-child(3){
+    position: relative;
+    background-color: #202232;
+    color: #424562;
    z-index: 1;
-    min-height: 700px;
+    
-    width: 308px; height: calc(100vh - 140px); /* calc - logo */
+    left: 52px; 
-    position: absolute;
+    top: calc(-100vh + 120px); 
-    background-color: #2b2e46;
+    width: 268px; height: calc(100vh - 120px);
-    display: grid;
+    min-height: 550px;
-    padding: 0 6px;
+} 
-    row-gap: 8px;
+input[type=text]{
-    grid-template-rows: 
+    margin: 10px 0 0 6px;
-    60px 40px 40px
+    padding: 1px 0px 1px 16px;
-    30px 40px 40px 40px
+    width: 240px;
-    30px 40px 40px;
+    height: 30px;
-    transition: width .3s;
+    font-family: BarlowSemiCondensed-Regular;
-}
+    font-size: 20px;
+    
+    background-color: #161723;
+    color:#CDCFDF;
+    
+    border: 0;
+    border-radius: 20px;
-#sidebar-content { 
+}
-    position: absolute;
+input[type=text]::placeholder{color:#2b2e46}
-    background-color: #202232;
+input[type=text]:focus{outline: inherit;}
-    left: 52px;
+a{text-decoration: none;height: 40px;}
+\ No newline at end of file
-    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 index 9742f0e..23d46ad 100644 --- a/frontend/src/components/sidebar.css +++ b/frontend/src/components/sidebar.css
@@ -1,73 +1,123 @@
1	#sidebar {	1	#sidebar {
		2	overflow: hidden;
		3	position: absolute;
2	background-color: #2b2e46;	4	background-color: #2b2e46;
3	width: 320px; height: 100vh;	5	width: 320px; height: 100vh;
4	min-height: 840px;	6	min-height: 670px;
		7
5	}	8	}
6		9
7	#sidebar>div:nth-child(1){height: 140px;} /* logo */	10	/* logo */
		11	#logo{
		12	display: grid;
		13	grid-template-columns: 60px 200px;
8		14
9	button#side-grid {	15
10	border: 0;	16	height: 80px;
11	background-color: #202232;	17	padding: 20px 0 20px 30px;
12	border-radius: 20px;	18	}
13	font-size: 18px;	19
14	color: #cdcfdf;	20	#logo-text{
15	width: 300px;	21	font-family: BarlowCondensed-Regular;
		22	font-size: 42px;
		23	color: #FFF;
		24	line-height: 38px;
		25	}
		26	span>b{
		27	font-family: BarlowCondensed-Bold;
		28	font-size: 56px;
		29	}
		30
		31	/* Sidelist */
		32	#sidebar-list{
		33	z-index: 2;
		34	background-color: #2b2e46;
		35	position: relative;
		36	height: calc(100vh - 120px);
		37	width: 320px;
		38	/* min-height: 670px; */
		39	transition: width .3s;
		40	}
		41	#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
		42	#sidebar-toplist{
16		43
17	transition:	44	margin: 0 5px 0 5px;
18	background-color .2s,	45	display: grid;
19	border-radius .5s,	46	height: 400px;
20	width .3s;	47	grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
21	}	48	}
22	span {	49
23	font-family: D-DIN;	50	#sidebar-bottomlist{
24	opacity: 1;	51	display: grid;
		52
		53	margin: 0 5px 0 5px;
		54	justify-items: left;
		55	grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
		56	grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
		57	}
		58	button>span{
		59	font-family: BarlowSemiCondensed-Regular;
		60	font-size: 18px;
		61	color: #CDCFDF;
		62	height: 32px;
		63	line-height: 28px;
25	transition: opacity .1s;	64	transition: opacity .1s;
26	}	65	}
27	button#side-grid:hover {	66	button{
28	background-color: #141520 !important;	67	display: grid;
29	border-radius: 10px !important;	68	grid-template-columns: 50px auto;
		69	place-items: left;
		70	text-align: left;
		71
		72	background-color: inherit;
30	cursor: pointer;	73	cursor: pointer;
31	}	74	border: none;
		75	width: 310px;
		76	height: 40px;
		77	border-radius: 20px;
		78	padding: 5px 0 0 6px;
32		79
33	button>img{	80	transition:
34	height: 20px;	81	width .3s,
35	float: left;	82	background-color .3s;
36	padding-left: 4px;	83	/* outline: red dotted 1px; */
37	filter: invert(0.8);
38	scale: 1.1;
39	}	84	}
		85	/* button>{outline: red 1px dotted;} /
40		86
41	#side-menu { /* just the menu button */	87	button>img {
42	border: 0;	88	scale: 1.1;
43	position: absolute;	89	width: 20px;
44	background-color: transparent;	90	padding: 5px;
45	left: 6px; top: 6px;
46	width: 40px; height: 40px;
47	cursor: pointer;
48	}	91	}
49		92
50	#sidebar-list { /* buttons */	93	/* Maplist */
		94	#sidebar>div:nth-child(3){
		95	position: relative;
		96	background-color: #202232;
		97	color: #424562;
51	z-index: 1;	98	z-index: 1;
52	min-height: 700px;	99
53	width: 308px; height: calc(100vh - 140px); /* calc - logo */	100	left: 52px;
54	position: absolute;	101	top: calc(-100vh + 120px);
55	background-color: #2b2e46;	102	width: 268px; height: calc(100vh - 120px);
56	display: grid;	103	min-height: 550px;
57	padding: 0 6px;	104	}
58	row-gap: 8px;	105	input[type=text]{
59	grid-template-rows:	106	margin: 10px 0 0 6px;
60	60px 40px 40px	107	padding: 1px 0px 1px 16px;
61	30px 40px 40px 40px	108	width: 240px;
62	30px 40px 40px;	109	height: 30px;
63		110
64	transition: width .3s;	111	font-family: BarlowSemiCondensed-Regular;
65	}	112	font-size: 20px;
		113
		114	background-color: #161723;
		115	color:#CDCFDF;
		116
		117	border: 0;
		118	border-radius: 20px;
66		119
67	#sidebar-content {	120	}
68	position: absolute;	121	input[type=text]::placeholder{color:#2b2e46}
69	background-color: #202232;	122	input[type=text]:focus{outline: inherit;}
70	left: 52px;	123	a{text-decoration: none;height: 40px;} \ No newline at end of file
71	min-height: 700px;
72	width: 268px; height: calc(100vh - 140px); /* calc - logo */
73	} \ No newline at end of file