mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-11 01:18:50 +00:00
SA-115 Create sidebar menu
This commit is contained in:
AsTroLog
parent
730a29524a
commit
47a6ecd843
@ -1,6 +1,6 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
|
|
||||||
<PageTitle>Index</PageTitle>
|
<PageTitle>CartaId</PageTitle>
|
||||||
|
|
||||||
<h1>Hello, world!</h1>
|
<h1>Hello, world!</h1>
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,8 @@
|
|||||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||||||
<link href="css/site.css" rel="stylesheet" />
|
<link href="css/site.css" rel="stylesheet" />
|
||||||
<link href="ShoppingAssistantWebClient.Web.styles.css" rel="stylesheet" />
|
<link href="ShoppingAssistantWebClient.Web.styles.css" rel="stylesheet" />
|
||||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
<link rel="icon" type="image/png" href="favicon.ico"/>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'>
|
||||||
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -3,17 +3,13 @@
|
|||||||
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
|
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
|
||||||
|
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="sidebar">
|
<div class="sidebar-menu">
|
||||||
<NavMenu />
|
<NavMenu />
|
||||||
</div>
|
</div>
|
||||||
|
<!--
|
||||||
<main>
|
<main>
|
||||||
<div class="top-row px-4">
|
|
||||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article class="content px-4">
|
<article class="content px-4">
|
||||||
@Body
|
@Body
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>-->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,15 +1,18 @@
|
|||||||
|
|
||||||
.page {
|
.page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border: 1.5% solid;
|
||||||
|
border-color: #edf106;
|
||||||
|
padding: 1.25em;
|
||||||
|
}
|
||||||
|
.sidebar-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
width: 20em;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
}
|
transition: 1s;
|
||||||
|
border: 1.5% solid;
|
||||||
main {
|
border-color: #f10606;
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-row {
|
.top-row {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<div class="top-row ps-3 navbar navbar-dark">
|
<!-- <div class="top-row ps-3 navbar navbar-dark">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="">ShoppingAssistantWebClient.Web</a>
|
<a class="navbar-brand" href="">ShoppingAssistantWebClient.Web</a>
|
||||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||||
@ -40,15 +40,77 @@
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="left_frame" id="leftFrame">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="logo">
|
||||||
|
<img src="/images/logo.png" alt="Logo site">
|
||||||
|
<span class="logo_name">CARTAID</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu">
|
||||||
|
|
||||||
|
<a class="button_close_menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="elements_wishlisht">
|
||||||
|
|
||||||
|
<div class="add_chat">
|
||||||
|
<a href="/">
|
||||||
|
<span>Search +</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wishlist_names">
|
||||||
|
|
||||||
|
@foreach(var item in wishlist){
|
||||||
|
<section class="cont_wishlist">
|
||||||
|
<div id="wishlist_id_@item.Id" class="wishlist_name">@item.Name</div>
|
||||||
|
<img class="button_delete_chat" src="/images/icon_delete.png" alt="Delete wishlist">
|
||||||
|
<img class="button_open_card" src="/images/icon_open_card.png" alt="Card open">
|
||||||
|
</section>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="elements">
|
||||||
|
<div class="info_user">
|
||||||
|
<img src="/images/avatar.jpg" alt="Avatar user">
|
||||||
|
<span class="user_name">Semen Semenov</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
private bool collapseNavMenu = true;
|
private List<ShoppingAssistantWebClient.Web.Models.Wishlist> wishlist {get; set;}
|
||||||
|
protected async override Task OnInitializedAsync(){
|
||||||
|
|
||||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
wishlist = new List<ShoppingAssistantWebClient.Web.Models.Wishlist>()
|
||||||
|
{
|
||||||
private void ToggleNavMenu()
|
new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
|
||||||
{
|
new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
|
||||||
collapseNavMenu = !collapseNavMenu;
|
new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
|
||||||
|
new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
|
||||||
|
new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
|
||||||
|
new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"},
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.navbar-toggler {
|
/*.navbar-toggler {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -56,13 +56,175 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
/* Never collapse the sidebar for wide screens */
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-scrollable {
|
.nav-scrollable {
|
||||||
/* Allow sidebar to scroll for tall menus */
|
|
||||||
height: calc(100vh - 3.5rem);
|
height: calc(100vh - 3.5rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
}*/
|
||||||
|
.left_frame {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
transition: 1s;
|
||||||
}
|
}
|
||||||
|
.logo {
|
||||||
|
height: 5em;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 1.5%;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 5em;
|
||||||
|
bottom: 0;
|
||||||
|
border: 1.5px solid;
|
||||||
|
border-color: #0052CC;
|
||||||
|
border-radius: 0.6em;
|
||||||
|
padding-top: 1.5%;
|
||||||
|
}
|
||||||
|
.elements_wishlisht {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 2.43em;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 4em;
|
||||||
|
padding-left: 1.25em;
|
||||||
|
padding-right: 1.25em;
|
||||||
|
}
|
||||||
|
.info_user {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0 0 0.6em 0.6em;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
height: 4em;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1.25em;
|
||||||
|
padding-right: 1.25em;
|
||||||
|
border-top: 1px solid #0165FF;
|
||||||
|
}
|
||||||
|
.logo_name {
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-left: 0.3em;
|
||||||
|
font-size: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.logo img {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.wishlist_name {
|
||||||
|
padding-left: 0.7em;
|
||||||
|
width: 10.5em;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
.cont_wishlist {
|
||||||
|
margin-top: 0.4375em;
|
||||||
|
margin-bottom: 0.4375em;
|
||||||
|
color: black;
|
||||||
|
border-radius: 0.6em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cont_wishlist:hover {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.cont_wishlist:hover .button_delete_chat{
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.cont_wishlist:hover .button_open_card{
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.button_delete_chat {
|
||||||
|
margin-top: 0.4em;
|
||||||
|
margin-right: 1em;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 1.2em;
|
||||||
|
width: 1.2em;
|
||||||
|
}
|
||||||
|
.button_open_card {
|
||||||
|
margin-top: 0.4em;
|
||||||
|
margin-right: 1em;
|
||||||
|
float: right;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 1.2em;
|
||||||
|
width: 1.3em;
|
||||||
|
}
|
||||||
|
.elements_wishlisht::-webkit-scrollbar {
|
||||||
|
background-color: #009FFF;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 0.2em;
|
||||||
|
}
|
||||||
|
.add_chat {
|
||||||
|
margin-bottom: 0.3125em;
|
||||||
|
background-color: #0165FF;
|
||||||
|
border-radius: 0.6em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
.add_chat a {
|
||||||
|
border-radius: 0.6em;
|
||||||
|
padding-left: 0.7em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.user_name {
|
||||||
|
padding-left: 0.4375em;
|
||||||
|
font-size: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.info_user img {
|
||||||
|
float: left;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 2.3em;
|
||||||
|
height: 2.3em;
|
||||||
|
}
|
||||||
|
.button_close_menu {
|
||||||
|
position: relative;
|
||||||
|
width: 1.43em;
|
||||||
|
height: 1.23em;
|
||||||
|
float: right;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-right: 1.30em;
|
||||||
|
}
|
||||||
|
.button_close_menu span {
|
||||||
|
width: 20px;
|
||||||
|
height: 1.5px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #4E4E4E;
|
||||||
|
}
|
||||||
|
.button_close_menu span:nth-of-type(2) {
|
||||||
|
top: calc(50% - 5px);
|
||||||
|
}
|
||||||
|
.button_close_menu span:nth-of-type(3) {
|
||||||
|
top: calc(50% + 5px);
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
|
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
|
||||||
|
|
||||||
html, body {
|
html {
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: 'Nunito';
|
||||||
}
|
}
|
||||||
|
|
||||||
h1:focus {
|
h1:focus {
|
||||||
@ -22,10 +22,6 @@ a, .btn-link {
|
|||||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-top: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.valid.modified:not([type=checkbox]) {
|
.valid.modified:not([type=checkbox]) {
|
||||||
outline: 1px solid #26b050;
|
outline: 1px solid #26b050;
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
ShoppingAssistantWebClient.Web/wwwroot/favicon.ico
Normal file
BIN
ShoppingAssistantWebClient.Web/wwwroot/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.png
Normal file
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.png
Normal file
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Loading…
Reference in New Issue
Block a user