Skip to content

Commit

Permalink
fix: final cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@a7v8x
a7v8x committed Feb 16, 2024
1 parent b930633 commit e2ce236
Show file tree
Hide file tree
Showing 33 changed files with 1,023 additions and 1,594 deletions.
41 changes: 21 additions & 20 deletions sidebar-01/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@

@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');

:root {
--primary-color: #625BFE;
--primary-color-dark: #7771F6;
Expand All @@ -13,7 +11,10 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Mulish;
}

body {
font-family: Mulish, sans-serif;
}

.background {
Expand Down Expand Up @@ -54,14 +55,14 @@ main {
position: relative;
display: flex;
align-items: center;
margin-bottom: 32px;
margin-bottom: 2rem;
}

.sidebar-top .logo {
position: relative;
width: 54px;
width: 3.37rem;
margin-right: 1.45rem;
left: -1px;
left: -0.125rem;
}

.sidebar-top h2 {
Expand All @@ -73,25 +74,25 @@ main {
.expand-btn {
position: absolute;
top: 50%;
width: 45px;
height: 45px;
width: 2.8125rem;
height: 2.8125rem;
display: grid;
place-items: center;
background-color: var(--button-color);
border-radius: 6px;
border-radius: 0.375rem;
cursor: pointer;
box-shadow: 0 3px 10px -3px var(--button-color-shadow);
right: -3rem;
transform: translateY(-50%) translateX(-8px);
transform: translateY(-50%) translateX(-0.5rem);
opacity: 0;
pointer-events: none;
transition: 0.3s;
box-shadow: 0 3px 10px -3px var(--button-color-shadow);
}


nav:hover .expand-btn,
.expand-btn.hovered {
transform: translateY(-50%) translateX(0px);
transform: translateY(-50%) translateX(0);
opacity: 1;
pointer-events: all;
}
Expand All @@ -107,14 +108,14 @@ nav:hover .expand-btn,
}

.sidebar-links li a {
padding: 12px;
padding: 0.75rem;
color: var(--text-color);
font-size: 1.25rem;
display: flex;
align-items: center;
height: 56px;
height: 3.5rem;
text-decoration: none;
color: #fff;
color: var(--text-color);
}

.icon {
Expand All @@ -123,25 +124,25 @@ nav:hover .expand-btn,
}

.icon img {
width: 26px;
height: 26px;
width: 1.625rem;
height: 1.625rem;
margin: auto;
}

.sidebar-links .link {
margin-left: 40px;
margin-left: 2.5rem;
}

.sidebar-links .active {
width: 100%;
text-decoration: none;
background-color: var(--primary-color-dark);
transition: all 100ms ease-in;
border-radius: 10px;
border-radius: 0.625rem;
}

body.collapsed nav {
width: 80px;
width: 5rem;
}

body.collapsed .hide {
Expand Down
0 sidebar-03/assets/analytics.svg → sidebar-02/assets/analytics.svg
View file
File renamed without changes
0 sidebar-03/assets/chevron.svg → sidebar-02/assets/chevron.svg
View file
File renamed without changes
0 sidebar-03/assets/dashboard.svg → sidebar-02/assets/dashboard.svg
View file
File renamed without changes
0 sidebar-03/assets/funds.svg → sidebar-02/assets/funds.svg
View file
File renamed without changes
0 sidebar-03/assets/help.svg → sidebar-02/assets/help.svg
View file
File renamed without changes
0 sidebar-03/assets/logo.svg → sidebar-02/assets/logo.svg
View file
File renamed without changes
0 sidebar-03/assets/performance.svg → sidebar-02/assets/performance.svg
View file
File renamed without changes
0 sidebar-03/assets/profile.jpg → sidebar-02/assets/profile.jpg
View file
File renamed without changes
0 sidebar-03/assets/settings.svg → sidebar-02/assets/settings.svg
View file
File renamed without changes
121 changes: 44 additions & 77 deletions sidebar-02/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,115 +7,82 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="sidebar-top">
<div class="logo__wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="logo" width="180" height="180" viewBox="0 0 180 180" fill="none">
<path d="M82.646 37.0917C85.7401 35.3054 89.552 35.3054 92.646 37.0917L133.614 60.7445L105.286 77.3318C100.901 72.9296 94.8325 70.2051 88.128 70.2051C81.1554 70.2051 74.871 73.1519 70.4523 77.8681L41.4416 60.8811L82.646 37.0917Z" fill="white"/>
<path d="M64.9303 87.4484L35.9141 70.4582V117.952L64.8222 101.025C64.2287 98.9258 63.9111 96.7109 63.9111 94.4219C63.9111 91.9977 64.2673 89.6567 64.9303 87.4484Z" fill="white"/>
<path d="M70.1924 110.694L41.8975 127.262L82.646 150.788C85.74 152.574 89.552 152.574 92.646 150.788L133.158 127.398L105.556 111.236C101.152 115.8 94.9714 118.639 88.128 118.639C81.0175 118.639 74.6227 115.574 70.1924 110.694Z" fill="white"/>
<path d="M111.22 101.739L139.376 118.226C139.377 118.162 139.378 118.098 139.378 118.034V70.1831L111.101 86.7403C111.908 89.154 112.345 91.7369 112.345 94.4219C112.345 96.9723 111.951 99.4305 111.22 101.739Z" fill="white"/>
</svg>
<h2 class="hide">Astra</h2>
</div>
<a href="#" class="logo__wrapper">
<img src="assets/logo.svg" alt="Logo" class="logo">
<h1 class="hide">Laplace</h1>
</a>
<div class="expand-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 7l5 5l-5 5"></path>
<path d="M13 7l5 5l-5 5"></path>
</svg>
</div>
<img src="assets/chevron.svg" alt="Chevron">
</div>
</div>
<div class="sidebar-links">
<ul>
<li>
<a href="#dashboard" title="Dashboard">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4h6v8h-6z"></path>
<path d="M4 16h6v4h-6z"></path>
<path d="M14 12h6v8h-6z"></path>
<path d="M14 4h6v4h-6z"></path>
</svg>
<a href="#dashboard" title="Dashboard" class="tooltip">
<img src="assets/dashboard.svg" alt="Dashboard">
<span class="link hide">Dashboard</span>
<span class="tooltip__content">Dashboard</span>
</a>
</li>
<li>
<a href="#project" title="Project">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
<span class="link hide">Projects</span>
<a href="#project" title="Project" class="tooltip">
<img src="assets/analytics.svg" alt="Analytics">
<span class="link hide">Analytics</span>
<span class="tooltip__content">Analytics</span>
</a>
</li>
<li>
<a href="#calendar" title="Calendar">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M16 3l0 4"></path>
<path d="M8 3l0 4"></path>
<path d="M4 11l16 0"></path>
<path d="M8 15h2v2h-2z"></path>
</svg>
<span class="link hide">Calendar</span>
<a href="#performance" title="Performance" class="tooltip">
<img src="assets/performance.svg" alt="Performance">
<span class="link hide">Performance</span>
<span class="tooltip__content">Performance</span>
</a>
</li>
<li>
<a href="#messages" title="Messages">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
<path d="M8 13l3 -2l2 2l3 -2"></path>
</svg>
<span class="link hide">Messages</span>
<a href="#funds" title="Funds" class="tooltip">
<img src="assets/funds.svg" alt="Funds">
<span class="link hide">Funds</span>
<span class="tooltip__content">Funds</span>
</a>
</li>
</ul>
</div>
<div class="sidebar-links sidebar-bottom">
<div class="divider"></div>
<ul>
<li>
<a href="#help" title="Help">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M12 16v.01"></path>
<path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"></path>
</svg>

<span class="link hide">Help</span>
</a>
</li>
<li>
<a href="#settings" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#91959C" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
</svg>
<span class="link hide">Settings</span>
</a>
</li>
</ul>
<div class="divider"></div>
<div class="sidebar-bottom">
<div class="sidebar-links">
<ul>
<li>
<a href="#help" title="Help" class="tooltip">
<img src="assets/help.svg" alt="Help">
<span class="link hide">Help</span>
<span class="tooltip__content">Help</span>
</a>
</li>
<li>
<a href="#settings" title="Settings" class="tooltip">
<img src="assets/settings.svg" alt="Settings">
<span class="link hide">Settings</span>
<span class="tooltip__content">Settings</span>
</a>
</li>
</ul>
</div>
<div class="sidebar__profile">
<div class="avatar__wrapper">
<img class="avatar" src="assets/joe-doe-profile.png" alt="Joe Doe Picture">
<img class="avatar" src="assets/profile.jpg" alt="Profile">
<div class="online__status"></div>
</div>
<section class="avatar__name hide">
<div class="avatar__name hide">
<div class="user-name">Joe Doe</div>
<div class="email">[email protected]</div>
</section>
</div>
</div>
</div>
</nav>
Expand Down
4 changes: 1 addition & 3 deletions sidebar-02/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@ const expand_btn = document.querySelector(".expand-btn");
let activeIndex;

expand_btn.addEventListener("click", () => {
const iconImage = expand_btn.querySelector('img');

document.body.classList.toggle("collapsed");
});

const current = window.location.href;

const allLinks = document.querySelectorAll(".sidebar-links a")
const allLinks = document.querySelectorAll(".sidebar-links a");

allLinks.forEach((elem) => {
elem.addEventListener('click', function() {
Expand Down
Loading

0 comments on commit e2ce236

Please sign in to comment.