|
|
@@ -1,3 +1,144 @@
|
|
|
+/* Menu */
|
|
|
+.menu{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background: rgb(0, 27, 45);
|
|
|
+ width: 18vw;
|
|
|
+ height: 100vh;
|
|
|
+ transition: width 0.3s;
|
|
|
+ flex-grow: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+ .menuHead{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 100px;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menuLogo{
|
|
|
+ width: 25%;
|
|
|
+ height: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menuHead a{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menuHead button{
|
|
|
+ background: none;
|
|
|
+ border-style: none;
|
|
|
+ color: white;
|
|
|
+ font-size: 35px;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menuHead button:hover{
|
|
|
+ color: rgb(201, 201, 201);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menuHead > button::-moz-focus-inner{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu > button svg{
|
|
|
+ stroke: white;
|
|
|
+ margin-right: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu > button{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: none;
|
|
|
+ border-style: none;
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 15px 0;
|
|
|
+ padding: 0 0 0 50px;
|
|
|
+ width: 100%;
|
|
|
+ height: 75px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: left;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu > button::-moz-focus-inner{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu > button:hover{
|
|
|
+ background: rgb(201, 201, 201);
|
|
|
+ color: black;
|
|
|
+ fill: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu > button:hover svg{
|
|
|
+ stroke: black;
|
|
|
+ }
|
|
|
+
|
|
|
+.menu > .active{
|
|
|
+ background: rgb(179, 191, 209);
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.menu > .active:hover{
|
|
|
+ background: rgb(179, 191, 209);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.menu > .active:hover svg{
|
|
|
+ stroke: white;
|
|
|
+}
|
|
|
+
|
|
|
+.logout{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 25px;
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.logout img{
|
|
|
+ height: 25px;
|
|
|
+ width: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Minimized menu */
|
|
|
+.menuMinimized{
|
|
|
+ width: 5vw;
|
|
|
+}
|
|
|
+
|
|
|
+.menuLogoMin{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.menuHeadMin{
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.menuMinimized button{
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.menuMinimized button svg{
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
.sidebar{
|
|
|
display: flex;
|
|
|
width: 25vw;
|
Lee Morgan