cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-05 00:59:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

SA-115 Create sidebar menu

Browse Source
This commit is contained in:
––AsTroLog 2023-10-19 08:00:56 +00:00
parent 730a29524a
commit 47a6ecd843
11 changed files with 255 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ShoppingAssistantWebClient.Web/Pages/Index.razor
View File

@ -1,6 +1,6 @@
@page "/"
<PageTitle>Index</PageTitle>
<PageTitle>CartaId</PageTitle>
<h1>Hello, world!</h1>

3
ShoppingAssistantWebClient.Web/Pages/_Host.cshtml
View File

@ -12,7 +12,8 @@
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.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" />
</head>
<body>

10
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
View File

@ -3,17 +3,13 @@
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
<div class="page">
<div class="sidebar">
<div class="sidebar-menu">
<NavMenu />
</div>
<!--
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</main>-->
</div>

23
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css
View File

@ -1,15 +1,18 @@
.page {
width: 100%;
height: 100vh;
border: 1.5% solid;
border-color: #edf106;
padding: 1.25em;
}
.sidebar-menu {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
width: 20em;
height: 100%;
transition: 1s;
border: 1.5% solid;
border-color: #f10606;
}
.top-row {

76
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
View File

@ -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">
<a class="navbar-brand" href="">ShoppingAssistantWebClient.Web</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
@ -40,15 +40,77 @@
</NavLink>
</div>
</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>
@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;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
wishlist = new List<ShoppingAssistantWebClient.Web.Models.Wishlist>()
{
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"},
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"},
};
}
}

168
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
View File

@ -1,4 +1,4 @@
.navbar-toggler {
/*.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
@ -56,13 +56,175 @@
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
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);
}

8
ShoppingAssistantWebClient.Web/wwwroot/css/site.css
View File

@ -1,7 +1,7 @@
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
html {
font-family: 'Nunito';
}
h1:focus {
@ -22,10 +22,6 @@ a, .btn-link {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}

BIN
ShoppingAssistantWebClient.Web/wwwroot/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
ShoppingAssistantWebClient.Web/wwwroot/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB