mirror of
https://github.com/primer/css.git
synced 2024-12-01 12:42:32 +03:00
simurai
GitHub
commit
ed7f326666
@ -167,6 +167,93 @@ Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNa
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Side Nav
|
||||
|
||||
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../../objects/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../../utilities/flexbox) for positioning alongside content.
|
||||
|
||||
- You can use a **light gray background** and a **border** if the parent element doesn't have it already.
|
||||
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
|
||||
|
||||
```html
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">Account</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
|
||||
<a class="SideNav-item" href="#url">Emails</a>
|
||||
<a class="SideNav-item" href="#url">Notifications</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
|
||||
|
||||
```html
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
Text only
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||
With an avatar
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<svg class="octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"></path></svg>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a status icon <svg class="octicon octicon-primitive-dot color-green-5 ml-2 float-right" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<h5>With a heading</h5>
|
||||
<span>and some longer description</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
|
||||
|
||||
```html
|
||||
<aside class="bg-gray-light border p-3" style="max-width: 360px">
|
||||
<h5 class="text-gray mb-2 pb-1 border-bottom">Menu</h5>
|
||||
<nav class="SideNav">
|
||||
<a class="SideNav-subItem" href="#url">Account</a>
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
|
||||
<a class="SideNav-subItem" href="#url">Emails</a>
|
||||
<a class="SideNav-subItem" href="#url">Notifications</a>
|
||||
</nav>
|
||||
<aside>
|
||||
```
|
||||
|
||||
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
|
||||
|
||||
```html
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<svg class="SideNav-icon octicon octicon-person mr-2" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<svg class="SideNav-icon octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"></path></svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 2</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<svg class="SideNav-icon octicon octicon-mail mr-2" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"></path></svg>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Tabnav
|
||||
|
||||
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
|
||||
|
||||
@ -3,5 +3,6 @@
|
||||
@import "./menu.scss";
|
||||
@import "./tabnav.scss";
|
||||
@import "./filter-list.scss";
|
||||
@import "./sidenav.scss";
|
||||
@import "./subnav.scss";
|
||||
@import "./underline-nav.scss";
|
||||
|
||||
110
src/navigation/sidenav.scss
Normal file
110
src/navigation/sidenav.scss
Normal file
@ -0,0 +1,110 @@
|
||||
// Side Nav
|
||||
//
|
||||
// A vertical list of navigational links, typically used on the left side of a page.
|
||||
|
||||
.SideNav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer-3;
|
||||
color: $text-gray;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-top: $border;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
// makes sure there is a "bottom border" in case the list is not long enough
|
||||
box-shadow: 0 $border-width 0 $border-color;
|
||||
}
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 3px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: $gray-300;
|
||||
transition: transform 0.24s ease-in;
|
||||
transform: scaleX(0);
|
||||
transform-origin: center left;
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
|
||||
.SideNav-item:hover,
|
||||
.SideNav-item:focus {
|
||||
color: $text-gray-dark;
|
||||
text-decoration: none;
|
||||
background-color: $gray-100;
|
||||
outline: none;
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
transition: transform 0.12s ease-out;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.SideNav-item:active {
|
||||
background-color: $bg-white;
|
||||
}
|
||||
|
||||
.SideNav-item[aria-current="page"],
|
||||
.SideNav-item[aria-selected="true"] {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
|
||||
// Bar on the left
|
||||
&::before {
|
||||
background-color: $orange-600;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
//
|
||||
// Makes sure multiple icons are vertically aligned
|
||||
|
||||
.SideNav-icon {
|
||||
width: 16px;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
|
||||
// Sub Nav
|
||||
//
|
||||
// A more lightweight version, suited as a sub nav
|
||||
|
||||
.SideNav-subItem {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer-1 0;
|
||||
color: $blue-500;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.SideNav-subItem:hover,
|
||||
.SideNav-subItem:focus {
|
||||
color: $text-gray-dark;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.SideNav-subItem[aria-current="page"],
|
||||
.SideNav-subItem[aria-selected="true"] {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user