beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changed appearance of settings

Browse source 
i forgot to commit the changes one by one but this is some of the things i did: changed some .class in html, fixed some bugs, making the whole settings position fixed, added more javascript, and more.
This commit is contained in:
westtle 2024-02-11 16:36:41 +07:00
parent 3cde3b8fee
commit 517341c75b
5 changed files with 93 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/images/icons/chevron.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
Side by side

After

Width:  |  Height:  |  Size: 232 B

1
assets/images/icons/settings.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 978 B

5
assets/scripts/settings.js
View file

@ -1,4 +1,5 @@
// HTML.
const settings = document.querySelector(".settings");
const settingsToggle = document.querySelector(".settings__button--toggle-settings");
const settingsList = document.querySelector(".settings__buttons");
const settingsItems = settingsList.querySelectorAll("a, button");
@ -7,12 +8,16 @@ function toggleSettings() {
const isExpanded = (settingsToggle.getAttribute("aria-expanded") == "true");
if (isExpanded) {
settings.setAttribute("data-expanded", false);
settingsToggle.setAttribute("aria-expanded", false);
settingsList.setAttribute("aria-hidden", true);
settingsList.tabIndex = -1;
settingsItems.forEach(item => {item.tabIndex = -1});
} else {
settings.setAttribute("data-expanded", true);
settingsToggle.setAttribute("aria-expanded", true);
settingsList.setAttribute("aria-hidden", false);
settingsList.removeAttribute("tabIndex");
settingsItems.forEach(item => {item.tabIndex = 0});
};
};

100
assets/styles/style.css
View file

@ -35,6 +35,7 @@
/* Colors */
--black: 0, 0%, 0%;
--white: 0, 0%, 100%;
--cod-gray: 0, 0%, 6%;
--boulder: 0, 0%, 46%;
--color-1: var(--black), 80%;
@ -48,15 +49,18 @@
:root[data-theme="dark"] {
--color-1: var(--white), 80%;
--color-2: var(--black), 94%;
--color-2: var(--cod-gray);
--focus-outline: 0.125rem solid hsl(var(--color-1));
}
:root[data-theme="dark"] .settings__button-svg--theme-sun { display: block; }
:root[data-theme="dark"] .settings__button-svg--theme-moon { display: none; }
:root[data-theme="dark"] .settings__button-svg-westtle--background { fill: #ffffff; }
:root[data-theme="dark"] .settings__button-svg-westtle--cat { fill: #000000; }
:root[data-theme="light"] .settings__svg--theme-sun { display: none; }
:root[data-theme="dark"] .settings__svg--theme-sun { display: block; }
:root[data-theme="dark"] .settings__svg--theme-moon { display: none; }
:root[data-theme="dark"] .settings__svg-westtle--background { fill: #ffffff; }
:root[data-theme="dark"] .settings__svg-westtle--cat { fill: #000000; }
.settings__svg-westtle--background,
.settings__svg-westtle--cat { transition: fill ease-in-out 0.11s; }
/* Resets */
@ -88,6 +92,8 @@ svg {
height: auto;
}
svg { width: 100%; }
button,
input,
textarea {
@ -98,6 +104,9 @@ textarea {
font: inherit;
}
ol,
ul { list-style: none; }
::placeholder {
color: hsl(var(--color-3));
opacity: 1;
@ -138,33 +147,46 @@ body {
.settings {
color: hsl(var(--color-3));
max-width: 1.5rem;
max-height: 16.25rem; /* Height of .settings__buttons. Set it so people can interact with stuff directly below it. */
transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
position: absolute;
position: fixed;
top: 1.125rem;
left: 1.125rem;
bottom: 1.125rem;
left: -2.625rem; /* Width of .settings__buttons */
z-index: 99;
}
.settings__buttons > *,
.settings__button--toggle-settings { margin-bottom: 1.125rem; }
.settings__button--toggle-settings[aria-expanded="true"] { color: hsl(var(--color-1)); }
.settings__button--toggle-settings[aria-expanded="true"] + .settings__buttons { right: 0; }
.settings[data-expanded="true"] { left: 0; }
/* .settings:has([aria-expanded="true"]) { left: 0; } */
/* Settings > Container For Buttons */
.settings__buttons {
width: 100%;
list-style: none;
transition: right cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.3s;
position: relative;
right: 3.125rem;
background-color: hsl(var(--color-2));
border: 0.125rem solid;
border-color: currentColor;
border-left: none;
max-height: 100%;
padding: 0.75rem 0.5rem;
overflow: hidden;
}
.settings[data-expanded="true"] .settings__buttons { overflow-y: auto; }
/* Settings > Individual Button */
.settings__buttons > * { margin-bottom: 1.125rem; }
.settings__buttons > *:last-child { margin: 0; }
.settings__button {
display: block;
color: inherit;
width: 100%;
max-width: 1.5rem;
cursor: pointer;
transition: color ease-in-out 0.1s;
transition: ease-in-out 0.11s;
transition-property: color, opacity;
}
.settings__button:focus-visible {
@ -179,14 +201,44 @@ body {
.settings__button:hover { color: hsl(var(--color-1)); }
}
.settings__button-svg { width: 100%; }
.settings__button-svg--theme-sun { display: none; }
.settings__button-svg-westtle--background,
.settings__button-svg-westtle--cat { transition: fill ease-in-out 0.1s;}
.settings__button--toggle-settings {
background-color: hsl(var(--color-2));
border: 0.125rem solid hsl(var(--color-3));
border-left: none;
position: absolute;
left: 100%;
}
.settings__button--westtle { opacity: 0.75; }
.settings__button--westtle:focus-visible { opacity: 1; }
@media (hover:hover) {
.settings__button--westtle:hover { opacity: 1; }
}
.settings__buttons,
.settings__button--toggle-settings { box-shadow: 0 0.0625rem 0.25rem hsl(0, 0%, 0%, 25%); }
/* Settings > SVG */
.settings__svg--toggle-settings {
padding: 13.67%; /* Use padding on svg to make it smaller (Remember to set the padding below 50%). */
transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
}
.settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
color: hsl(var(--color-1));
transform: rotate(180deg);
}
.settings__svg--westtle { border-radius: 0.1875rem; }
.settings__separator {
display: block;
border-bottom: 2px solid hsl(var(--color-3));
border-bottom: 0.125rem solid;
border-color: currentColor;
border-radius: 6.1875rem;
}
/* Simple Note */

24
index.html
View file

@ -27,23 +27,22 @@
<link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
</head>
<body class="--flex-column --flex-grow">
<aside class="settings">
<aside class="settings" data-expanded="false">
<button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings" aria-expanded="false" aria-controls="settings__buttons">
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--toggle-settings" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Settings</title>
<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings --sr-only">Press to open settings.</span>
</button>
<ul id="settings__buttons" class="settings__buttons" aria-hidden="true">
<span class="settings__separator" aria-hidden="true"></span>
<ul id="settings__buttons" class="settings__buttons" aria-hidden="true" tabindex="-1">
<li class="settings__button-item">
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme" tabindex="-1">
<svg class="settings__button-svg settings__button-svg--theme-moon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--theme-moon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Theme</title>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg class="settings__button-svg settings__button-svg--theme-sun" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--theme-sun" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Theme</title>
<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
@ -53,7 +52,7 @@
<span class="settings__separator" aria-hidden="true"></span>
<li class="settings__button-item">
<button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear" tabindex="-1">
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--clear" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Clear Note</title>
<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
@ -62,7 +61,7 @@
</li>
<li class="settings__button-item">
<button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download" tabindex="-1">
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--download" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Download Note</title>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
@ -72,7 +71,7 @@
<span class="settings__separator" aria-hidden="true"></span>
<li class="settings__button-item">
<a class="settings__button settings__button--github" aria-label="Github Repository (New Tab)" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank" tabindex="-1">
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Github Repository</title>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
@ -80,13 +79,12 @@
</li>
<li class="settings__button-item">
<a class="settings__button settings__button--westtle" aria-label="westtle's Homepage (New Tab)" rel="noopener" href="https://westtle.github.io" target="_blank" tabindex="-1">
<svg class="settings__button-svg settings__button-svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
<svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
<title>westtle's Homepage</title>
<rect class="settings__button-svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__button-svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g>
<rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g>
</svg>
</a>
</li>
<span class="settings__separator" aria-hidden="true"></span>
</ul>
</aside>