Skip to content

Commit

Permalink
Sidebar and animation to hamburger menu (#1755)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mkz212
mkz212 committed Nov 20, 2023
1 parent ff66287 commit 9104501
Show file tree
Hide file tree
Showing 2 changed files with 389 additions and 12 deletions.
121 changes: 109 additions & 12 deletions ui/src/app/shared/layout/layout.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!--Main Navigation-->
<header *ngIf="$settings.theme && $auth.user">

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary scrolling-navbar">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary scrolling-navbar d-lg-none">
<a class="navbar-brand" routerLink="/">
<img class="menu-logo" src="/assets/homebridge-logo.svg" />
<strong>Homebridge</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
Expand All @@ -26,7 +27,6 @@
<a class="nav-link" routerLink="/accessories" [translate]="'menu.label_accessories'">Accessories</a>
</li>
</ul>

<ul class="navbar-nav nav-flex-icons hb-nav-right">
<li class="nav-item mr-3" *ngIf="rPiWasUnderVoltage || rPiCurrentlyUnderVoltage">
<a href="javascript:void(0)" class="nav-link dropdown-toggle waves-effect waves-light"
Expand All @@ -38,7 +38,6 @@
[ngClass]="{ 'fa-beat': rPiCurrentlyUnderVoltage }"></i>
</a>
</li>

<li class="nav-item waves-effect waves-light" routerLinkActive="active" placement="bottom"
ngbTooltip="{{'menu.tooltip_view_logs' | translate}}" container="body">
<a class="nav-link" routerLink="/logs" aria-label="View Homebridge Logs">
Expand All @@ -51,7 +50,6 @@
<i #restartHomebridgeIcon class="fas fa-fw fa-power-off nav-menu-icon"></i>
</a>
</li>

<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" aria-label="more actions dropdown menu">
Expand Down Expand Up @@ -89,15 +87,114 @@
</a>
</div>
</li>

</ul>
</div>
</nav>

</header>

<div class="container-fluid d-flex flex-col h-100 w-100">
<div class="w-100">
<div class="container-fluid d-flex flex-col h-100 w-100 p-0">
<div class="sidebar show d-none d-lg-block p-0">
<div class="logo-details">
<img style="height:30px;" src="assets/homebridge-logo.svg" alt="logo">
<span class="logo_name">Homebridge</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<i class="fa fa-house"></i>
<span class="link_name">Dashboard</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Dashboard</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-plug"></i>
<span class="link_name">Plugins</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Plugins</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-lightbulb"></i>
<span class="link_name">Accessories</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Accessories</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-timeline"></i>
<span class="link_name">Logs</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Logs</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-terminal"></i>
<span class="link_name">Terminal</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Terminal</a></li>
</ul>
</li>
<li class="li-link1">
<div class="iocn-link">
<a href="#">
<i class="fa fa-cog"></i>
<span class="link_name">Settings</span>
</a>
<i class="fa fa-chevron-down arrow" data-toggle="collapse" data-target=".li-link1"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Homebridge settings</a></li>
<li><a href="#">Homebridge settings</a></li>
<li><a href="#">UI Settings</a></li>
<li><a href="#">Backup</a></li>
<li><a href="#">Config</a></li>
<li><a href="#">Users</a></li>
</ul>
</li>
<li class="li-link2">
<div class="iocn-link">
<a href="#">
<i class="fa fa-power-off"></i>
<span class="link_name">Restart</span>
</a>
<i class="fa fa-chevron-down arrow" data-toggle="collapse" data-target=".li-link2"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Restart Homebridge</a></li>
<li><a href="#">Restart server</a></li>
<li><a href="#">Shutdown server</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class="fa fa-right-from-bracket"></i>
<span class="link_name">Logout<br><span class="text-muted">admin</span></span>
</a>
</div>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Logout - admin</a></li>
</ul>
</li>
<li>
<div class="iocn-link" style="position: fixed; bottom:0;">
<a href="#" data-toggle="collapse" data-target=".sidebar,#chevron" aria-expanded="false" aria-controls=".sidebar">
<i id="chevron" class="fa fa-chevron-right"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="w-100 p-3">
<router-outlet></router-outlet>
</div>
</div>
Loading

0 comments on commit 9104501

Please sign in to comment.