Skip to content

Commit

Permalink
feat(sidenav): remove deprecated sidenav in favor of verical nav
Browse files Browse the repository at this point in the history
closes #316

BREAKING CHANGE: The deprecated sidenav is removed. Please migrate to
the clr-verical-nav component.
  • Loading branch information
kevinbuhmann committed Dec 19, 2022
1 parent 71d51f8 commit 5465f80
Show file tree
Hide file tree
Showing 14 changed files with 4 additions and 318 deletions.
1 change: 0 additions & 1 deletion docs/CONTRIBUTING_DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,6 @@ Set scope of the commit if possible:
- progress-bar
- radio
- select
- sidenav
- signpost
- spinner
- stack-view
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,6 @@
}
}

.sidenav {
flex: 0 0 auto;
order: -1;
overflow: hidden; //overflow-y enabled in .sidenav-content
}

.clr-vertical-nav {
flex: 0 0 auto;
order: -1;
Expand Down
34 changes: 0 additions & 34 deletions projects/angular/src/layout/nav/_properties.sidenav.scss

This file was deleted.

38 changes: 0 additions & 38 deletions projects/angular/src/layout/nav/_responsive-nav.clarity.scss
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,6 @@
.header-nav.clr-nav-level-1,
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.sidenav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
@include sliding-nav-positioning();
transform: translateX(-1 * $clr-sliding-panel-width);
Expand All @@ -233,18 +232,12 @@
.header-nav.clr-nav-level-2,
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
@include sliding-nav-positioning(0, 0, 0, auto);
transform: translateX($clr-sliding-panel-width);
transition: $clr-sliding-panel-animation;
}

.sidenav.clr-nav-level-2 {
// This is to prevent the close button to be hidden by the sidenav content
overflow: inherit;
}

.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.subnav.clr-nav-level-2,
Expand Down Expand Up @@ -301,25 +294,6 @@
}
}

.sidenav.clr-nav-level-1,
.sidenav.clr-nav-level-2 {
.nav-link {
&:hover,
&.active {
color: inherit;
// Is the menu that showsup when the viewport is narrow (x-axis)
@include css-var(
background,
clr-responsive-nav-hover-bg,
$clr-responsive-nav-hover-bg,
$clr-use-custom-properties
);
}
}
}

.sidenav.clr-nav-level-1,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-2 {
border-right: none;
Expand Down Expand Up @@ -483,23 +457,17 @@
.header-nav.clr-nav-level-1,
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.sidenav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
padding-top: $clr-header-height + $clr_baselineRem_1;
transform: translateX(0);
transition: $clr-sliding-panel-animation;

.sidenav-content {
padding-bottom: $clr_baselineRem_1;
}
}
}

&.open-overflow-menu {
.header-nav.clr-nav-level-2,
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
transform: translateX(0);
transition: $clr-sliding-panel-animation;
Expand All @@ -521,7 +489,6 @@
.header-nav.clr-nav-level-1,
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.sidenav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
overflow: inherit;
width: $clr-sliding-panel-width;
Expand All @@ -533,7 +500,6 @@
.header-nav.clr-nav-level-2,
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
width: $clr-sliding-panel-width;
max-width: $clr-sliding-panel-width;
Expand All @@ -555,15 +521,13 @@
.header-nav.clr-nav-level-1,
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.sidenav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
transform: translateX(-1 * $clr-sliding-panel-width-sm);
}

.header-nav.clr-nav-level-2,
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
transform: translateX($clr-sliding-panel-width-sm);
}
Expand All @@ -581,7 +545,6 @@
.header-nav.clr-nav-level-1,
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.sidenav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
overflow: inherit;
width: $clr-sliding-panel-width-sm;
Expand All @@ -597,7 +560,6 @@
.header-nav.clr-nav-level-2,
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.sidenav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
width: $clr-sliding-panel-width-sm;
max-width: $clr-sliding-panel-width-sm;
Expand Down
172 changes: 0 additions & 172 deletions projects/angular/src/layout/nav/_sidenav.clarity.scss

This file was deleted.

39 changes: 0 additions & 39 deletions projects/angular/src/layout/nav/_variables.sidenav.scss

This file was deleted.

Loading

1 comment on commit 5465f80

@kevinbuhmann
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently, I can't spell "vertical" correctly. Anyway, that's what I meant, lol.

Please sign in to comment.