Updated sidebar
This commit is contained in:
Laux Dev
@@ -2,10 +2,12 @@ import React from "react";
|
||||
import styles from "./styles.module.css";
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.mainContainer}>
|
||||
<div className={styles.topContainer}>
|
||||
{/* Logo Container */}
|
||||
<div className={styles.logoContainer}>
|
||||
<div>
|
||||
<div className={styles.logoIconContainer}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="37"
|
||||
@@ -50,36 +52,43 @@ const Sidebar = () => {
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<div>
|
||||
</div>
|
||||
<div className={styles.logoDescription}>
|
||||
<p>Internal Developer Platform</p>
|
||||
<p>By Project Moonshot Inc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Navigations */}
|
||||
<div className={styles.navContainer}>
|
||||
<div>
|
||||
<div className={styles.active}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M1.29492 11.3391L10.0003 2.63379L18.7056 11.3391"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
d="M5.4375 12H3.5625L12 3.5625L20.4375 12H18.5625"
|
||||
stroke="#969AF9"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M3.97266 8.66016V17.3655H16.0262V8.66016"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
d="M5.4375 12V18.5625C5.4375 19.0598 5.63504 19.5367 5.98667 19.8883C6.33831 20.24 6.81522 20.4375 7.3125 20.4375H16.6875C17.1848 20.4375 17.6617 20.24 18.0133 19.8883C18.365 19.5367 18.5625 19.0598 18.5625 18.5625V12"
|
||||
stroke="#969AF9"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.125 12H13.875V15.75H10.125V12Z"
|
||||
stroke="#969AF9"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
</svg>
|
||||
<p>Home</p>
|
||||
@@ -87,144 +96,49 @@ const Sidebar = () => {
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_306_15313)">
|
||||
<path
|
||||
d="M5.70508 8.01828V2.73256C5.70508 2.00276 6.29671 1.41113 7.02651 1.41113H12.9729C13.7027 1.41113 14.2944 2.00276 14.2944 2.73256V8.01828C14.2944 8.74807 13.7027 9.3397 12.9729 9.3397H7.02651C6.29671 9.3397 5.70508 8.74807 5.70508 8.01828Z"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
d="M17.3653 7.69688C16.4048 6.7122 15.1917 6.01095 13.8591 5.67M10.1362 5.67C8.78152 6.01744 7.55105 6.73708 6.58406 7.7475M4.82062 10.7616C4.60749 11.4669 4.49946 12.1997 4.5 12.9366C4.5 13.6284 4.59375 14.2987 4.76906 14.9353M6.60656 18.1491C7.56883 19.1461 8.7887 19.8568 10.1306 20.2022M13.8806 20.2022C15.2181 19.856 16.4338 19.1467 17.3934 18.1528M19.2328 14.9372C19.4119 14.2864 19.5024 13.6144 19.5019 12.9394C19.5019 12.2231 19.4016 11.5303 19.2141 10.8741M10.125 5.4375C10.125 5.93478 10.3225 6.41169 10.6742 6.76333C11.0258 7.11496 11.5027 7.3125 12 7.3125C12.4973 7.3125 12.9742 7.11496 13.3258 6.76333C13.6775 6.41169 13.875 5.93478 13.875 5.4375C13.875 4.94022 13.6775 4.46331 13.3258 4.11167C12.9742 3.76004 12.4973 3.5625 12 3.5625C11.5027 3.5625 11.0258 3.76004 10.6742 4.11167C10.3225 4.46331 10.125 4.94022 10.125 5.4375ZM3.5625 16.6875C3.5625 17.1848 3.76004 17.6617 4.11167 18.0133C4.46331 18.365 4.94022 18.5625 5.4375 18.5625C5.93478 18.5625 6.41169 18.365 6.76333 18.0133C7.11496 17.6617 7.3125 17.1848 7.3125 16.6875C7.3125 16.1902 7.11496 15.7133 6.76333 15.3617C6.41169 15.01 5.93478 14.8125 5.4375 14.8125C4.94022 14.8125 4.46331 15.01 4.11167 15.3617C3.76004 15.7133 3.5625 16.1902 3.5625 16.6875ZM16.6875 16.6875C16.6875 17.1848 16.885 17.6617 17.2367 18.0133C17.5883 18.365 18.0652 18.5625 18.5625 18.5625C19.0598 18.5625 19.5367 18.365 19.8883 18.0133C20.24 17.6617 20.4375 17.1848 20.4375 16.6875C20.4375 16.1902 20.24 15.7133 19.8883 15.3617C19.5367 15.01 19.0598 14.8125 18.5625 14.8125C18.0652 14.8125 17.5883 15.01 17.2367 15.3617C16.885 15.7133 16.6875 16.1902 16.6875 16.6875Z"
|
||||
stroke="#858699"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M10 9.33984V14.6256"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M3.39258 14.6253V13.3039C3.39258 12.5741 3.98421 11.9824 4.71401 11.9824H15.2854C16.0153 11.9824 16.6069 12.5741 16.6069 13.3039V14.6253"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M1.41016 17.2679V15.9464C1.41016 15.2166 2.00178 14.625 2.73158 14.625H4.05301C4.78281 14.625 5.37444 15.2166 5.37444 15.9464V17.2679C5.37444 17.9977 4.78281 18.5893 4.05301 18.5893H2.73158C2.00178 18.5893 1.41016 17.9977 1.41016 17.2679Z"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M8.01758 17.2679V15.9464C8.01758 15.2166 8.60921 14.625 9.33901 14.625H10.6604C11.3902 14.625 11.9819 15.2166 11.9819 15.9464V17.2679C11.9819 17.9977 11.3902 18.5893 10.6604 18.5893H9.33901C8.60921 18.5893 8.01758 17.9977 8.01758 17.2679Z"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M14.625 17.2679V15.9464C14.625 15.2166 15.2166 14.625 15.9464 14.625H17.2679C17.9977 14.625 18.5893 15.2166 18.5893 15.9464V17.2679C18.5893 17.9977 17.9977 18.5893 17.2679 18.5893H15.9464C15.2166 18.5893 14.625 17.9977 14.625 17.2679Z"
|
||||
stroke="#969AF9"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_306_15313">
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
fill="white"
|
||||
style={{ fillOpacity: 1 }}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<p>Organization</p>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_306_15323)">
|
||||
<path
|
||||
d="M1.41016 16.9372V3.06223C1.41016 2.71176 1.54938 2.37565 1.79719 2.12783C2.04501 1.88002 2.38112 1.7408 2.73158 1.7408H7.60766C7.90951 1.732 8.20529 1.82686 8.44572 2.00959C8.68614 2.19232 8.85674 2.45189 8.92908 2.74509L9.33873 4.38366H17.2673C17.6177 4.38366 17.9539 4.52287 18.2017 4.77069C18.4494 5.01851 18.5887 5.35462 18.5887 5.70509V16.9372C18.5887 17.2878 18.4494 17.6238 18.2017 17.8716C17.9539 18.1195 17.6177 18.2586 17.2673 18.2586H2.73158C2.38112 18.2586 2.04501 18.1195 1.79719 17.8716C1.54938 17.6238 1.41016 17.2878 1.41016 16.9372Z"
|
||||
d="M5.4375 18.5625L8.02219 11.6709C8.08916 11.4923 8.20905 11.3383 8.36585 11.2296C8.52265 11.1209 8.70889 11.0626 8.89969 11.0625H20.4375M5.4375 18.5625H18.5869C19.0231 18.5624 19.4456 18.4102 19.7817 18.1321C20.1177 17.8541 20.3463 17.4675 20.4281 17.0391L21.3619 12.1538C21.3842 12.0195 21.377 11.882 21.3408 11.7508C21.3047 11.6196 21.2404 11.4979 21.1524 11.394C21.0645 11.2902 20.9549 11.2068 20.8315 11.1495C20.708 11.0923 20.5736 11.0626 20.4375 11.0625M5.4375 18.5625C4.94022 18.5625 4.46331 18.365 4.11167 18.0133C3.76004 17.6617 3.5625 17.1848 3.5625 16.6875V6.375C3.5625 5.87772 3.76004 5.40081 4.11167 5.04917C4.46331 4.69754 4.94022 4.5 5.4375 4.5H9.1875L12 7.3125H18.5625C19.0598 7.3125 19.5367 7.51004 19.8883 7.86167C20.24 8.21331 20.4375 8.69022 20.4375 9.1875V11.0625"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M6.69531 12.643L8.67745 13.9644L12.6417 8.67871"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_306_15323">
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
fill="white"
|
||||
style={{ fillOpacity: 1 }}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<p>Project</p>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.35631 9.33956C9.18082 9.33956 10.6599 7.8605 10.6599 6.03599C10.6599 4.21148 9.18082 2.73242 7.35631 2.73242C5.5318 2.73242 4.05273 4.21148 4.05273 6.03599C4.05273 7.8605 5.5318 9.33956 7.35631 9.33956Z"
|
||||
stroke="#858699"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1.41016 18.5893H13.303V17.873C13.2925 16.8658 13.0269 15.8776 12.5309 15.001C12.035 14.1242 11.325 13.3875 10.4671 12.8596C9.60929 12.3317 8.63164 12.0299 7.62552 11.9822C7.53582 11.978 7.44615 11.9758 7.35659 11.9756C7.26702 11.9758 7.17735 11.978 7.08765 11.9822C6.08153 12.0299 5.10388 12.3317 4.24603 12.8596C3.3882 13.3875 2.67816 14.1242 2.18223 15.001C1.6863 15.8776 1.42068 16.8658 1.41016 17.873V18.5893Z"
|
||||
stroke="#858699"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.6426 9.33956C14.4671 9.33956 15.9461 7.8605 15.9461 6.03599C15.9461 4.21148 14.4671 2.73242 12.6426 2.73242"
|
||||
stroke="#858699"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.945 18.5895H18.5879V17.8731C18.5773 16.8659 18.3117 15.8777 17.8158 15.0011C17.3198 14.1243 16.6098 13.3876 15.752 12.8597C15.1975 12.5185 14.5928 12.2717 13.9629 12.127"
|
||||
d="M3.5625 20.4375V18.5625C3.5625 17.5679 3.95759 16.6141 4.66085 15.9108C5.36411 15.2076 6.31794 14.8125 7.3125 14.8125H11.0625C12.0571 14.8125 13.0109 15.2076 13.7142 15.9108C14.4174 16.6141 14.8125 17.5679 14.8125 18.5625V20.4375M15.75 3.68438C16.5566 3.89091 17.2716 4.36003 17.7822 5.01779C18.2927 5.67555 18.5699 6.48453 18.5699 7.31719C18.5699 8.14985 18.2927 8.95883 17.7822 9.61658C17.2716 10.2743 16.5566 10.7435 15.75 10.95M20.4375 20.4375V18.5625C20.4327 17.7348 20.1543 16.932 19.6456 16.2791C19.1368 15.6263 18.4264 15.16 17.625 14.9531M5.4375 7.3125C5.4375 8.30706 5.83259 9.26089 6.53585 9.96415C7.23911 10.6674 8.19294 11.0625 9.1875 11.0625C10.1821 11.0625 11.1359 10.6674 11.8392 9.96415C12.5424 9.26089 12.9375 8.30706 12.9375 7.3125C12.9375 6.31794 12.5424 5.36411 11.8392 4.66085C11.1359 3.95759 10.1821 3.5625 9.1875 3.5625C8.19294 3.5625 7.23911 3.95759 6.53585 4.66085C5.83259 5.36411 5.4375 6.31794 5.4375 7.3125Z"
|
||||
stroke="#858699"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
@@ -236,9 +150,9 @@ const Sidebar = () => {
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_306_15337)">
|
||||
@@ -283,50 +197,17 @@ const Sidebar = () => {
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16.235 17.2683C16.235 17.6187 16.0957 17.9549 15.848 18.2027C15.6001 18.4504 15.264 18.5897 14.9136 18.5897H3.02065C2.67018 18.5897 2.33407 18.4504 2.08625 18.2027C1.83844 17.9549 1.69922 17.6187 1.69922 17.2683V2.73256C1.69922 2.38209 1.83844 2.04599 2.08625 1.79817C2.33407 1.55035 2.67018 1.41113 3.02065 1.41113H10.4019C10.7523 1.41113 11.0884 1.55035 11.3363 1.79817L15.848 6.30981C16.0957 6.55762 16.235 6.89374 16.235 7.2442V17.2683Z"
|
||||
d="M4.03125 5.90625L5.4375 7.3125L7.78125 4.96875M4.03125 11.5312L5.4375 12.9375L7.78125 10.5938M4.03125 17.1562L5.4375 18.5625L7.78125 16.2188M11.0625 6.375H19.5M11.0625 12H19.5M11.0625 17.625H19.5"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M9.70508 9.1748H13.0086"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M9.70508 13.7578H13.0086"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M4.5957 13.6833L5.70291 14.7905L7.54826 12.207"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
<path
|
||||
d="M4.5957 9.0173L5.70291 10.1245L7.54826 7.54102"
|
||||
stroke="#858699"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ strokeOpacity: 1 }}
|
||||
/>
|
||||
</svg>
|
||||
<p>Credentials</p>
|
||||
@@ -334,9 +215,9 @@ const Sidebar = () => {
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_306_15353)">
|
||||
@@ -374,6 +255,7 @@ const Sidebar = () => {
|
||||
</div>
|
||||
{/* Footers */}
|
||||
<div className={styles.navFooterContainer}>
|
||||
<div>
|
||||
<div>
|
||||
<p>Download ICTL v3</p>
|
||||
<svg
|
||||
@@ -423,6 +305,7 @@ const Sidebar = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,157 @@
|
||||
.navContainer > div > svg > path {
|
||||
.mainContainer {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
height: 100vh;
|
||||
align-self: stretch;
|
||||
border-right: 1px solid #2c2d3d;
|
||||
}
|
||||
.topContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.logoContainer {
|
||||
display: flex;
|
||||
height: 84px;
|
||||
padding: 12px 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
align-self: stretch;
|
||||
border-bottom: 1px solid #2c2d3d;
|
||||
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
|
||||
}
|
||||
.logoContainer > div {
|
||||
display: flex;
|
||||
padding-right: 6px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.logoIconContainer {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.logoDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.logoDescription > p:nth-child(1) {
|
||||
color: #fff;
|
||||
color: color(display-p3 1 1 1);
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
}
|
||||
.logoDescription > p:nth-child(2) {
|
||||
color: #85869b;
|
||||
color: color(display-p3 0.5216 0.5255 0.6);
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.05px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.navContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.navContainer > div {
|
||||
display: flex;
|
||||
padding: 16px 24px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: 16px;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.navContainer > div:hover {
|
||||
background: rgba(149, 154, 255, 0.05);
|
||||
}
|
||||
.navContainer > div path {
|
||||
stroke: #858699;
|
||||
}
|
||||
.navContainer > div:hover > svg > path {
|
||||
stroke: #969af9;
|
||||
.navContainer > div:hover path {
|
||||
stroke: #d2d3e0;
|
||||
}
|
||||
.navContainer > div > svg > g > path {
|
||||
.navContainer > div path {
|
||||
stroke: #858699;
|
||||
}
|
||||
.navContainer > div:hover > svg > g > path {
|
||||
.navContainer > div:hover path {
|
||||
stroke: #d2d3e0;
|
||||
}
|
||||
.active {
|
||||
border-left: 2px solid #959aff;
|
||||
background: rgba(149, 154, 255, 0.05);
|
||||
color: #959aff;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.active svg path {
|
||||
stroke: #969af9;
|
||||
}
|
||||
.navFooterContainer {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.navFooterContainer > div {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
align-self: stretch;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #292b43;
|
||||
background: #1d1e2c;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.navFooterContainer > div > div {
|
||||
display: flex;
|
||||
width: 186px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.navFooterContainer > div > div > p {
|
||||
color: #d2d3e1;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user