Skip to content

Commit

Permalink
working on new sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@steal4life
steal4life committed Sep 21, 2023
1 parent 8d3320e commit 344734c
Show file tree
Hide file tree
Showing 4 changed files with 297 additions and 25 deletions.
34 changes: 17 additions & 17 deletions Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,21 +657,21 @@ public override string Container( Breakpoint breakpoint )

public override string Bar() => "navbar";

public override string BarInitial( bool initial ) => initial ? "b-bar-initial" : null;
public override string BarInitial( bool initial ) => initial ? "navbar-initial" : null;

public override string BarAlignment( Alignment alignment ) => FlexAlignment( alignment );

public override string BarThemeContrast( ThemeContrast themeContrast ) => $"navbar-{ToThemeContrast( themeContrast )} b-bar-{ToThemeContrast( themeContrast )}";
public override string BarThemeContrast( ThemeContrast themeContrast ) => $"navbar-{ToThemeContrast( themeContrast )}";

public override string BarBreakpoint( Breakpoint breakpoint ) => breakpoint != Breakpoint.None && breakpoint != Breakpoint.Mobile ? $"navbar-expand-{ToBreakpoint( breakpoint )}" : null;

public override string BarMode( BarMode mode ) => $"b-bar-{ToBarMode( mode )}";
public override string BarMode( BarMode mode ) => mode != Blazorise.BarMode.Horizontal ? $"navbar-{ToBarMode( mode )} flex-column" : null;

public override string BarItem( BarMode mode, bool hasDropdown ) => mode == Blazorise.BarMode.Horizontal
? hasDropdown
? "nav-item dropdown"
: "nav-item"
: "b-bar-item";
: "nav-item";

public override string BarItemActive( BarMode mode ) => Active();

Expand All @@ -681,55 +681,55 @@ public override string BarItem( BarMode mode, bool hasDropdown ) => mode == Blaz

public override string BarItemHasDropdownShow( BarMode mode ) => null;

public override string BarLink( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "nav-link" : "b-bar-link";
public override string BarLink( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "nav-link" : "nav-link";

public override string BarLinkDisabled( BarMode mode ) => Disabled();

public override string BarBrand( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-brand" : "b-bar-brand";
public override string BarBrand( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-brand" : "navbar-brand";

public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-toggler" :
togglerMode == BarTogglerMode.Popout ? "b-bar-toggler-popout" : "b-bar-toggler-inline";
togglerMode == BarTogglerMode.Popout ? "navbar-toggler-popout" : "navbar-toggler-inline";

public override string BarTogglerCollapsed( BarMode mode, BarTogglerMode togglerMode, bool isShow ) => isShow || mode != Blazorise.BarMode.Horizontal ? null : "collapsed";

public override string BarMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "collapse navbar-collapse" : "b-bar-menu";
public override string BarMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "collapse navbar-collapse" : "collapse navbar-collapse";

public override string BarMenuShow( BarMode mode ) => Show();

public override string BarStart( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-nav me-auto" : "b-bar-start";
public override string BarStart( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-nav me-auto" : "navbar-start flex-column";

public override string BarEnd( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-nav ms-auto" : "b-bar-end";
public override string BarEnd( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "navbar-nav ms-auto" : "navbar-end flex-column";

public override string BarDropdown( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal ? "dropdown" : "b-bar-dropdown";
public override string BarDropdown( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal ? "dropdown" : "dropdown";

public override string BarDropdownShow( BarMode mode ) => Show();

public override string BarDropdownToggle( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal
? isBarDropDownSubmenu
? "dropdown-item"
: "nav-link dropdown-toggle"
: "b-bar-link b-bar-dropdown-toggle";
: "nav-link dropdown-toggle";

public override string BarDropdownToggleDisabled( BarMode mode, bool isBarDropDownSubmenu, bool disabled )
=> mode == Blazorise.BarMode.Horizontal && disabled ? "disabled" : null;

public override string BarDropdownItem( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-item" : "b-bar-dropdown-item";
public override string BarDropdownItem( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-item" : "dropdown-item";

public override string BarTogglerIcon( BarMode mode ) => "navbar-toggler-icon";

public override string BarDropdownDivider( BarMode mode ) => "dropdown-divider";

public override string BarDropdownMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu" : "b-bar-dropdown-menu";
public override string BarDropdownMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu" : "dropdown-menu";

public override string BarDropdownMenuVisible( BarMode mode, bool visible ) => visible ? Show() : null;

public override string BarDropdownMenuRight( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu-end" : "b-bar-right";
public override string BarDropdownMenuRight( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu-end" : "dropdown-menu-end";

public override string BarDropdownMenuContainer( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? null : "b-bar-dropdown-menu-container";
public override string BarDropdownMenuContainer( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? null : "dropdown-menu-container";

public override string BarCollapsed( BarMode mode ) => null;

public override string BarLabel() => "b-bar-label";
public override string BarLabel() => "navbar-label";

#endregion

Expand Down
159 changes: 157 additions & 2 deletions Source/Blazorise.Bootstrap5/Styles/_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
position: relative;
}

.b-bar-horizontal {
.navbar-horizontal {
.nav-item.dropdown {
.dropdown-menu {
> .dropdown {
Expand All @@ -40,4 +40,159 @@
}
}
}
}
}
.navbar-vertical-inline.navbar-dark, .navbar-vertical-popout.navbar-dark, .navbar-vertical-small.navbar-dark {
background: var(--b-bar-dark-background, #001529);
color: var(--b-bar-dark-color, rgba(255, 255, 255, 0.5));
}



.navbar.flex-column {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: sticky;
top: 0;
padding: 0;
min-width: var(--b-vertical-bar-width, 230px);
max-width: var(--b-vertical-bar-width, 230px);
width: var(--b-vertical-bar-width, 230px);
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
height: 100%;

.collapse.navbar-collapse {
width: 100%;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
align-self: stretch;

.navbar-start {
width: 100%;
display: block;

.nav-item {
margin: auto;
flex-grow: 1;
min-height: 40px;

.nav-link {
color: inherit;
display: block;
width: 100%;
text-decoration: none;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
cursor: pointer;
overflow-x: hidden;
line-height: 1.5rem;
vertical-align: middle;
transition: font-size 150ms ease-in;

.nav-icon {
font-size: 1.25rem;
vertical-align: middle;
margin: 3px;
display: inline-block;
}
}

.nav-link.active {
color: var(--b-bar-item-dark-active-color, #fff);
background: var(--b-bar-item-dark-active-background, #0288D1);
}

.dropdown {
color: var(--b-bar-dark-color, rgba(255, 255, 255, 0.5));

.dropdown-toggle:before .nav-link {
display: block;
width: 100%;
text-decoration: none;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
cursor: pointer;
overflow-x: hidden;
line-height: 1.5rem;
vertical-align: middle;
transition: font-size 150ms ease-in;

.dropdown:not([data-visible=true]) .dropdown-toggle:before {
transform: rotate(45deg);
top: 0.5rem;
}
}

.dropdown-menu-container {
color: white;
float: none;
padding: 5px 0px;
position: relative;

.dropdown-menu[data-visible=true] {
display: block;

.dropdown-item {
color: var(--b-bar-item-dark-hover-color, #fff);
background: var(--b-bar-item-dark-hover-background, rgba(255, 255, 255, 0.3));
position: relative;
color: inherit;
transition: background 100ms ease-in-out, color 100ms ease-in-out;
text-decoration: none;
display: block;
width: 100%;
overflow-x: hidden;
}

.dropdown-item.active {
color: var(--b-bar-item-dark-active-color, #fff);
background: var(--b-bar-item-dark-active-background, #0288D1);
}

.dropdown {
color: var(--b-bar-dark-color, rgba(255, 255, 255, 0.5));

.dropdown-toggle:before .nav-link {
display: block;
width: 100%;
text-decoration: none;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
cursor: pointer;
overflow-x: hidden;
line-height: 1.5rem;
vertical-align: middle;
transition: font-size 150ms ease-in;

.dropdown:not([data-visible=true]) .dropdown-toggle:before {
transform: rotate(45deg);
top: 0.5rem;
}
}
}
}

.nav-icon {
font-size: 1.25rem;
vertical-align: middle;
margin: 3px;
display: inline-block;
}
}
}
}
}

.navbar-end {
padding-bottom: 1rem;
width: 100%;
padding-top: 1rem;
display: block;

.nav-item {
margin: auto;
flex-grow: 1;
min-height: 40px;
}
}
}

Loading

0 comments on commit 344734c

Please sign in to comment.